character selector

src/lib/CharacterControls.js

@@ -8,7 +8,7 @@ export class CharacterControls {
     rotateAngle = new THREE.Vector3(0, 1, 0)
     rotateQuarternion = new THREE.Quaternion()
     cameraTarget = new THREE.Vector3()
-    storedFall = 0
+    cameraY = 3
     
     // constants
     fadeDuration = 0.2
@@ -101,11 +101,16 @@ export class CharacterControls {
         }
 
         this.actionStart += delta;
-
         this.cameraDelta += delta * ( pointerControls.cameraLeft * -1 +  pointerControls.cameraRight * 1)
-
         this.walkDirection.x = this.walkDirection.y = this.walkDirection.z = 0
 
+        if (pointerControls.kb.KeyR && this.cameraY < 5){
+            this.cameraY+=delta;
+        }
+        if (pointerControls.kb.KeyF && this.cameraY > 1){
+            this.cameraY-=delta;
+        }
+
         if (pointerControls.motion) {
             this.directionVelocity = this.directionVelocity * 2.5 * Math.abs(input[0])
             this.direction += input[0] * delta * 2.5 //this.directionVelocity;
@@ -145,13 +150,13 @@ 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.cameraDelta + this.cameraIdleDelta),
-            3,
+            this.cameraY,
             this.model.position.z + 5* Math.cos(this.model.rotation.y + Math.PI + this.cameraDelta + this.cameraIdleDelta)
         )
 
         cameraPosition.lerp(cameraDesiredPosition, delta*2)
         this.camera.position.copy(cameraPosition)
-        this.orbitControl.target.set(this.model.position.x, 2, this.model.position.z)
+        this.orbitControl.target.set(this.model.position.x, this.cameraY - 1, this.model.position.z)
         this.camera.lookAt(this.orbitControl.target)
     }
 

src/lib/Dashboard.js

@@ -35,7 +35,7 @@ class DashBoard {
 
 		const dash = new Group(), hud = new Group(), hudTarget = new Group();
 		hud.visible = false;
-		let hudAnimation, hudPlane;
+		let hudAnimation, hudPlane, textPlane;
 		this.group = dash;
 		dash.add(hud);
 		hud.add(hudTarget)
@@ -62,6 +62,19 @@ class DashBoard {
 			hudPlane.position.z = -0.22;
 			hudPlane.position.y = -0.05
 			hud.add(hudPlane)
+
+			textPlane = new Mesh(
+				new PlaneGeometry(engine.aspect, 0.17), 
+				new MeshBasicMaterial({
+					map: await engine.loadTexture('/static/textures/hud.png', ''),
+					opacity: 0.52,
+					transparent:true
+				})
+			);
+			textPlane.position.z = -0.25;
+			textPlane.position.y = -0.46
+			textPlane.visible = false;
+			dash.add(textPlane)
 		})()
 
 		const text = new Text()
@@ -69,7 +82,7 @@ class DashBoard {
 			text:``, 
 			fontSize: 0.033, lineHeight: 1.1, maxWidth: engine.aspect * 0.8,
 			textAlign: 'center', font: '/static/fonts/Montserrat-Regular.ttf',
-			anchorX: 'center', anchorY: 0.05, depthOffset: 0.1, color: 0x000000,
+			anchorX: 'center', anchorY: 0.03, depthOffset: 0.1, color: 0x000000,
 			clipRect: [-engine.aspect * 0.4, -0.12, engine.aspect * 0.4, 0]
 		})
 		text.sync();
@@ -83,9 +96,10 @@ class DashBoard {
 		})
 
 		this.updateText = function(t, textScrolledCallback){
+			textPlane.visible = !!t;
 			engine.motionQueue.clear(text);
 			text.text = t;
-			text.anchorY = 0.05;
+			text.anchorY = 0.03;
 			text.sync(()=>{
 				let dh = text.clipRect[1] - text.textRenderInfo.blockBounds[1];
 				if (dh > 0){
@@ -98,7 +112,7 @@ class DashBoard {
 					}
 					engine.motionQueue.add({
 						o: text,
-						a: { anchorY: text.textRenderInfo.blockBounds[1] + 0.05 },
+						a: { anchorY: text.textRenderInfo.blockBounds[1] + 0.03 },
 						t: dh*177,
 						u: updateFn
 					})