Three.js如何使用四元数旋转相机 [英] Three.js How to use quaternion to rotate camera

问题描述

在Three.js中，我想使用THREE.quaternion使摄影机对象旋转到所选对象.

In Three.js, I would like to use THREE.quaternion to make the camera object rotate to the selected object.

我确实在网上搜索，但没有找到有关如何使用此四元数类的示例/演示或文档.

I did search the web but found no example/demo or document about how to use this quaternion class.

我用下面的代码试试运气:

I try my luck with following code:

    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;
    }

但是它不起作用.我错过了什么?请帮忙.预先感谢.

But it doesn't work. Did I miss something? Please help. Thanks in advance.

推荐答案

Slerp非常简单.它包含4个参数:

Slerp is quite easy. It takes 4 parameters:

• targetRotation 实际摄像机旋转
• destinationRotation 对象旋转
• destinationRotation 新四元数将是新的摄像机旋转
• percentOfRotation 这个参数是操场，我现在在这里使用0.07，可能是0(0％)到1(100％)之间的值

• targetRotation the actual camera rotation
• destinationRotation the object rotation
• destinationRotation new quaternion which will be the new camera rotation
• percentOfRotation this parameter is playground, I'm using 0.07 here right now, could be value between 0 (0%) and 1 (100%)

这是我的轮换方法:

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

希望这会对您有所帮助.并且不要打扰，我还为以下完美的相机工作了几周.

Hopefully this will help you. And don't bother I also worked some weeks on the perfect camera following.

这篇关于Three.js如何使用四元数旋转相机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！