camera idle behavior

src/components/InteractiveObjects/MazeQuizGame/MazeQuizGame.js

@@ -28,10 +28,11 @@ class MazeQuizGame {
         return this.object;
     }
 
-    generate(questions, idx = 0, len){
+    generate(questions, qid = 0, len){
-        let cq = questions[idx]
+        let question = questions[qid]
-        if (!cq) return {
+        if (!question) return {
             len:3,
+            finish: true,
             objects:[
                 {
                     type: 'gltf',
@@ -51,15 +52,15 @@ class MazeQuizGame {
         let directions = Utils.shuffleArray( ['l', 'r', 'f'] )
 
         let mo = {
-            len,
+            len, question, qid,
             objects:[
                 {
-                    type: 'text', text: cq.q, fontSize:0.033, width:0.5, position:[0,.33,len + .96], rotation:[0,Math.PI, 0]
+                    type: 'text', text: question.q, fontSize:0.033, width:0.5, position:[0,.33,len + .96], rotation:[0,Math.PI, 0]
                 }
             ]
         }
         
-        cq.a.forEach((a, i)=>{
+        question.a.forEach((a, i)=>{
             let d = directions[i];
             mo.objects.push(
                 defaults.arrows[d](len),
@@ -74,7 +75,7 @@ class MazeQuizGame {
             if (i == 0){
                 mo[d] = {
                     len: 3,
-                    [dd]: this.generate(questions, idx + 1, 3)
+                    [dd]: this.generate(questions, qid + 1, 3)
                 }
             }else{
                 mo[d] = {
@@ -83,7 +84,7 @@ class MazeQuizGame {
                         len: 2,
                         objects:[
                             {
-                                type: 'text', width:0.5, color:0xff0000, text: cq.h, fontSize:0.033, position:[0,.44,2+.96], rotation:[0,Math.PI, 0]
+                                type: 'text', width:0.5, color:0xff0000, text: question.h, fontSize:0.033, position:[0,.44,2+.96], rotation:[0,Math.PI, 0]
                             }
                         ]
                     }

src/lib/CharacterControls.js

@@ -45,6 +45,8 @@ export class CharacterControls {
         this.direction = this.model.rotation.y;
         this.directionVelocity = 0;
         this.actionStart = 0;
+        this.cameraDelta = 0;
+        this.cameraIdleDelta = 0;
         //this.toggleRun = true
     }
 
@@ -53,7 +55,7 @@ export class CharacterControls {
     }
 
     update(world, delta, pointerControls) {
-        const directionPressed = pointerControls.moving()
+        const directionPressed = pointerControls.moving
         let input = this.getInput(pointerControls)
 
         let play = this.currentAction || 'idle', velocity = this.walkVelocity;
@@ -84,12 +86,18 @@ export class CharacterControls {
             this.fadeDuration = 1;
         }
 
+        if (this.currentAction.startsWith('idle') && play != 'idle'){
+            this.cameraIdleDelta += delta * 0.33;
+        }else {
+            this.cameraIdleDelta = 0;
+        }
+
         if (this.currentAction != play) {
             const toPlay = this.animationsMap[play]
             const current = this.animationsMap[this.currentAction]
 
             current.fadeOut(this.fadeDuration)
-            toPlay.timeScale = 0.77;
+            toPlay.timeScale = 0.5;
             toPlay.reset().fadeIn(this.fadeDuration).play();
 
             this.currentAction = play
@@ -99,6 +107,8 @@ export class CharacterControls {
         this.mixer.update(delta)
         this.actionStart += delta;
 
+        this.cameraDelta += delta * ( pointerControls.cameraLeft * -1 +  pointerControls.cameraRight * 1)
+
         this.walkDirection.x = this.walkDirection.y = this.walkDirection.z = 0
 
         if (directionPressed) {
@@ -142,9 +152,9 @@ export class CharacterControls {
 
         let cameraPosition = new THREE.Vector3().copy(this.camera.position)
         let cameraDesiredPosition = new THREE.Vector3(
-            this.model.position.x + 5* Math.sin(this.model.rotation.y + Math.PI),
+            this.model.position.x + 5* Math.sin(this.model.rotation.y + Math.PI + this.cameraDelta + this.cameraIdleDelta),
             3,
-            this.model.position.z + 5* Math.cos(this.model.rotation.y + Math.PI)
+            this.model.position.z + 5* Math.cos(this.model.rotation.y + Math.PI + this.cameraDelta + this.cameraIdleDelta)
         )
 
         cameraPosition.lerp(cameraDesiredPosition, delta*2)

src/lib/PointerControls.js

@@ -7,16 +7,7 @@ import { PointerLockControls } from 'three/examples/jsm/Addons.js';
 
 class PointerControls {
     constructor(camera, hero, domElement) {
-        this.moveForward = false;
+        this.kb = {};
-        this.moveBackward = false;
-        this.moveLeft = false;
-        this.moveRight = false;
-
-        this.moveUp = false;
-        this.moveDown = false;
-
-        this.rotateLeft = false;
-        this.rotateRight = false;
 
         this.canJump = false;
         this.velocity = new Vector3();
@@ -33,37 +24,8 @@ class PointerControls {
         this.controls = new PointerLockControls(camera, domElement);
 
         const onKeyDown = (event) => {
+            this.kb[event.code] = true;
             switch (event.code) {
-                case 'ArrowUp':
-                case 'KeyW':
-                    this.moveForward = true;
-                    break;
-                case 'ArrowLeft':
-                case 'KeyA':
-                    this.moveLeft = true;
-                    this.rotateLeft = true;
-                    break;
-                case 'ArrowDown':
-                case 'KeyS':
-                    this.moveBackward = true;
-                    break;
-                case 'ArrowRight':
-                case 'KeyD':
-                    this.moveRight = true;
-                    this.rotateRight = true;
-                    break;
-                case 'KeyQ':
-                    this.rotateLeft = true;
-                    break;
-                case 'KeyE':
-                    this.rotateRight = true;
-                    break;
-                case 'KeyR':
-                    this.moveUp = true;
-                    break;
-                case 'KeyF':
-                    this.moveDown = true;
-                    break;
                 case 'Space':
                     if (this.canJump === true) this.velocity.y += 350;
                     this.canJump = false;
@@ -72,38 +34,7 @@ class PointerControls {
         };
 
         const onKeyUp = (event) => {
-            switch (event.code) {
+            this.kb[event.code] = false;
-                case 'ArrowUp':
-                case 'KeyW':
-                    this.moveForward = false;
-                    break;
-                case 'ArrowLeft':
-                case 'KeyA':
-                    this.moveLeft = false;
-                    this.rotateLeft = false;
-                    break;
-                case 'ArrowDown':
-                case 'KeyS':
-                    this.moveBackward = false;
-                    break;
-                case 'ArrowRight':
-                case 'KeyD':
-                    this.moveRight = false;
-                    this.rotateRight = false;
-                    break;
-                case 'KeyQ':
-                    this.rotateLeft = false;
-                    break;
-                case 'KeyE':
-                    this.rotateRight = false;
-                    break;
-                case 'KeyR':
-                    this.moveUp = false;
-                    break;
-                case 'KeyF':
-                    this.moveDown = false;
-                    break;
-            }
         };
 
         document.addEventListener('keydown', onKeyDown);
@@ -167,7 +98,47 @@ class PointerControls {
 
     }
 
-    moving(){
+    get moveForward(){
+        return this.kb['ArrowUp'] || this.kb['KeyW'] || false
+    }
+
+    get moveLeft(){
+        return this.kb['ArrowLeft'] || this.kb['KeyA'] || false
+    }
+
+    get rotateLeft(){
+        return this.moveLeft;
+    }
+
+    get moveRight(){
+        return this.kb['ArrowRight'] || this.kb['KeyD'] || false
+    }
+
+    get rotateRight(){
+        return this.moveRight;
+    }
+
+    get moveBackward(){
+        return this.kb['ArrowDown'] || this.kb['KeyS'] || false
+    }
+
+    get moveUp(){
+        return this.kb['KeyR'] || false
+    }
+
+    get moveDown(){
+        return this.kb['KeyF'] || false
+    }
+
+    get cameraLeft(){
+        return this.kb['KeyQ'] || false
+    }
+
+    get cameraRight(){
+        return this.kb['KeyE'] || false
+    }
+
+    get moving(){
         return this.moveForward || this.moveBackward || this.moveLeft || this.moveRight;
     }
 }