Así que aquí está el código completo en jsFiddle:

http://jsfiddle.net/73v15kb6/1/

Rotar sobre Y y Z es como esperaría que fuera, lo mismo con todas las transiciones. Cuando trato de girar sobre el eje X, parece que THREE.js está haciendo algo especial para que se vea "más genial", pero eso no es lo que quiero lograr.

Al leer temas similares, estoy seguro de que tiene algo que ver con mi función rotateX:

camera.position.y = y * cos - z * sin;
camera.position.z = y * sin + z * cos;
camera.lookAt(scene.position);

Cuando inicio el mundo 3D configuro las coordenadas de la cámara con los siguientes valores, solo para mantener la vista deseada:

camera.position.x = -60;
camera.position.y = 30;
camera.position.z = 0;

¿Alguien tiene idea de lo que estoy haciendo mal? ¡Muchas gracias!

0
Pete Kozak 2 sep. 2014 a las 19:50

2 respuestas

La mejor respuesta

Soy nuevo en THREE.js, (de hecho, esta es la primera vez que trabajo con él), por lo que podría no explicarlo correctamente :(

La parte que THREE.js hizo para que pareciera "más genial" fue el método camera.lookAt.

camera.lookAt(sphere.position);

Aquí está la muestra (modificada) http://jsfiddle.net/73v15kb6/3/

Intente jugar con la función animada para cada eje e intente con la opción lookAt habilitada. Jugar con él durante algún tiempo te dará el concepto. :)

function animate() {
    requestAnimationFrame(animate);
    rotateX(5); // Try with Y & Z; (also with toggling lookAt())
}

La función lookAt puede hacer que las funciones de transformación parezcan extrañas ya que incluso si la cámara se transforma como se esperaba, el área de representación seguirá siendo la misma.

1
Sen Jacob 2 sep. 2014 a las 18:10

Gracias Sen Jacob por arreglar mi violín!

Encontré una solución, por lo que para que esto funcione como quería: esa cámara siempre mira el punto central (0,0,0) y todas las rotaciones de la palabra ocurren alrededor del eje, tuve que hacer lo siguiente para cada rotación :

Para rotZ y rotY

camera.up = new THREE.Vector3(0,1,0);
camera.lookAt(new THREE.Vector3(0,0,0));

Para rotX:

camera.up = new THREE.Vector3(1,0,0);
camera.lookAt(new THREE.Vector3(0,0,0));

Observe la diferencia en el vector ascendente entre X e Y&Z.

0
Pete Kozak 3 sep. 2014 a las 10:15