我在THREE.js中创建相机Tween时遇到了一些麻烦，特别是在动画结束和开始时，似乎总是有一个摄像头“跳跃”，这意味着一旦动画开始并且一旦动画，相机就会闪烁结束 . 作为参考，我正在做的是：
-
相机俯瞰上面的场景 .
-
当用户点击场景的元素时，相机会放大它（通过TWEEN），当它足够接近时，OrbitControls目标会更改为所选元素的质心，并且自动旋转开始，因此用户会看到元素旋转在屏幕的中央 .
-
当用户再次点击时，相机会缩小到其初始位置（通过TWEEN）并返回原始控件 .
我在每个TWEEN的开头和结尾都经历着“跳跃/闪烁” .
这是我的补间功能：
var origpos = new THREE.Vector3().copy(camera.position); // original position
var origrot = new THREE.Euler().copy(camera.rotation); // original rotation
camera.position.set(x, y+500, z+variation);
camera.lookAt(new THREE.Vector3(x,y,z));
var dstrot = new THREE.Euler().copy(camera.rotation)
// reset original position and rotation
camera.position.set(origpos.x, origpos.y, origpos.z);
camera.rotation.set(origrot.x, origrot.y, origrot.z);
options = {duration: 3000};
//
// Tweening
//
// position
new TWEEN.Tween(camera.position).to({
x: x,
y: y+500,
z: z
}, options.duration).easing(TWEEN.Easing.Cubic.Out).onUpdate(function () {
camera.lookAt(new THREE.Vector3(x,y,z));
}).onComplete(function () {
controls.autoRotate = true;
controls.autoRotateSpeed = 5.0;
controls.target = new THREE.Vector3(x, y, z);
}).start();
// rotation (using slerp)
(function () {
var qa = camera.quaternion; // src quaternion
var qb = new THREE.Quaternion().setFromEuler(dstrot); // dst quaternion
var qm = new THREE.Quaternion();
var o = {t: 0};
new TWEEN.Tween(o).to({t: 1}, options.duration).onUpdate(function () {
THREE.Quaternion.slerp(qa, qb, qm, o.t);
camera.quaternion.set(qm.x, qm.y, qm.z, qm.w);
}).start();
}).call(this);
1 回答
好吧，似乎这个问题本身就是我用来旋转相机的方法，使用四元数和SLERP .
我发现最好的方法（更简单，没有闪烁/跳转）将插入camera.rotation的参数而不是插入四元数 .
因此，camera.rotation.the_axis_where_you_want_to_rotate的Tween工作完美，并且与位置上的Tween同时完成，实现了我正在寻找的效果 .