0
186
Views¿Cómo me muevo de un lado a otro entre los cuaterniones para el objeto de la cámara en three.js?
No entiendo por qué mi cámara no retrocede. Cuando actualizo la página, duerme una vez. Luego, después de eso, no hace nada si muevo la rueda del mouse. Espero que retroceda lentamente hacia adelante (mientras me desplazo hacia arriba y hacia abajo) entre los x cuaterniones.
export default class Experience { constructor(options = {}) { //... this.camera = new Camera(); this.renderer = new Renderer(this.canvas); this.scrollTargetPosition = new THREE.Quaternion(); this.scrollTargetPosition.setFromAxisAngle(new THREE.Vector3(0, 0, 1),0); this.onMouseScroll(); this.animate(); } onMouseScroll() { window.addEventListener("wheel", (event) => { if (event.wheelDelta > 0) { this.scrollTargetPosition.x = 0; } else { this.scrollTargetPosition.x = Math.PI / 2; } console.log("Target: " + this.scrollTargetPosition.x); //Pictures below console.log("Camera: " + this.camera.quaternion.x); }); } animate() { this.camera.quaternion.slerp(this.scrollTargetPosition, 0.9); requestAnimationFrame(this.animate.bind(this)); this.renderer.render(this.scene, this.camera); } } Así es como se ve el archivo console.log si me desplazo hacia arriba varias veces: 
y si me desplazo hacia abajo:
1 answers
Answer question0
El problema principal es que estás tratando un cuaternión como si fueran ángulos de Euler , y son muy diferentes.
Quaternion.x no es la rotación del eje x en radianes. Los cuaterniones están formados por una combinación de 4 dimensiones de números reales e imaginarios , por lo que es mejor no tocar sus propiedades x, y, z, w . En su lugar, utilice los métodos de utilidad que realizan la tarea que necesita. El siguiente método establece la rotación del eje x en 0 o 90 grados:
onMouseScroll() { let xAxis = new THREE.Vector3(1, 0, 0); window.addEventListener("wheel", (event) => { if (event.wheelDelta > 0) { this.scrollTargetPosition.setFromAxisAngle(xAxis, 0); } else { this.scrollTargetPosition.setFromAxisAngle(xAxis, Math.PI / 2); } }); } Después de eso, debería poder realizar su interpolación esférica como se esperaba, sin embargo, le recomiendo que reemplace el 0.9 con un número más pequeño como 0.1 , de lo contrario, aparecerá en su lugar demasiado rápido:
this.camera.quaternion.slerp(this.scrollTargetPosition, 0.9);