Added movement and rotation
This commit is contained in:
17
src/main.js
17
src/main.js
@@ -27,14 +27,13 @@ let mixer, clip, action, playerModel;
|
|||||||
loader.load( './src/objects/models/player.gltf', function ( gltf ) {
|
loader.load( './src/objects/models/player.gltf', function ( gltf ) {
|
||||||
playerModel = gltf;
|
playerModel = gltf;
|
||||||
gltf.scene.scale.set(0.2,0.2,0.2);
|
gltf.scene.scale.set(0.2,0.2,0.2);
|
||||||
gltf.scene.rotateOnWorldAxis(new THREE.Vector3(1,0,0), MathUtils.degToRad(90));
|
//gltf.scene.rotateOnWorldAxis(new THREE.Vector3(1,0,0), MathUtils.degToRad(-90));
|
||||||
alignGround(ground, gltf.scene);
|
alignGround(ground, gltf.scene);
|
||||||
scene.add( gltf.scene );
|
scene.add( gltf.scene );
|
||||||
|
|
||||||
mixer = new THREE.AnimationMixer( gltf.scene );
|
mixer = new THREE.AnimationMixer( gltf.scene );
|
||||||
clip = THREE.AnimationClip.findByName( gltf.animations, 'Walk' );
|
clip = THREE.AnimationClip.findByName( gltf.animations, 'Walk' );
|
||||||
action = mixer.clipAction( clip );
|
action = mixer.clipAction( clip );
|
||||||
action.play();
|
|
||||||
|
|
||||||
}, undefined, function ( error ) {
|
}, undefined, function ( error ) {
|
||||||
|
|
||||||
@@ -55,6 +54,7 @@ MOVEMENT
|
|||||||
|
|
||||||
const PLAYER_SPEED = 0.015;
|
const PLAYER_SPEED = 0.015;
|
||||||
const playerDirection = new THREE.Vector3(0, 0, 0);
|
const playerDirection = new THREE.Vector3(0, 0, 0);
|
||||||
|
const playerRotation = new THREE.Quaternion();
|
||||||
|
|
||||||
// Events to listen keyboard inputs
|
// Events to listen keyboard inputs
|
||||||
document.addEventListener('keydown', handleKeyDown);
|
document.addEventListener('keydown', handleKeyDown);
|
||||||
@@ -62,14 +62,15 @@ document.addEventListener('keyup', handleKeyUp);
|
|||||||
|
|
||||||
//Managing keys
|
//Managing keys
|
||||||
function handleKeyDown(event) {
|
function handleKeyDown(event) {
|
||||||
|
action.play();
|
||||||
switch (event.code) {
|
switch (event.code) {
|
||||||
case 'ArrowUp':
|
case 'ArrowUp':
|
||||||
case 'KeyW':
|
case 'KeyW':
|
||||||
playerDirection.y = -1; // Up
|
playerDirection.y = 1; // Up
|
||||||
break;
|
break;
|
||||||
case 'ArrowDown':
|
case 'ArrowDown':
|
||||||
case 'KeyS':
|
case 'KeyS':
|
||||||
playerDirection.y = 1; // Back
|
playerDirection.y = -1; // Back
|
||||||
break;
|
break;
|
||||||
case 'ArrowLeft':
|
case 'ArrowLeft':
|
||||||
case 'KeyA':
|
case 'KeyA':
|
||||||
@@ -83,6 +84,7 @@ function handleKeyDown(event) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function handleKeyUp(event) {
|
function handleKeyUp(event) {
|
||||||
|
action.stop();
|
||||||
switch (event.code) {
|
switch (event.code) {
|
||||||
case 'ArrowUp':
|
case 'ArrowUp':
|
||||||
case 'KeyW':
|
case 'KeyW':
|
||||||
@@ -103,6 +105,13 @@ function updatePlayerPosition() {
|
|||||||
const delta = playerDirection.clone().multiplyScalar(PLAYER_SPEED);
|
const delta = playerDirection.clone().multiplyScalar(PLAYER_SPEED);
|
||||||
playerModel.scene.position.add(delta);
|
playerModel.scene.position.add(delta);
|
||||||
camera.position.add(delta);
|
camera.position.add(delta);
|
||||||
|
|
||||||
|
const angle = Math.atan2(playerDirection.x, -playerDirection.y);
|
||||||
|
const targetRotation = new THREE.Quaternion();
|
||||||
|
targetRotation.setFromAxisAngle(new THREE.Vector3(0, 1, 0), angle);
|
||||||
|
playerRotation.slerp(targetRotation, 0.1);
|
||||||
|
playerModel.scene.setRotationFromQuaternion(playerRotation);
|
||||||
|
playerModel.scene.rotateOnWorldAxis(new THREE.Vector3(1,0,0), MathUtils.degToRad(90));
|
||||||
}
|
}
|
||||||
|
|
||||||
function animate() {
|
function animate() {
|
||||||
|
|||||||
Reference in New Issue
Block a user