THREE.js lookAt - 如何在新旧目标位置之间平滑平移？答案

【问题标题】：THREE.js lookAt - How to pan smoothly between old and new target positions?THREE.js lookAt - 如何在新旧目标位置之间平滑平移？
【发布时间】：2015-07-29 08:17:26
【问题描述】：

Example JSfiddle

我可以使用 THREE.js 的“lookAt”函数让我的锥体依次指向每个目标球体（红、绿、黄、蓝）。

// Initialisation

c_geometry = new THREE.CylinderGeometry(3, 40, 120, 40, 10, false);
c_geometry.applyMatrix( new THREE.Matrix4().makeRotationX( Math.PI / 2 ) );
c_material = new THREE.MeshNormalMaterial()
myCone = new THREE.Mesh(c_geometry, c_material);
scene.add(myCone);

// Application (within the Animation loop)

myCone.lookAt(target.position);

但现在我希望圆锥从旧目标平稳缓慢地平移到新目标。我想我可以通过计算圆弧上的中间点来做到这一点，该圆弧以圆锥中心 Cxyz 为中心，从先前的目标位置 Pxyz 传递到新的目标位置 Nxyz。

请有人指出合适的：(a) 实用程序或 (b) 三角算法或 (c) 用于计算此类弧上中间点的 xyz 坐标的代码示例？（我将根据所需的扫描速率和帧之间的时间间隔提供点之间的角度增量）。

【问题讨论】：

标签： javascript three.js

【解决方案1】：

对于那些想要调整位置和查看的人，您可以从当前的查看方向创建一个初始的lookAt目标，然后将其调整到最终目标：

function MoveWhileLookingAt(object: Object3D, destination: Vector3, lookAt: Vector3){
  const fromPosition = object.position.clone();
  const fromLookAt = new Vector3(
    0,
    .1, // To avoid initial camera flip on certain starting points (like top down view)
    -object.position.distanceTo(lookAt) // THREE.Camera looks down negative Z. Remove the minus if working with a regular object.
  );
  object.localToWorld(fromLookAt);
  const tempTarget = fromLookAt.clone();
  function LookAtLerp(alpha: number){
    // This goes in your render loop
    object.position.lerpVectors(fromPosition, destination, alpha);
    tempTarget.lerpVectors(fromLookAt, lookAt, alpha);
    object.lookAt(tempTarget);
  }
}

【讨论】：

【解决方案2】：

如果您想从一个方向平滑过渡到另一个方向，可以使用THREE.Quaternion.slerp()。

在您的情况下，您将预先计算目标四元数：

myCone.lookAt( s1.position ); 
q1 = new THREE.Quaternion().copy( myCone.quaternion );

myCone.lookAt( s2.position );
q2 = new THREE.Quaternion().copy( myCone.quaternion );

然后，在渲染循环中使用slerp()：

THREE.Quaternion.slerp( q1, q2, myCone.quaternion, time ); // 0 < time < 1

修改了 fiddle 来展示这个概念：http://jsfiddle.net/1dtx78bj/22/。

three.js r.71

【讨论】：

非常感谢，根据this example 处理移动物体时效果很好。