tutorial - javascript/threejs-ecuación para mover un objeto en un círculo alrededor de un eje y central(en el espacio 3D)

three js cube

Question

Estoy experimentando con tres JS, y tengo una cámara posicionada y mirando el punto de origen de una escena (0,0,0). Quiero mover esa cámara en un círculo alrededor del eje y a una distancia establecida (radio), mientras mantengo su foco en el origen, pero no estoy seguro de cómo configurar la ecuación. Actualmente, solo estoy rotando el objeto en sí, pero me gustaría rotar la cámara en su lugar. Aquí está mi código para mover la malla:

function checkRotation(){
    if (keyboard.pressed("left")){
        mesh.rotation.y += .05;
    }

    if (keyboard.pressed("right")){
        mesh.rotation.y -= .05;
    }
}

y aquí hay algún tipo de ejemplo de mover la cámara:

camera.position.x = ??? (alguna ecuación para mover su posición x) camera.position.z = ??? (alguna ecuación para mover su posición z) camera.lookAt (mesh.position);

Cualquier ayuda que pueda proporcionar sería grandiosa. ¡Gracias!

Answer 1

Es una respuesta tardía, pero otros pueden desear echar un vistazo a los OrbitControls que vienen con Three.js (en examples / js / controls). Puede configurarlo para que gire automáticamente. Se encargará de las matemáticas por ti.

var controls = new THREE.OrbitControls(camera);
controls.autoRotate = true;
controls.autoRotateSpeed = [whatever speed you want]

camera.lookAt(new THREE.Vector3(0,0,0));

Luego, en su solicitudAnimationFrame-llamada función de actualización ...

controls.update();

Si no desea que el usuario pueda controlar la posición de la cámara por sí mismo, estoy seguro de que puede encontrar una forma de desactivarlo, o simplemente extraer el código que necesita ...

Answer 2

Puede establecer la posición de la cámara manualmente a lo largo de las siguientes líneas:

// let theta be the amount you want to rotate by
var x = camera.position.x;
var z = camera.position.z;

camera.position.x = x * Math.cos(theta) + z * Math.sin(theta);
camera.position.z = z * Math.cos(theta) - x * Math.sin(theta);
camera.lookAt(mesh.position); // or camera.lookAt(0, 0, 0);

Consulte http://en.wikipedia.org/wiki/Rotation_matrix#In_three_dimensions para obtener el equivalente de la matriz para la rotación de los ejes x, yy z.

También podría adaptar TrackballControls para usar el teclado y no el mouse.

Comportamiento predeterminado de Trackball: http://mrdoob.github.com/three.js/examples/misc_camera_trackball.html

Nota: Todavía no he probado esto, estoy en el trabajo.