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

本文介绍了THREE.js lookAt - 如何在新旧目标位置之间平滑平移?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我可以使用 THREE.js 的lookAt"函数让我的锥体依次指向每个目标球体(红色、绿色、黄色、蓝色).

I can get my cone to point at each target sphere in turn (red,green,yellow,blue) using the THREE.js "lookAt" function.

// 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.

But now I want the cone to pan smoothly and slowly from the old target to the new target. I guess that I can do it by computing intermediate points on the circular arc which is centred at the cone centre Cxyz and which passes from the previous target position Pxyz to the new target position Nxyz.

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

Please can someone point me to suitable: (a) utilities or (b) trigonometry algorithms or (c) code examples for calculating the xyz coordinates of the intermediate points on such an arc? (I will supply the angular increment between points based on desired sweep rate and time interval between frames).

推荐答案

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

If you want to smoothly transition from one orientation to another, you can use THREE.Quaternion.slerp().

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

In your case, you would pre-calculate the target quaternions:

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

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

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

Then, in you render loop you use slerp():

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

修改小提琴来演示这个概念:http://jsfiddle.net/1dtx78bj/22/.

Modified fiddle to demonstrate the concept: http://jsfiddle.net/1dtx78bj/22/.

three.js r.71

这篇关于THREE.js lookAt - 如何在新旧目标位置之间平滑平移?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！