idle mode

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,
+				5
-				6
 			]
 		}
 	],
 	"nodes":[
 		{
 			"mesh":0,
-			"name":"floor",
+			"name":"floor"
-			"rotation":[
-				0,
-				0.08009588718414307,
-				0,
-				0.9967872500419617
-			],
-			"translation":[
-				0.03920316323637962,
-				0.16448557376861572,
-				-0.05337028205394745
-			]
 		},
 		{
 			"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,
+					"extensions":{
-					"material":3
+						"KHR_draco_mesh_compression":{
-				}
+							"bufferView":4,
-			]
-		},
-		{
-			"name":"Curve.005",
-			"primitives":[
-				{
 							"attributes":{
-						"POSITION":19,
+								"POSITION":0,
-						"NORMAL":20,
+								"NORMAL":1,
-						"TEXCOORD_0":21
+								"TEXCOORD_0":2
+							}
+						}
 					},
-					"indices":22,
+					"indices":18,
-					"material":4
+					"material":3,
+					"mode":4
 				}
 			]
 		},
@@ -229,35 +254,68 @@
 			"primitives":[
 				{
 					"attributes":{
-						"POSITION":23,
+						"POSITION":19,
-						"NORMAL":24,
+						"NORMAL":20,
-						"TEXCOORD_0":25
+						"TEXCOORD_0":21
 					},
-					"indices":26,
+					"extensions":{
-					"material":1
+						"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,
+					"extensions":{
-					"material":4
+						"KHR_draco_mesh_compression":{
-				},
+							"bufferView":7,
-				{
 							"attributes":{
-						"POSITION":31,
+								"POSITION":0,
-						"NORMAL":32,
+								"NORMAL":1,
-						"TEXCOORD_0":33
+								"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",
+			"name":"T_Grass_Base_D-T_Grass_Base_D.png",
-			"uri":"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",
+			"name":"T_Grass_Reeds_D-T_Grass_Reeds_D.png",
-			"uri":"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",
+			"name":"Image",
-			"uri":"reed-nm.png"
+			"uri":"Image.png"
-		},
-		{
-			"mimeType":"image/png",
-			"name":"b1",
-			"uri":"b1.png"
 		}
 	],
 	"accessors":[
 		{
-			"bufferView":0,
 			"componentType":5126,
 			"count":272,
 			"max":[
-				0.5986211895942688,
+				0.793377161026001,
-				0.34277740120887756,
+				0.48276516795158386,
-				0.6759099364280701
+				0.7508191466331482
 			],
 			"min":[
-				-0.617611289024353,
+				-0.7325652241706848,
-				-0.07126913964748383,
+				0.06871864199638367,
-				-0.5153314471244812
+				-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,
+			"byteLength":2376,
-			"byteOffset":0,
+			"byteOffset":0
-			"target":34962
 		},
 		{
 			"buffer":0,
-			"byteLength":3264,
+			"byteLength":3883,
-			"byteOffset":3264,
+			"byteOffset":2376
-			"target":34962
 		},
 		{
 			"buffer":0,
-			"byteLength":2176,
+			"byteLength":166,
-			"byteOffset":6528,
+			"byteOffset":6260
-			"target":34962
 		},
 		{
 			"buffer":0,
-			"byteLength":576,
+			"byteLength":166,
-			"byteOffset":8704,
+			"byteOffset":6428
-			"target":34963
 		},
 		{
 			"buffer":0,
-			"byteLength":4416,
+			"byteLength":278,
-			"byteOffset":9280,
+			"byteOffset":6596
-			"target":34962
 		},
 		{
 			"buffer":0,
-			"byteLength":4416,
+			"byteLength":561,
-			"byteOffset":13696,
+			"byteOffset":6876
-			"target":34962
 		},
 		{
 			"buffer":0,
-			"byteLength":2944,
+			"byteLength":213,
-			"byteOffset":18112,
+			"byteOffset":7440
-			"target":34962
 		},
 		{
 			"buffer":0,
-			"byteLength":1980,
+			"byteLength":171,
-			"byteOffset":21056,
+			"byteOffset":7656
-			"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
 		}
 	],
 	"samplers":[
@@ -839,8 +660,8 @@
 	],
 	"buffers":[
 		{
-			"byteLength":25952,
+			"byteLength":7828,
-			"uri":"maze-reed.bin"
+			"uri":"quiz.bin"
 		}
 	]
 }

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;

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

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'
+            play = 'run';
-        } else if (input[1]) {
+            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 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