THREE.js lookAt - 如何在旧和新目标位置之间平稳移动？

Question

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坐标？（我将根据所需扫描率和帧之间的时间间隔提供点之间的角度增量）。

- steveOw

Answer 1

你希望平稳地从一个方向过渡到另一个方向。

在你的情况下，你需要预先计算目标四元数：

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

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

然后，在你的渲染循环中：

myCone.quaternion.slerpQuaternions( q1, q2, time ); // 0 < time < 1

three.js r.141

- WestLangley

---

非常感谢，这个例子中的代码运行得很好，可以实现移动对象。 - undefined

Answer 2

对于那些想要在编程中实现位置插值和朝向插值的人来说，你可以根据当前的朝向方向创建一个初始的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);
  }
}

- bovesan