jusemon/threejs-test
1
0
Fork 0
Code Issues Pull requests Releases Packages 1 Activity Actions

Feature/Add movement interpolation #5

Merged
jusemon merged 1 commit from feature/add-movement-interpolation into main 2025-11-26 09:36:40 -05:00
Conversation 0 Commits 1 Files changed 1 +49 -8
1 changed files with 49 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 257cd017af - Show all commits

57
index.html
View file

@ -153,7 +153,10 @@
class Player extends GameObject { class Player extends GameObject {
constructor(scene, groundSize) { constructor(scene, groundSize) {
super(scene, groundSize); super(scene, groundSize);
this.speed = 0.15; this.maxSpeed = 0.15;
this.acceleration = 0.08;
this.deceleration = 0.12;
this.velocity = new THREE.Vector3(0, 0, 0);
} }
createMesh() { createMesh() {
@ -170,31 +173,69 @@
} }
initialize() { initialize() {
// Initialize velocity (needed because initialize is called from parent constructor)
if (!this.velocity) {
this.velocity = new THREE.Vector3(0, 0, 0);
}
this.reset(); this.reset();
} }
reset() { reset() {
this.setPosition(0, 0.5, 0); this.setPosition(0, 0.5, 0);
this.mesh.rotation.y = 0; this.mesh.rotation.y = 0;
if (this.velocity) {
this.velocity.set(0, 0, 0);
}
} }
update(keys) { update(keys) {
const moveVector = new THREE.Vector3(); // Calculate target velocity based on input
const targetVelocity = new THREE.Vector3(0, 0, 0);
if (keys['w'] || keys['arrowup']) moveVector.z -= this.speed; if (keys['w'] || keys['arrowup']) targetVelocity.z -= this.maxSpeed;
if (keys['s'] || keys['arrowdown']) moveVector.z += this.speed; if (keys['s'] || keys['arrowdown']) targetVelocity.z += this.maxSpeed;
if (keys['a'] || keys['arrowleft']) moveVector.x -= this.speed; if (keys['a'] || keys['arrowleft']) targetVelocity.x -= this.maxSpeed;
if (keys['d'] || keys['arrowright']) moveVector.x += this.speed; if (keys['d'] || keys['arrowright']) targetVelocity.x += this.maxSpeed;
this.mesh.position.add(moveVector); // Smoothly interpolate velocity towards target
const isMoving = targetVelocity.length() > 0;
const accelRate = isMoving ? this.acceleration : this.deceleration;
// Calculate velocity difference for each axis
const velDiffX = targetVelocity.x - this.velocity.x;
const velDiffZ = targetVelocity.z - this.velocity.z;
// Apply easing to each axis independently for smoother diagonal movement
if (Math.abs(velDiffX) > 0.001) {
this.velocity.x += velDiffX * accelRate;
} else {
this.velocity.x = targetVelocity.x;
}
if (Math.abs(velDiffZ) > 0.001) {
this.velocity.z += velDiffZ * accelRate;
} else {
this.velocity.z = targetVelocity.z;
}
// Apply velocity to position
this.mesh.position.add(this.velocity);
// Boundary checks // Boundary checks
const boundary = this.groundSize / 2 - 0.5; const boundary = this.groundSize / 2 - 0.5;
this.mesh.position.x = Math.max(-boundary, Math.min(boundary, this.mesh.position.x)); this.mesh.position.x = Math.max(-boundary, Math.min(boundary, this.mesh.position.x));
this.mesh.position.z = Math.max(-boundary, Math.min(boundary, this.mesh.position.z)); this.mesh.position.z = Math.max(-boundary, Math.min(boundary, this.mesh.position.z));
// Stop velocity if hitting boundary
if (Math.abs(this.mesh.position.x) >= boundary) {
this.velocity.x = 0;
}
if (Math.abs(this.mesh.position.z) >= boundary) {
this.velocity.z = 0;
}
// Rotate player based on movement // Rotate player based on movement
if (moveVector.length() > 0) { if (this.velocity.length() > 0.01) {
this.mesh.rotation.y += 0.1; this.mesh.rotation.y += 0.1;
} }
} }