diff --git a/public/static/meshes/quiz/quiz.bin b/public/static/meshes/quiz/quiz.bin index c4795ec..b650170 100644 Binary files a/public/static/meshes/quiz/quiz.bin and b/public/static/meshes/quiz/quiz.bin differ diff --git a/public/static/meshes/quiz/quiz.gltf b/public/static/meshes/quiz/quiz.gltf index d559cbf..85e5129 100644 --- a/public/static/meshes/quiz/quiz.gltf +++ b/public/static/meshes/quiz/quiz.gltf @@ -4,12 +4,10 @@ "version":"2.0" }, "extensionsUsed":[ - "KHR_draco_mesh_compression", "KHR_materials_specular", "EXT_texture_webp" ], "extensionsRequired":[ - "KHR_draco_mesh_compression", "EXT_texture_webp" ], "scene":0, @@ -27,22 +25,41 @@ ], "nodes":[ { + "extras":{ + "io.maxDistance":30, + "re.renderOrder":-550 + }, "mesh":0, "name":"floor" }, { + "extras":{ + "re.renderOrder":0, + "io.maxDistance":30 + }, "mesh":1, "name":"tunnel" }, { + "extras":{ + "io.maxDistance":30, + "re.renderOrder":-500 + }, "mesh":2, "name":"door" }, { + "extras":{ + "re.renderOrder":-600 + }, "mesh":3, "name":"surface" }, { + "extras":{ + "io.maxDistance":30, + "re.renderOrder":-500 + }, "mesh":4, "name":"wall" } @@ -123,23 +140,15 @@ "NORMAL":1, "TEXCOORD_0":2 }, - "extensions":{ - "KHR_draco_mesh_compression":{ - "bufferView":0, - "attributes":{ - "POSITION":0, - "NORMAL":1, - "TEXCOORD_0":2 - } - } - }, "indices":3, - "material":0, - "mode":4 + "material":0 } ] }, { + "extras":{ + "prop":1.0 + }, "name":"Sphere.001", "primitives":[ { @@ -148,19 +157,8 @@ "NORMAL":5, "TEXCOORD_0":6 }, - "extensions":{ - "KHR_draco_mesh_compression":{ - "bufferView":1, - "attributes":{ - "POSITION":0, - "NORMAL":1, - "TEXCOORD_0":2 - } - } - }, "indices":7, - "material":1, - "mode":4 + "material":1 }, { "attributes":{ @@ -168,19 +166,8 @@ "NORMAL":9, "TEXCOORD_0":10 }, - "extensions":{ - "KHR_draco_mesh_compression":{ - "bufferView":2, - "attributes":{ - "POSITION":0, - "NORMAL":1, - "TEXCOORD_0":2 - } - } - }, "indices":11, - "material":2, - "mode":4 + "material":2 } ] }, @@ -193,19 +180,8 @@ "NORMAL":13, "TEXCOORD_0":14 }, - "extensions":{ - "KHR_draco_mesh_compression":{ - "bufferView":3, - "attributes":{ - "POSITION":0, - "NORMAL":1, - "TEXCOORD_0":2 - } - } - }, "indices":11, - "material":2, - "mode":4 + "material":2 } ] }, @@ -218,19 +194,8 @@ "NORMAL":16, "TEXCOORD_0":17 }, - "extensions":{ - "KHR_draco_mesh_compression":{ - "bufferView":4, - "attributes":{ - "POSITION":0, - "NORMAL":1, - "TEXCOORD_0":2 - } - } - }, "indices":18, - "material":3, - "mode":4 + "material":3 } ] }, @@ -243,19 +208,8 @@ "NORMAL":20, "TEXCOORD_0":21 }, - "extensions":{ - "KHR_draco_mesh_compression":{ - "bufferView":5, - "attributes":{ - "POSITION":0, - "NORMAL":1, - "TEXCOORD_0":2 - } - } - }, "indices":22, - "material":1, - "mode":4 + "material":1 } ] } @@ -344,6 +298,7 @@ ], "accessors":[ { + "bufferView":0, "componentType":5126, "count":272, "max":[ @@ -359,21 +314,25 @@ "type":"VEC3" }, { + "bufferView":1, "componentType":5126, "count":272, "type":"VEC3" }, { + "bufferView":2, "componentType":5126, "count":272, "type":"VEC2" }, { + "bufferView":3, "componentType":5123, "count":288, "type":"SCALAR" }, { + "bufferView":4, "componentType":5126, "count":368, "max":[ @@ -389,21 +348,25 @@ "type":"VEC3" }, { + "bufferView":5, "componentType":5126, "count":368, "type":"VEC3" }, { + "bufferView":6, "componentType":5126, "count":368, "type":"VEC2" }, { + "bufferView":7, "componentType":5123, "count":990, "type":"SCALAR" }, { + "bufferView":8, "componentType":5126, "count":4, "max":[ @@ -419,21 +382,25 @@ "type":"VEC3" }, { + "bufferView":9, "componentType":5126, "count":4, "type":"VEC3" }, { + "bufferView":10, "componentType":5126, "count":4, "type":"VEC2" }, { + "bufferView":11, "componentType":5123, "count":6, "type":"SCALAR" }, { + "bufferView":12, "componentType":5126, "count":4, "max":[ @@ -449,16 +416,19 @@ "type":"VEC3" }, { + "bufferView":13, "componentType":5126, "count":4, "type":"VEC3" }, { + "bufferView":14, "componentType":5126, "count":4, "type":"VEC2" }, { + "bufferView":15, "componentType":5126, "count":4, "max":[ @@ -474,21 +444,25 @@ "type":"VEC3" }, { + "bufferView":16, "componentType":5126, "count":4, "type":"VEC3" }, { + "bufferView":17, "componentType":5126, "count":4, "type":"VEC2" }, { + "bufferView":18, "componentType":5123, "count":6, "type":"SCALAR" }, { + "bufferView":19, "componentType":5126, "count":36, "max":[ @@ -504,16 +478,19 @@ "type":"VEC3" }, { + "bufferView":20, "componentType":5126, "count":36, "type":"VEC3" }, { + "bufferView":21, "componentType":5126, "count":36, "type":"VEC2" }, { + "bufferView":22, "componentType":5123, "count":54, "type":"SCALAR" @@ -522,33 +499,141 @@ "bufferViews":[ { "buffer":0, - "byteLength":2376, - "byteOffset":0 + "byteLength":3264, + "byteOffset":0, + "target":34962 }, { "buffer":0, - "byteLength":3883, - "byteOffset":2376 + "byteLength":3264, + "byteOffset":3264, + "target":34962 }, { "buffer":0, - "byteLength":166, - "byteOffset":6260 + "byteLength":2176, + "byteOffset":6528, + "target":34962 }, { "buffer":0, - "byteLength":166, - "byteOffset":6428 + "byteLength":576, + "byteOffset":8704, + "target":34963 }, { "buffer":0, - "byteLength":167, - "byteOffset":6596 + "byteLength":4416, + "byteOffset":9280, + "target":34962 }, { "buffer":0, - "byteLength":561, - "byteOffset":6764 + "byteLength":4416, + "byteOffset":13696, + "target":34962 + }, + { + "buffer":0, + "byteLength":2944, + "byteOffset":18112, + "target":34962 + }, + { + "buffer":0, + "byteLength":1980, + "byteOffset":21056, + "target":34963 + }, + { + "buffer":0, + "byteLength":48, + "byteOffset":23036, + "target":34962 + }, + { + "buffer":0, + "byteLength":48, + "byteOffset":23084, + "target":34962 + }, + { + "buffer":0, + "byteLength":32, + "byteOffset":23132, + "target":34962 + }, + { + "buffer":0, + "byteLength":12, + "byteOffset":23164, + "target":34963 + }, + { + "buffer":0, + "byteLength":48, + "byteOffset":23176, + "target":34962 + }, + { + "buffer":0, + "byteLength":48, + "byteOffset":23224, + "target":34962 + }, + { + "buffer":0, + "byteLength":32, + "byteOffset":23272, + "target":34962 + }, + { + "buffer":0, + "byteLength":48, + "byteOffset":23304, + "target":34962 + }, + { + "buffer":0, + "byteLength":48, + "byteOffset":23352, + "target":34962 + }, + { + "buffer":0, + "byteLength":32, + "byteOffset":23400, + "target":34962 + }, + { + "buffer":0, + "byteLength":12, + "byteOffset":23432, + "target":34963 + }, + { + "buffer":0, + "byteLength":432, + "byteOffset":23444, + "target":34962 + }, + { + "buffer":0, + "byteLength":432, + "byteOffset":23876, + "target":34962 + }, + { + "buffer":0, + "byteLength":288, + "byteOffset":24308, + "target":34962 + }, + { + "buffer":0, + "byteLength":108, + "byteOffset":24596, + "target":34963 } ], "samplers":[ @@ -559,7 +644,7 @@ ], "buffers":[ { - "byteLength":7328, + "byteLength":24704, "uri":"quiz.bin" } ] diff --git a/src/components/InteractiveObjects/InteractiveObject.js b/src/components/InteractiveObjects/InteractiveObject.js index 19bd0f0..0c18950 100644 --- a/src/components/InteractiveObjects/InteractiveObject.js +++ b/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); }); diff --git a/src/components/InteractiveObjects/MazeQuizGame/MazeObject.js b/src/components/InteractiveObjects/MazeQuizGame/MazeObject.js index 50dad0e..ee02fad 100644 --- a/src/components/InteractiveObjects/MazeQuizGame/MazeObject.js +++ b/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; diff --git a/src/lib/Dashboard.js b/src/lib/Dashboard.js index 35200d1..c1ecadb 100644 --- a/src/lib/Dashboard.js +++ b/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); diff --git a/src/lib/GameEngine.js b/src/lib/GameEngine.js index 765267b..f3bbe9e 100644 --- a/src/lib/GameEngine.js +++ b/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();