threejs：平滑地将相机旋转到一个物体上答案

【问题标题】：threejs: smoothly rotate camera towards an objectthreejs：平滑地将相机旋转到一个物体上
【发布时间】：2015-12-19 19:59:26
【问题描述】：

我刚刚开始研究three.js，我在编写一个函数时遇到了一些麻烦，该函数将对象位置（Vector3）和时间（以毫秒为单位）作为参数，并在那个时间逐渐旋转相机以面对它。基本上是内置 lookAt 方法的 lerp 版本。

首先我尝试使用 tweenjs 来获得平滑的旋转过渡。对于开始和结束参数，我创建了一个虚拟对象并将其位置、旋转和四元数设置为与相机相同，然后我使用其上的 lookAt 函数面向对象并将其四元数存储在新变量“targetQuaternion”。然后我使用这个变量作为 TWEEN.Tween 方法中的目标参数来更新 camera.quaternion。我以前试过用四元数来避免gymbal lock，然后用旋转，但没有一个能正常工作。

function rotateCameraToObject(object3D, time) {

var cameraPosition = camera.position.clone();               // camera original position
var cameraRotation = camera.rotation.clone();               // camera original rotation
var cameraQuaternion = camera.quaternion.clone();           // camera original quaternion

var dummyObject = new THREE.Object3D();                     // dummy object


// set dummyObject's position, rotation and quaternion the same as the camera
dummyObject.position.set(cameraPosition.x, cameraPosition.y, cameraPosition.z);
dummyObject.rotation.set(cameraRotation.x, cameraRotation.y, cameraRotation.z);
dummyObject.quaternion.set(cameraQuaternion.x, cameraQuaternion.y, cameraQuaternion.z);


// lookAt object3D
dummyObject.lookAt(object3D);

// store its quaternion in a variable
var targetQuaternion = dummyObject.quaternion.clone();


// tween start object
var tweenStart = {
    x: cameraQuaternion.x,
    y: cameraQuaternion.y,
    z: cameraQuaternion.z,
    w: cameraQuaternion.w
};

//tween target object
var tweenTarget = {
    x: targetQuaternion.x,
    y: targetQuaternion.y,
    z: targetQuaternion.z,
    w: targetQuaternion.w
};

// tween stuff
var tween = new TWEEN.Tween(tweenStart).to(tweenTarget, time);

tween.onUpdate(function() {
    camera.quaternion.x = tweenStart.x;
    camera.quaternion.y = tweenStart.y;
    camera.quaternion.z = tweenStart.z;
    camera.quaternion.w = tweenStart.w;
});

tween.start();

}

所以这行不通。

我还尝试了另一种方法，计算相机矢量和对象矢量之间的角度，并将该角度用作目标旋转：

function rotateCameraToObject(object3D, time) {

// camera original position
var cameraPosition = camera.position.clone();

// object3D position
var objectPosition = object3D.position.clone();

// direction vector from camera towards object3D
var direction = objectPosition.sub(cameraPosition);

// compute Euler angle
var angle = new THREE.Euler();
angle.setFromVector3(direction);


/*
 * tween stuff    
 */
var start = {
    x: camera.rotation.clone().x,
    y: camera.rotation.clone().y,
    z: camera.rotation.clone().z,
}

var end = {
    x: angle._x,
    y: angle._y,
    z: angle._z,
}

var tween = new TWEEN.Tween(start).to(end, time);

tween.onUpdate(function() {
    camera.rotation.y = start.x;
    camera.rotation.y = start.y;
    camera.rotation.y = start.z;
});

tween.start();

}

这也不起作用，最终相机向对象旋转但旋转不正确。

有什么帮助吗？为相机设置 lerp 旋转功能的正确方法是什么？

提前致谢！

【问题讨论】：

标签： camera rotation quaternions

【解决方案1】：

您是否更新了动画循环中的补间？

function animate() {
    requestAnimationFrame( animate );

    TWEEN.update();

    render();
}

但是，使用四元数而不是旋转来转动物体可能会更好 - 防止万向节锁定。 THREE.js 提供了一个方便的函数来使用球面线性插值 (slerp)，而不是使用补间 (lerp)，它会给你带来不希望的结果，尤其是在 180 度转弯时。把它放在你的动画循环中。

camera.quaternion.slerp(targetQuaternion,t); //t = normalized value 0 to 1

然后你可以补间 t 来给你想要的缓动。

【讨论】：