Mi método actual de rotar el cubo lo rota inmediatamente. Me gustaría mostrar un movimiento giratorio para que el usuario pueda ver la rotación del cubo, en lugar de que los lados del cubo cambien de color inmediatamente cuando presiono la tecla 'a', 'w', 'd' o 's' (ya que la rotación es inmediata).
¿Cómo hago que el cubo gire lentamente?
El siguiente código es actualmente cómo estoy rotando el cubo:
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);Un enfoque para animar una orientación a otra es Quaternion.rotateTowards() .
Lo que necesita para usar este método es una fuente y una orientación de destino, así como el paso angular que describe qué tan rápido gira su cubo. El siguiente enlace muestra el uso del método en un pequeño ejemplo. La sección de código relevante está en la función animate() y se ve así:
const delta = clock.getDelta(); if ( ! mesh.quaternion.equals( targetQuaternion ) ) { const step = speed * delta; mesh.quaternion.rotateTowards( targetQuaternion, step ); }Este código esencialmente significa: Siempre que la orientación de la malla no sea igual a la orientación del objetivo, realice una transición gradual de la orientación actual a la del objetivo.
https://tresjs.org/ejemplos/webgl_math_orientation_transform