diff --git a/src/lib/Clickable.js b/src/lib/Clickable.js index d31912b..37edbc0 100644 --- a/src/lib/Clickable.js +++ b/src/lib/Clickable.js @@ -8,7 +8,7 @@ class Clickable { this.add = function (object, fn, distance) { objects.push(object); - object._clickable = { fn, distance: distance || defaultDistance }; + object._clickable = { fn, distance: (distance || defaultDistance) * engine.scale }; }; this.remove = function (object) { @@ -42,7 +42,7 @@ class Clickable { return true; }).forEach(o => { o.getWorldPosition(v); - if (cv.distanceTo(v) <= o._clickable.distance / engine.scale) { + if (cv.distanceTo(v) <= o._clickable.distance) { const intersects = raycaster.intersectObject(o); if (intersects[0]) { forExecute.push({ o, i: intersects[0] }); @@ -54,6 +54,10 @@ class Clickable { sorted[0].o._clickable.fn(sorted[0].i); } } + + this.trigger = function(o){ + o._clickable.fn(); + } } } diff --git a/src/lib/Dashboard.js b/src/lib/Dashboard.js index aaffaae..db72c14 100644 --- a/src/lib/Dashboard.js +++ b/src/lib/Dashboard.js @@ -1,5 +1,5 @@ import { - PlaneGeometry, CylinderGeometry, Group, SphereGeometry, + Group, PlaneGeometry, CylinderGeometry, SphereGeometry, RingGeometry, Mesh, MeshStandardMaterial, MeshBasicMaterial, DoubleSide } from "three"; @@ -9,6 +9,7 @@ import Utils from "#/app/Utils"; import { TextObject } from "@/components/InteractiveObjects/TextObject/TextObject"; class DashBoard extends EventManager { #points = 0; + #attached = null; constructor(engine) { super(); let levelProgress; @@ -64,8 +65,11 @@ class DashBoard extends EventManager { }) ); hudPlane.position.z = -0.07 * dashHeight; - hudPlane.position.y = -0.011 * dashHeight + hudPlane.position.y = -0.011 * dashHeight; hud.add(hudPlane) + engine.clickable.add(hudPlane, ()=>{ + engine.clickable.trigger(this.#attached.object) + }) textPlane = new Mesh( new PlaneGeometry(dashWidth * 0.86, 0.15 * dashHeight), @@ -116,6 +120,16 @@ class DashBoard extends EventManager { dash.translateZ(-dashDistance -0.75/Math.tan(engine.camera.fov/2 * Math.PI/180) * engine.camera.zoom); //}) + this.pointer = new Mesh( + new RingGeometry(dashHeight * 0.002, dashHeight * 0.005), + new MeshBasicMaterial( { color: 0xffff00, depthTest: false } ) + ); + this.pointer.visible = false; + this.pointer.renderOrder = 1010; + const pointerWrapper = new Group(); + pointerWrapper.add(this.pointer); + dash.add(pointerWrapper); + this.initScene = function(scene, startBtnCallback){ this.loading(0,0); sceneHeader.init(scene, startBtnCallback); @@ -221,6 +235,7 @@ class DashBoard extends EventManager { this.cameraFix = engine.hero.cameraZ; engine.hero.cameraZ = 6; hud.visible = true; + pointerWrapper.visible = false; hudPlane.visible = !!opts.plane; if (opts.plane){ hudPlane.scale.set(0, .1, 1); @@ -247,6 +262,7 @@ class DashBoard extends EventManager { } hudTarget.attach(object); occupied = true; + this.#attached = {object, opts}; let result = new Promise((resolve, reject)=>{ engine.motionQueue.add({ @@ -277,6 +293,7 @@ class DashBoard extends EventManager { this.detach = (object, opts = {})=>{ engine.hero.cameraZ = this.cameraFix; + pointerWrapper.visible = true; //console.log('detaching', object) engine.motionQueue.remove(hudAnimation); object._hud.parent?.attach(object); diff --git a/src/lib/Draggable.js b/src/lib/Draggable.js index abc8517..e01bfa1 100644 --- a/src/lib/Draggable.js +++ b/src/lib/Draggable.js @@ -8,7 +8,7 @@ class Draggable{ let dragging = null; this.add = function(object, dragZone, fn, distance){ objects.push(object); - object._draggable = {fn, dragZone, distance: distance || defaultDistance} + object._draggable = {fn, dragZone, distance: (distance || defaultDistance) * engine.scale} } this.remove = function(object){ @@ -38,7 +38,7 @@ class Draggable{ return true; }).forEach(o=>{ o.getWorldPosition(v); - if (cv.distanceTo(v) <= o._draggable.distance / engine.scale){ + if (cv.distanceTo(v) <= o._draggable.distance){ const intersects = raycaster.intersectObject(o); if (intersects[0]) forExecute.push({o, i:intersects[0]}) } diff --git a/src/lib/GameEngine.js b/src/lib/GameEngine.js index 780515a..89cd8df 100644 --- a/src/lib/GameEngine.js +++ b/src/lib/GameEngine.js @@ -26,6 +26,7 @@ THREE.Cache.enabled = true const assetPath = '/asset/default/'; const defaultLightIntensity = 11; +const defaultInteractionDistance = 10; const sceneScale = 1.33; class GameEngine extends EventManager{ @@ -227,8 +228,8 @@ class GameEngine extends EventManager{ this.initXr(); } - this.clickable = new Clickable(this, 20); - this.draggable = new Draggable(this, 20); + this.clickable = new Clickable(this, defaultInteractionDistance); + this.draggable = new Draggable(this, defaultInteractionDistance); await this.initScene(); @@ -545,14 +546,24 @@ class GameEngine extends EventManager{ } onClick(mouseEvent, domElement){ - let mouse = this.getMouseVector(mouseEvent, domElement); + let mouse; + if (this.pointerControls.isLocked){ + mouse = new THREE.Vector3(0,0,0); + }else{ + mouse = this.getMouseVector(mouseEvent, domElement); + } //this.raycaster.setFromCamera(mouse, this.camera); this.clickable.handleMouse(mouse, mouseEvent); this.hero?.idleReset(); } onPointer(mouseEvent, domElement, type){ - let mouse = this.getMouseVector(mouseEvent, domElement); + let mouse; + if (this.pointerControls.isLocked){ + mouse = new THREE.Vector3(0,0,0); + }else{ + mouse = this.getMouseVector(mouseEvent, domElement); + } this.draggable?.handleMouse(mouse, type); } diff --git a/src/lib/Hero.js b/src/lib/Hero.js index bd32b47..5568751 100644 --- a/src/lib/Hero.js +++ b/src/lib/Hero.js @@ -28,9 +28,11 @@ class Hero{ this.#cameraZ = 0; this.fpv = true; this.cameraY = this.cameraYBase; + this.engine.dashboard.pointer.visible = true; this.engine.pointerControls.once('unlock', ()=>{ this.fpv = false; this.cameraY = this.cameraYBase * 1.5; + this.engine.dashboard.pointer.visible = false; }) }).catch(err=>{ console.log(err);