controllable player

package.json

@@ -5,7 +5,7 @@
     "private": "true",
     "scripts": {
         "build": "webpack",
-        "serve": "serve dist -p 8080",
+        "serve": "serve dist -p 8000",
         "watch": "npm-watch",
         "dev": "concurrently \"npm:serve\" \"npm:watch\""
     },

src/index.ts

@@ -1,37 +1,56 @@
 import * as THREE from 'three';
 import "./index.scss";
+import { PlayerControl } from './player';
 
-let camera: THREE.PerspectiveCamera, scene: THREE.Scene, renderer: THREE.WebGLRenderer;
-let geometry: THREE.BoxGeometry, material: THREE.MeshNormalMaterial, mesh: THREE.Mesh<THREE.BoxGeometry, THREE.MeshNormalMaterial>
-;
+let camera: THREE.PerspectiveCamera,
+	scene: THREE.Scene,
+	renderer: THREE.WebGLRenderer;
+
+let time = 0;
+var newPosition = new THREE.Vector3();
+var matrix = new THREE.Matrix4();
+
+let plane: THREE.Mesh<THREE.PlaneGeometry, THREE.MeshBasicMaterial>;
+
+let p: PlayerControl;
 
 init();
 
 function init() {
 
-	camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
-	camera.position.z = 1;
+    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
+    camera.position.set( 0, 2, - 2 );
+    
+    scene = new THREE.Scene();
+    camera.lookAt( scene.position );
 
-	scene = new THREE.Scene();
+	p = new PlayerControl(camera);
+    scene.add( p.mesh );
 
-	geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
-	material = new THREE.MeshNormalMaterial();
+    var gridHelper = new THREE.GridHelper( 4, 10 );
+    scene.add( gridHelper );
+    
+    scene.add( new THREE.AxesHelper() );
 
-	mesh = new THREE.Mesh( geometry, material );
-	scene.add( mesh );
-
-	renderer = new THREE.WebGLRenderer( { antialias: true } );
-	renderer.setSize( window.innerWidth, window.innerHeight );
-	renderer.setAnimationLoop( animation );
-	document.body.appendChild( renderer.domElement );
+    renderer = new THREE.WebGLRenderer( { antialias: true } );
+    renderer.setSize( window.innerWidth, window.innerHeight );
+    document.body.appendChild( renderer.domElement );
 
+	animation();
 }
 
-function animation( time: number ) {
+function animation() {
+	requestAnimationFrame(animation);
+	p.eachFrame();
+    renderer.render( scene, camera );
+}
 
-	mesh.rotation.x = time / 2000;
-	mesh.rotation.y = time / 1000;
+window.addEventListener( 'resize', onWindowResize, false );
 
-	renderer.render( scene, camera );
+function onWindowResize() {
 
-}
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+
+    renderer.setSize( window.innerWidth, window.innerHeight );
+}

src/player.ts

@@ -0,0 +1,115 @@
+import * as THREE from "three";
+import { Vector2, Vector3 } from "three";
+import { debug } from "webpack";
+
+export class Player {
+
+    geometry: THREE.BufferGeometry;
+    material: THREE.Material;
+    mesh: THREE.Mesh;
+
+    constructor() {
+        this.geometry = new THREE.BoxBufferGeometry(0.2, 0.2, 0.2);
+        this.material = new THREE.MeshNormalMaterial();
+        this.mesh = new THREE.Mesh(this.geometry, this.material);
+    }
+
+}
+
+const MOVESPEED = .1;
+
+const KEYACTIONS: { [keys: string]: Vector2 } = {
+    MoveForward: new Vector2(0, -1),
+    MoveBackward: new Vector2(0, 1),
+    MoveLeft: new Vector2(1, 0),
+    MoveRight: new Vector2(-1, 0)
+}
+
+const KEYS: { [keys: string]: Vector2 } = {
+    'arrowup': KEYACTIONS.MoveForward,
+    'arrowdown': KEYACTIONS.MoveBackward,
+    'arrowleft': KEYACTIONS.MoveLeft,
+    'arrowright': KEYACTIONS.MoveRight,
+    'w': KEYACTIONS.MoveForward,
+    's': KEYACTIONS.MoveBackward,
+    'a': KEYACTIONS.MoveLeft,
+    'd': KEYACTIONS.MoveRight
+}
+
+export class PlayerControl extends Player {
+
+    private KeysHolding: string[];
+
+    camera: THREE.Camera;
+
+    constructor(camera: THREE.Camera) {
+        super();
+        this.camera = camera;
+        this.mesh.add( camera );
+        this.KeysHolding = [];
+
+        document.body.addEventListener('keydown', e => this.onKeydown(e))
+        document.body.addEventListener('keyup', e => this.onKeyup(e))
+    }
+
+    private onKeydown(e: KeyboardEvent) {
+        let key = e.key.toLowerCase();
+        if (key in KEYS && this.KeysHolding.indexOf(key) < 0)
+            this.KeysHolding.push(key);
+    }
+
+    private onKeyup(e: KeyboardEvent) {
+        let key = e.key.toLowerCase();
+        if (key in KEYS && this.KeysHolding.indexOf(key) >= 0)
+            this.KeysHolding.splice(this.KeysHolding.indexOf(key), 1);
+    }
+
+    /**
+     * @returns [angle, magnitude]
+     */
+    private keydownToAngle(): number|null {
+        let holding = this.KeysHolding.filter(k => k in KEYS);
+        if (holding.length) {
+
+            let moveDirection = new Vector2();
+
+            for (let i = 0; i < holding.length; i++)
+                moveDirection.add(KEYS[holding[i]])
+
+            if (moveDirection.x === 0 && moveDirection.y === 0)
+                return null;
+
+            moveDirection.setX(Math.max(-1, Math.min(1, moveDirection.x)));
+            moveDirection.setY(Math.max(-1, Math.min(1, moveDirection.y)));
+            
+            moveDirection.rotateAround(new Vector2(), this.camera.rotation.y);
+
+            let angle = Math.atan2(moveDirection.y, moveDirection.x);
+
+            return angle;
+
+        }
+
+        return null;
+    }
+
+    private controllerToAngle() {
+        
+    }
+
+    public eachFrame() {
+        let moveAngle = this.keydownToAngle();
+
+        if (moveAngle !== null) {
+
+            let vec3Move = new Vector3(MOVESPEED, 0, 0);
+            vec3Move.applyAxisAngle(new Vector3(0, 1, 0), moveAngle);
+            //vec3Move.multiplyScalar(MOVESPEED);
+
+            this.mesh.position.add(vec3Move);
+
+        }
+
+    }
+
+}