#69

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();
+        }
     }
 }
 

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);

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]})
                     }

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);
     }
 

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);