diff --git a/public/static/meshes/maze-reed.bin b/public/static/meshes/maze-reed.bin deleted file mode 100644 index ce73f21..0000000 Binary files a/public/static/meshes/maze-reed.bin and /dev/null differ diff --git a/public/static/meshes/quiz.bin b/public/static/meshes/quiz.bin new file mode 100644 index 0000000..3b7a171 Binary files /dev/null and b/public/static/meshes/quiz.bin differ diff --git a/public/static/meshes/maze-reed.gltf b/public/static/meshes/quiz.gltf similarity index 57% rename from public/static/meshes/maze-reed.gltf rename to public/static/meshes/quiz.gltf index 87638c1..ab9847d 100644 --- a/public/static/meshes/maze-reed.gltf +++ b/public/static/meshes/quiz.gltf @@ -4,8 +4,12 @@ "version":"2.0" }, "extensionsUsed":[ + "KHR_draco_mesh_compression", "KHR_materials_specular" ], + "extensionsRequired":[ + "KHR_draco_mesh_compression" + ], "scene":0, "scenes":[ { @@ -16,26 +20,14 @@ 2, 3, 4, - 5, - 6 + 5 ] } ], "nodes":[ { "mesh":0, - "name":"floor", - "rotation":[ - 0, - 0.08009588718414307, - 0, - 0.9967872500419617 - ], - "translation":[ - 0.03920316323637962, - 0.16448557376861572, - -0.05337028205394745 - ] + "name":"floor" }, { "mesh":1, @@ -51,14 +43,10 @@ }, { "mesh":4, - "name":"old-wall" - }, - { - "mesh":5, "name":"wall" }, { - "mesh":6, + "mesh":5, "name":"tunnel.001", "translation":[ 0, @@ -131,13 +119,9 @@ { "alphaMode":"BLEND", "name":"Material", - "normalTexture":{ - "index":5, - "scale":2 - }, "pbrMetallicRoughness":{ "baseColorTexture":{ - "index":6 + "index":5 }, "metallicFactor":0, "roughnessFactor":0.8999999761581421 @@ -154,8 +138,19 @@ "NORMAL":1, "TEXCOORD_0":2 }, + "extensions":{ + "KHR_draco_mesh_compression":{ + "bufferView":0, + "attributes":{ + "POSITION":0, + "NORMAL":1, + "TEXCOORD_0":2 + } + } + }, "indices":3, - "material":0 + "material":0, + "mode":4 } ] }, @@ -168,8 +163,19 @@ "NORMAL":5, "TEXCOORD_0":6 }, + "extensions":{ + "KHR_draco_mesh_compression":{ + "bufferView":1, + "attributes":{ + "POSITION":0, + "NORMAL":1, + "TEXCOORD_0":2 + } + } + }, "indices":7, - "material":1 + "material":1, + "mode":4 }, { "attributes":{ @@ -177,8 +183,19 @@ "NORMAL":9, "TEXCOORD_0":10 }, + "extensions":{ + "KHR_draco_mesh_compression":{ + "bufferView":2, + "attributes":{ + "POSITION":0, + "NORMAL":1, + "TEXCOORD_0":2 + } + } + }, "indices":11, - "material":2 + "material":2, + "mode":4 } ] }, @@ -191,8 +208,19 @@ "NORMAL":13, "TEXCOORD_0":14 }, + "extensions":{ + "KHR_draco_mesh_compression":{ + "bufferView":3, + "attributes":{ + "POSITION":0, + "NORMAL":1, + "TEXCOORD_0":2 + } + } + }, "indices":11, - "material":2 + "material":2, + "mode":4 } ] }, @@ -205,22 +233,19 @@ "NORMAL":16, "TEXCOORD_0":17 }, - "indices":18, - "material":3 - } - ] - }, - { - "name":"Curve.005", - "primitives":[ - { - "attributes":{ - "POSITION":19, - "NORMAL":20, - "TEXCOORD_0":21 + "extensions":{ + "KHR_draco_mesh_compression":{ + "bufferView":4, + "attributes":{ + "POSITION":0, + "NORMAL":1, + "TEXCOORD_0":2 + } + } }, - "indices":22, - "material":4 + "indices":18, + "material":3, + "mode":4 } ] }, @@ -229,35 +254,68 @@ "primitives":[ { "attributes":{ - "POSITION":23, - "NORMAL":24, - "TEXCOORD_0":25 + "POSITION":19, + "NORMAL":20, + "TEXCOORD_0":21 }, - "indices":26, - "material":1 + "extensions":{ + "KHR_draco_mesh_compression":{ + "bufferView":5, + "attributes":{ + "POSITION":0, + "NORMAL":1, + "TEXCOORD_0":2 + } + } + }, + "indices":22, + "material":1, + "mode":4 } ] }, { "name":"Plane.001", "primitives":[ + { + "attributes":{ + "POSITION":23, + "NORMAL":24, + "TEXCOORD_0":25 + }, + "extensions":{ + "KHR_draco_mesh_compression":{ + "bufferView":6, + "attributes":{ + "POSITION":0, + "NORMAL":1, + "TEXCOORD_0":2 + } + } + }, + "indices":26, + "material":4, + "mode":4 + }, { "attributes":{ "POSITION":27, "NORMAL":28, "TEXCOORD_0":29 }, - "indices":30, - "material":4 - }, - { - "attributes":{ - "POSITION":31, - "NORMAL":32, - "TEXCOORD_0":33 + "extensions":{ + "KHR_draco_mesh_compression":{ + "bufferView":7, + "attributes":{ + "POSITION":0, + "NORMAL":1, + "TEXCOORD_0":2 + } + } }, "indices":11, - "material":3 + "material":3, + "mode":4 } ] } @@ -286,32 +344,28 @@ { "sampler":0, "source":5 - }, - { - "sampler":0, - "source":6 } ], "images":[ { - "mimeType":"image/png", + "mimeType":"image/jpeg", "name":"T_Grass_Base_N", - "uri":"T_Grass_Base_N.png" + "uri":"T_Grass_Base_N.jpg" }, { "mimeType":"image/png", - "name":"T_Grass_Base_D", - "uri":"T_Grass_Base_D.png" + "name":"T_Grass_Base_D-T_Grass_Base_D.png", + "uri":"T_Grass_Base_D-T_Grass_Base_D_png.png" }, { - "mimeType":"image/png", + "mimeType":"image/jpeg", "name":"T_Grass_Reeds_N", - "uri":"T_Grass_Reeds_N.png" + "uri":"T_Grass_Reeds_N.jpg" }, { "mimeType":"image/png", - "name":"T_Grass_Reeds_D", - "uri":"T_Grass_Reeds_D.png" + "name":"T_Grass_Reeds_D-T_Grass_Reeds_D.png", + "uri":"T_Grass_Reeds_D-T_Grass_Reeds_D_png.png" }, { "mimeType":"image/png", @@ -320,86 +374,72 @@ }, { "mimeType":"image/png", - "name":"reed-nm", - "uri":"reed-nm.png" - }, - { - "mimeType":"image/png", - "name":"b1", - "uri":"b1.png" + "name":"Image", + "uri":"Image.png" } ], "accessors":[ { - "bufferView":0, "componentType":5126, "count":272, "max":[ - 0.5986211895942688, - 0.34277740120887756, - 0.6759099364280701 + 0.793377161026001, + 0.48276516795158386, + 0.7508191466331482 ], "min":[ - -0.617611289024353, - -0.07126913964748383, - -0.5153314471244812 + -0.7325652241706848, + 0.06871864199638367, + -0.7869381904602051 ], "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":[ 0.7171434760093689, 0.8464050889015198, - 1.19857919216156 + 1.2504138946533203 ], "min":[ -0.7015569806098938, 0.07388153672218323, - 0.0033763647079467773 + -0.1240709125995636 ], "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":[ @@ -415,25 +455,21 @@ "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,19 +485,16 @@ "type":"VEC3" }, { - "bufferView":13, "componentType":5126, "count":4, "type":"VEC3" }, { - "bufferView":14, "componentType":5126, "count":4, "type":"VEC2" }, { - "bufferView":15, "componentType":5126, "count":24, "max":[ @@ -477,93 +510,51 @@ "type":"VEC3" }, { - "bufferView":16, "componentType":5126, "count":24, "type":"VEC3" }, { - "bufferView":17, "componentType":5126, "count":24, "type":"VEC2" }, { - "bufferView":18, "componentType":5123, "count":36, "type":"SCALAR" }, { - "bufferView":19, - "componentType":5126, - "count":4, - "max":[ - 0.6000000238418579, - 0.9000000953674316, - 1.196586936202948e-07 - ], - "min":[ - -0.6000000238418579, - 0.09999997168779373, - -1.233839839187567e-07 - ], - "type":"VEC3" - }, - { - "bufferView":20, - "componentType":5126, - "count":4, - "type":"VEC3" - }, - { - "bufferView":21, - "componentType":5126, - "count":4, - "type":"VEC2" - }, - { - "bufferView":22, - "componentType":5123, - "count":6, - "type":"SCALAR" - }, - { - "bufferView":23, "componentType":5126, "count":36, "max":[ - 0.8499144911766052, + 0.7990192770957947, 0.773558497428894, - 0.29249176383018494 + 0.3007844090461731 ], "min":[ - -0.7763704061508179, + -0.7644245624542236, 0.0007717907428741455, - 0.059992991387844086 + -0.06430260837078094 ], "type":"VEC3" }, { - "bufferView":24, "componentType":5126, "count":36, "type":"VEC3" }, { - "bufferView":25, "componentType":5126, "count":36, "type":"VEC2" }, { - "bufferView":26, "componentType":5123, "count":54, "type":"SCALAR" }, { - "bufferView":27, "componentType":5126, "count":8, "max":[ @@ -579,25 +570,21 @@ "type":"VEC3" }, { - "bufferView":28, "componentType":5126, "count":8, "type":"VEC3" }, { - "bufferView":29, "componentType":5126, "count":8, "type":"VEC2" }, { - "bufferView":30, "componentType":5123, "count":12, "type":"SCALAR" }, { - "bufferView":31, "componentType":5126, "count":4, "max":[ @@ -613,13 +600,11 @@ "type":"VEC3" }, { - "bufferView":32, "componentType":5126, "count":4, "type":"VEC3" }, { - "bufferView":33, "componentType":5126, "count":4, "type":"VEC2" @@ -628,207 +613,43 @@ "bufferViews":[ { "buffer":0, - "byteLength":3264, - "byteOffset":0, - "target":34962 + "byteLength":2376, + "byteOffset":0 }, { "buffer":0, - "byteLength":3264, - "byteOffset":3264, - "target":34962 + "byteLength":3883, + "byteOffset":2376 }, { "buffer":0, - "byteLength":2176, - "byteOffset":6528, - "target":34962 + "byteLength":166, + "byteOffset":6260 }, { "buffer":0, - "byteLength":576, - "byteOffset":8704, - "target":34963 + "byteLength":166, + "byteOffset":6428 }, { "buffer":0, - "byteLength":4416, - "byteOffset":9280, - "target":34962 + "byteLength":278, + "byteOffset":6596 }, { "buffer":0, - "byteLength":4416, - "byteOffset":13696, - "target":34962 + "byteLength":561, + "byteOffset":6876 }, { "buffer":0, - "byteLength":2944, - "byteOffset":18112, - "target":34962 + "byteLength":213, + "byteOffset":7440 }, { "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":288, - "byteOffset":23304, - "target":34962 - }, - { - "buffer":0, - "byteLength":288, - "byteOffset":23592, - "target":34962 - }, - { - "buffer":0, - "byteLength":192, - "byteOffset":23880, - "target":34962 - }, - { - "buffer":0, - "byteLength":72, - "byteOffset":24072, - "target":34963 - }, - { - "buffer":0, - "byteLength":48, - "byteOffset":24144, - "target":34962 - }, - { - "buffer":0, - "byteLength":48, - "byteOffset":24192, - "target":34962 - }, - { - "buffer":0, - "byteLength":32, - "byteOffset":24240, - "target":34962 - }, - { - "buffer":0, - "byteLength":12, - "byteOffset":24272, - "target":34963 - }, - { - "buffer":0, - "byteLength":432, - "byteOffset":24284, - "target":34962 - }, - { - "buffer":0, - "byteLength":432, - "byteOffset":24716, - "target":34962 - }, - { - "buffer":0, - "byteLength":288, - "byteOffset":25148, - "target":34962 - }, - { - "buffer":0, - "byteLength":108, - "byteOffset":25436, - "target":34963 - }, - { - "buffer":0, - "byteLength":96, - "byteOffset":25544, - "target":34962 - }, - { - "buffer":0, - "byteLength":96, - "byteOffset":25640, - "target":34962 - }, - { - "buffer":0, - "byteLength":64, - "byteOffset":25736, - "target":34962 - }, - { - "buffer":0, - "byteLength":24, - "byteOffset":25800, - "target":34963 - }, - { - "buffer":0, - "byteLength":48, - "byteOffset":25824, - "target":34962 - }, - { - "buffer":0, - "byteLength":48, - "byteOffset":25872, - "target":34962 - }, - { - "buffer":0, - "byteLength":32, - "byteOffset":25920, - "target":34962 + "byteLength":171, + "byteOffset":7656 } ], "samplers":[ @@ -839,8 +660,8 @@ ], "buffers":[ { - "byteLength":25952, - "uri":"maze-reed.bin" + "byteLength":7828, + "uri":"quiz.bin" } ] } diff --git a/src/components/InteractiveObjects/MazeQuizGame/MazeObject.js b/src/components/InteractiveObjects/MazeQuizGame/MazeObject.js index 275b4ad..0b78cf6 100644 --- a/src/components/InteractiveObjects/MazeQuizGame/MazeObject.js +++ b/src/components/InteractiveObjects/MazeQuizGame/MazeObject.js @@ -157,7 +157,7 @@ class MazeObject { }; this.load = async function(){ - let mazeAsset = await engine.load('/static/meshes/maze-reed.gltf'); + let mazeAsset = await engine.load('/static/meshes/quiz.gltf'); ['tunnel', 'wall', 'door', 'floor'].forEach(e => { o[e] = mazeAsset.scene.getObjectByName(e); //o[e].frustumCulled = false; diff --git a/src/components/InteractiveObjects/TextObject.js b/src/components/InteractiveObjects/TextObject.js index b519547..827a3fb 100644 --- a/src/components/InteractiveObjects/TextObject.js +++ b/src/components/InteractiveObjects/TextObject.js @@ -1,4 +1,4 @@ -import { MeshStandardMaterial, Color, Vector3 } from "three"; +import { MeshStandardMaterial, Color, Vector3, DoubleSide } from "three"; import { Text } from "troika-three-text"; import { assignParams } from "@/lib/MeshUtils"; @@ -24,6 +24,7 @@ class TextObject { let m = new MeshStandardMaterial({ roughness: .73, metalness: .37, + side: DoubleSide }); txt.material = m; txt.sync(); diff --git a/src/lib/CharacterControls.js b/src/lib/CharacterControls.js index dfcb18b..def9183 100644 --- a/src/lib/CharacterControls.js +++ b/src/lib/CharacterControls.js @@ -44,6 +44,7 @@ export class CharacterControls { this.direction = this.model.rotation.y; this.directionVelocity = 0; + this.actionStart = 0; //this.toggleRun = true } @@ -55,34 +56,51 @@ export class CharacterControls { const directionPressed = pointerControls.moving() let input = this.getInput(pointerControls) - var play = ''; + let play = this.currentAction || 'idle', velocity = this.walkVelocity; + this.fadeDuration = 0.2; if (input[1] && this.toggleRun) { - play = 'run' - } else if (input[1]) { + play = 'run'; + velocity = this.runVelocity + } else if (input[1] > 0) { play = 'walk' + } else if (input[1] < 0) { + play = 'backward' + velocity = this.walkVelocity / 3 } else if (input[0] < 0) { play = 'right' } else if (input[0] > 0) { play = 'left' - }else { + } else if (!this.currentAction.startsWith('idle')){ play = 'idle' } + if (this.currentAction.startsWith('idle') && play.startsWith('idle') && this.actionStart > 10){ + let idx = 1 + parseInt(this.currentAction.split('.')[1] || 0); + if (this.animationsMap[`idle.${idx}`]) { + play = `idle.${idx}` + }else{ + play = 'idle' + } + this.fadeDuration = 1; + } + if (this.currentAction != play) { const toPlay = this.animationsMap[play] const current = this.animationsMap[this.currentAction] current.fadeOut(this.fadeDuration) + toPlay.timeScale = 0.77; toPlay.reset().fadeIn(this.fadeDuration).play(); this.currentAction = play + this.actionStart = 0; } - this.mixer.update(delta*0.5) + this.mixer.update(delta) + this.actionStart += delta; this.walkDirection.x = this.walkDirection.y = this.walkDirection.z = 0 - let velocity = 0 if (directionPressed) { this.directionVelocity = this.directionVelocity * 2.5 * Math.abs(input[0]) this.direction += input[0] * delta * 2.5 //this.directionVelocity; @@ -100,7 +118,6 @@ export class CharacterControls { //this.camera.updateProjectionMatrix(); // run/walk velocity - velocity = this.currentAction == 'run' ? this.runVelocity : this.walkVelocity } this.walkDirection.x = this.walkDirection.x * velocity * delta// + this.model.position.x