As a novice in the world of THREE.js, I am currently working on an animation that spins a 3D model around its Y axis. However, for my website project, I need to smoothly rotate it back to its original position within a span of 90 frames. Despite trying different code snippets, I have encountered issues where it only works half the time and messes up the other half, especially after letting it spin for a while.
Below is the current code snippet I am using for the rotation:
//Angle calculation
angle = ((room.rotation.y * 180) / Math.PI) % 360;
total_deg = room.rotation.y;
//Lap calculation:
if(angle > 0) {
positiv = true;
} else {
positiv = false;
}
if(angle < last_angle) {
direction = "down";
} else {
direction = "up";
}
if(direction == "up" && positiv == true) {
lap = 1;
} else if(direction == "down" && positiv == true) {
lap = 2;
} else if(direction == "down" && positiv == false) {
lap = 3;
} else if(direction == "up" && positiv == false) {
lap = 4;
}
if(last_lap == 4 && lap == 1) {
room.rotation.y = 0;
}
last_angle = ((room.rotation.y * 180) / Math.PI) % 360;
//Reverse rotation based on the current lap
if(lap == 4) {
room.rotation.y += -total_deg / 90;
}
if(lap == 3) {
room.rotation.y += -(Math.PI - Math.abs(total_deg)) / 90;
}
if(lap == 2) {
room.rotation.y += (Math.PI - Math.abs(total_deg)) / 90;
} else {
room.rotation.y -= total_deg / 90;
}
//Reset the rotation when the room completes a lap - this fixes some rotation issues although I'm not sure why
if(last_lap == 4 && lap == 1) {
room.rotation.y = 0;
}
I've been struggling with this problem for days now, so any assistance would be greatly appreciated.