Javascript THREE.js lookAt-如何在新旧目标位置之间平稳平移?
我可以使用THREE.js“lookAt”函数让圆锥体依次指向每个目标球体(红、绿、黄、蓝)Javascript THREE.js lookAt-如何在新旧目标位置之间平稳平移?,javascript,three.js,Javascript,Three.js,我可以使用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.MeshNormalMateria
// 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坐标的代码示例?(我将根据所需的扫描速率和帧之间的时间间隔提供点之间的角度增量)。如果要从一个方向平滑过渡到另一个方向,可以使用
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<时间<1
修改fiddle以演示以下概念:
three.js r.71对于那些关注lerp位置和注视的人,可以从当前注视方向和朝向最终目标的lerp创建初始注视目标:
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);
}
}
非常感谢,这对于移动的对象非常有效。
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);
}
}