javascript - raycaster - three js rotation

Three.js Cómo usar quaternion para girar la cámara

Question

En Three.js, me gustaría utilizar THREE.quaternion para hacer que el objeto de la cámara gire hacia el objeto seleccionado.

Busqué en la web pero no encontré ningún ejemplo / demo o documento sobre cómo usar esta clase de cuaternión.

Intento mi suerte con el siguiente código:

    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.y = 10;
    camera.position.z = 0;
    camera.position.x = radious;
    camera.useQuaternion = true;

   // I did use the TrackballTrackballControls. Maybe it causes the problem so I put it here
    controls = new THREE.TrackballControls( camera, document.getElementById(_canvasElement) );

    // function to make the camera rotate to the object
    function focusOn3DObject(obj){  
        obj.useQuaternion = true;
        obj.quaternion = new THREE.Quaternion(obj.position.x, obj.position.y, obj.position.z, 1);

        var newQuaternion = new THREE.Quaternion();
        THREE.Quaternion.slerp(camera.quaternion, obj.quaternion, newQuaternion, 0.07);
        camera.quaternion = newQuaternion;
    }

Pero no funciona. ¿Me he perdido algo? Por favor ayuda. Gracias por adelantado.

Answer 1

Slerp es bastante fácil. Toma 4 parámetros:

• targetRotation la rotación real de la cámara
• destinationRotation la rotación del objeto
• destinationRotation new quaternion que será la nueva rotación de la cámara
• percentOfRotation este parámetro es el patio de recreo, estoy usando 0.07 aquí en este momento, podría ser un valor entre 0 (0%) y 1 (100%)

Este es mi método de rotación:

var qm = new THREE.Quaternion();
THREE.Quaternion.slerp(camera.quaternion, destRotation, qm, 0.07);
camera.quaternion = qm;
camera.quaternion.normalize();

Espero que esto te ayude. Y no te preocupes, también trabajé algunas semanas en la siguiente cámara perfecta.

Answer 2

Creo que esta línea no funcionará:

obj.quaternion = new THREE.Quaternion(obj.position.x, obj.position.y, obj.position.z, 1);

Necesitas configurar

obj.useQuaternion = true

Después de agregar un objeto a la escena, cuando lo gire, se aplicará automáticamente a obj.quaternion .

El segundo punto es que debes aplicar el objeto a tus controles y no a la cámara. ¿Porque quieres controlar el objeto y no la cámara?