My current method of rotating the cube rotates it immediately. I would like to display a rotating motion so the user can see the rotation of the cube, as opposed to the sides of the cube immediately changing color when I hit key 'a', 'w', 'd', or 's'(since the rotation is immediate).
How do I make the cube rotate slowly?
The below code is currently how I am rotating the cube:
boxWidth = 1;
boxHeight = 1;
boxDepth = 1;
const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
const materials = [
new THREE.MeshBasicMaterial({color: 0x0000ff}),
new THREE.MeshBasicMaterial({color: 0xffffff}),
new THREE.MeshBasicMaterial({color: 0xffff00}),
new THREE.MeshBasicMaterial({color: 0x008000}),
new THREE.MeshBasicMaterial({color: 0xffa500}),
new THREE.MeshBasicMaterial({color: 0xff0000}),
]
const cube = new THREE.Mesh(geometry, materials);
function onDocumentKeyDown(event) {
console.log(event);
if (event.keyCode == 87) { // w button
cube.rotateX(Math.PI / 2);
} else if (event.keyCode == 83) { // s button
cube.rotateX(-Math.PI / 2);
} else if (event.keyCode == 65) { // a button
cube.rotateY(-Math.PI / 2);
} else if (event.keyCode == 68) { // d button
cube.rotateY(Math.PI / 2);
}
};
document.addEventListener("keydown", onDocumentKeyDown, false);
One approach to animate an orientation to another one is Quaternion.rotateTowards().
What you need to use this method is a source and a target orientation as well as the angular step which describes how fast your cube turns around. The below link shows the method's usage in small example. The relevant code section is in the animate() function and looks like so:
const delta = clock.getDelta();
if ( ! mesh.quaternion.equals( targetQuaternion ) ) {
const step = speed * delta;
mesh.quaternion.rotateTowards( targetQuaternion, step );
}
This code essentially means: As long as the mesh's orientation is not equal to the target orientation, perform a gradual transition from the current to the target orientation.
https://threejs.org/examples/webgl_math_orientation_transform