From 595bc5c021cd23319adea3a6cb07dc47ba1baa38 Mon Sep 17 00:00:00 2001 From: ashley zomo Date: Tue, 14 Dec 2021 15:06:23 -0600 Subject: [PATCH] controllable player --- package.json | 2 +- src/index.ts | 59 +++++++++++++++++--------- src/player.ts | 115 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 155 insertions(+), 21 deletions(-) create mode 100644 src/player.ts diff --git a/package.json b/package.json index c3b8322..914963b 100644 --- a/package.json +++ b/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\"" }, diff --git a/src/index.ts b/src/index.ts index 2577f53..7365743 100644 --- a/src/index.ts +++ b/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 -; +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; + +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() { -} \ No newline at end of file + camera.aspect = window.innerWidth / window.innerHeight; + camera.updateProjectionMatrix(); + + renderer.setSize( window.innerWidth, window.innerHeight ); +} diff --git a/src/player.ts b/src/player.ts new file mode 100644 index 0000000..226325a --- /dev/null +++ b/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); + + } + + } + +} \ No newline at end of file