camera idle behavior

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.moveBackward = false;
-        this.moveLeft = false;
-        this.moveRight = false;
-
-        this.moveUp = false;
-        this.moveDown = false;
-
-        this.rotateLeft = false;
-        this.rotateRight = false;
+        this.kb = {};
 
         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) {
-                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;
-            }
+            this.kb[event.code] = false;
         };
 
         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;
     }
 }