Currently, when I rotate the cube using key 'a', 'w', 'd', or 's', the rotation is instant. However, I would like to create a smoother rotating motion so that the user can see the cube twisting gradually, instead of the sides changing color abruptly.
Is there a way to make the cube rotate slowly?
The following code demonstrates how I am currently implementing the rotation of 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);