ThreeJS对象四元数旋转不跟随轴答案

【问题标题】：ThreeJS object quaternion rotation not following axisThreeJS对象四元数旋转不跟随轴
【发布时间】：2018-10-20 06:30:55
【问题描述】：

我正在尝试让 3D 对象遵循 3D 路径，以便它始终面向其行进的方向。我尝试这样做：

fishObject.quaternion.setFromAxisAngle(axis, radians)

其中radians 是up 向量与行进方向之间的角度

在下面的笔中，为了清楚起见，描绘了轴。蓝线是axis，紫线是up，移动的红线是鱼应该面对的方向（tangent）。它们都以正确的方式移动，但是当我设置四元数时，对象的旋转似乎没有跟随它的轴

笔中有些杂乱（用于构建鱼），但我所看到的只是第 281 行及其参数： fishObject.quaternion.setFromAxisAngle(axis, radians)

我只是新手。对于熟悉 3D 旋转的人来说应该很简单。

https://codepen.io/nth-chile/pen/ELQqqb

谢谢，如果我可以更清楚，请告诉我。

【问题讨论】：

也许这会有所帮助：stackoverflow.com/a/18409167/1461008
@WestLangley 谢谢，但仍然没有运气。问题是当轴改变方向时鱼的Z旋转没有调整。这里的代码很好地管理了鱼在轴上的旋转，但鱼的方向与轴的方向无关。鱼从全局 Z 的旋转始终相同，因此鱼始终面向右侧
你试图在一个程序中做太多事情，却没有清楚地了解基本原理。

标签： javascript three.js

【解决方案1】：

获得行为良好的切线框架的一种方法是使用lookAt() 方法。

var axes = new THREE.AxesHelper( 10 );
scene.add( axes );

. . .

// then, in the render loop

pt = swimPath.spline.getPoint( t );

tangent = swimPath.spline.getTangent( t );

axes.position.copy( pt );
axes.lookAt( pt.add( tangent ) );

现在，确保您的“鱼”的方向是默认朝向局部正 z 轴。在你的情况下，它不是，所以你必须应用轮换。将对象添加为切线框架的子对象。

fishObject.rotation.set( 0, - Math.PI / 2, 0 );
axes.add( fishObject );

three.js r.92

【讨论】：