#66

src/components/InteractiveObjects/InteractiveObject.js

@@ -91,19 +91,20 @@ class InteractiveObject extends EventManager{
             }
             
             if (obj.distance) {
-                const o = this.object;
-                let dstm = obj.distance;
-                let v = new Vector3();
-                o.visible = false;
-                engine.addEventListener('beforeRender', function () {
-                    o.getWorldPosition(v);
-                    var dst = engine.cameraWorld.position.distanceTo(v);
-                    if (dst <= dstm && !o.visible) {
-                        o.visible = true;
-                    }else if (dst > dstm && o.visible){
-                        o.visible = false;
-                    }
-                });
+                engine.hideIfFar(this.object, obj.distance)
+                // const o = this.object;
+                // let dstm = obj.distance;
+                // let v = new Vector3();
+                // o.visible = false;
+                // engine.addEventListener('beforeRender', function () {
+                //     o.getWorldPosition(v);
+                //     var dst = engine.cameraWorld.position.distanceTo(v);
+                //     if (dst <= dstm && !o.visible) {
+                //         o.visible = true;
+                //     }else if (dst > dstm && o.visible){
+                //         o.visible = false;
+                //     }
+                // });
             }
             resolve(this);
         });

src/components/InteractiveObjects/MazeQuizGame/MazeObject.js

@@ -1,4 +1,4 @@
-import { Group, Vector3, Matrix4, Mesh, Quaternion, PlaneGeometry, MeshStandardMaterial, DoubleSide, RepeatWrapping, Vector2} from 'three';
+import { Group, Vector3, Matrix4, Quaternion, RepeatWrapping, Vector2} from 'three';
 import { InteractiveObject } from '../InteractiveObject';
 import { getBoundingBox, getBoundingBoxSize } from '@/lib/MeshUtils';
 
@@ -79,6 +79,9 @@ class MazeObject {
                 bbox.l = Math.min(g.position.x, bbox.l)
                 bbox.r = Math.max(g.position.x, bbox.r)
                 bbox.f = Math.max(g.position.z, bbox.f)
+                if (g.userData?.['io.maxDistance']){
+                    engine.hideIfFar(g, g.userData?.['io.maxDistance']);
+                }
             });
             
             //the floor:
@@ -101,6 +104,9 @@ class MazeObject {
                 let t = o.tunnel.clone();
                 t.position.set(0, 0, i * tubeSize);
                 def.matrix && t.applyMatrix4(def.matrix);
+                if (t.userData?.['io.maxDistance']){
+                    engine.hideIfFar(t, t.userData?.['io.maxDistance']);
+                }
                 root.add(t);
             }
             offsetZ = def.len * tubeSize;

src/lib/Dashboard.js

@@ -27,6 +27,7 @@ class DashBoard extends EventManager {
 		hud.add(hudTarget)
 		hudTarget.position.set(0,0,0.52);
 		dash.visible = false;
+		dash.renderOrder = 1000;
 		const k = 3.11;
 		const dashWidth = engine.aspect * k, dashHeight = k;
 		const dashDistance = 1.77;
@@ -76,7 +77,8 @@ class DashBoard extends EventManager {
 				new MeshBasicMaterial({
 					map,
 					opacity: 0.52,
-					transparent:true
+					transparent:true,
+					depthTest: false,
 				})
 			);
 			textPlane.position.z = -0.002;
@@ -84,7 +86,7 @@ class DashBoard extends EventManager {
 			textPlane.visible = false;
 			dash.add(textPlane)
 			// fix #44
-			textPlane.material.depthTest = false;
+			//textPlane.material.depthTest = false;
 			//hudPlane.material.depthTest = false;
 			this.sceneHeader = sceneHeader = await new SceneHeader(engine, {dashWidth, dashHeight});
 			dash.add(sceneHeader.object);

src/lib/GameEngine.js

@@ -100,7 +100,7 @@ class GameEngine extends EventManager{
         renderer.setSize(this.w, this.h);
         renderer.setViewport(0, 0, this.w, this.h);
         renderer.autoClear = true;
-        renderer.alpha = true
+        //renderer.alpha = true
         this.renderer = renderer;
 
         this.anaglyph = new AnaglyphEffect(renderer);
@@ -163,6 +163,7 @@ class GameEngine extends EventManager{
             gameEngine.hero?.update(delta);
             gameEngine.mixers.forEach(m => m.update(delta));
             gameEngine.dispatchEvent({type: 'beforeRender'})
+            gameEngine.processHideIfFar();
             this.motionQueue.update(delta);
 
             gameEngine.render(scene, gameEngine.camera);
@@ -454,6 +455,13 @@ class GameEngine extends EventManager{
                         if (object.material.map) {
                             object.material.map.colorSpace = THREE.SRGBColorSpace;
                         }
+                        
+                        if (object.userData){
+                            if (object.userData['re.renderOrder'] !== undefined){
+                                object.renderOrder = object.userData['re.renderOrder'];
+                                //object.material.alphaTest = true;
+                            }
+                        }
                     }
                     object.frustumCulled = false;
                     object.castShadow = true;
@@ -604,6 +612,26 @@ class GameEngine extends EventManager{
         this.stats?.update()
     }
 
+    farArray = [];
+
+    hideIfFar(object, distance){
+        object.visible = false;
+        this.farArray.push({object, distance})
+    }
+
+    processHideIfFar(){
+        let v = new THREE.Vector3();
+        this.farArray.forEach(e=>{
+            e.object.getWorldPosition(v);
+            let dst = this.cameraWorld.position.distanceTo(v);
+            if (dst <= e.distance && !e.object.visible) {
+                e.object.visible = true;
+            }else if (dst > e.distance && e.object.visible){
+                e.object.visible = false;
+            }
+        })
+    }
+
     clearScene(){
         this.hero?.destroy();
         this.dashboard?.reset();