我刚刚开始研究three.js,我在编写一个以对象位置(Vector3)为参数的函数和以毫秒为单位的时间时遇到了一些麻烦,并逐渐将相机旋转到该时间面对它。基本上是内置lookAt方法的lerp版本。
首先,我尝试使用tweenjs来获得平滑的旋转过渡。对于开始和结束参数,我创建了一个虚拟对象并将其位置,旋转和四元数设置为与摄像机相同,然后我使用它上的lookAt函数面向对象并且我已经存储了它的四元数在一个新的变量" targetQuaternion"。然后我使用此变量作为TWEEN.Tween方法中的目标参数来更新camera.quaternion。我之前尝试使用四元数以避免旋转锁定然后旋转,但没有一个正常工作。
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旋转功能的正确方法是什么?
提前致谢!
答案 0 :(得分:2)
您是否在动画循环中更新了补间?
function animate() {
requestAnimationFrame( animate );
TWEEN.update();
render();
}
然而,使用四元数而不是旋转来转动物体可能更好 - 防止万向节锁定。 THREE.js提供了一个方便的功能,使用球形线性插值(slerp),而不是使用补间(lerp),这可以给你不希望的结果,最明显的是180度转弯。把它放在动画循环中。
camera.quaternion.slerp(targetQuaternion,t); //t = normalized value 0 to 1
然后你可以补间 t 给你想要的缓和。