三.JS 对象遵循样条路径 - 旋转/切线问题和恒速问题

Posted 2023-02-27

【中文标题】三.JS 对象遵循样条路径 - 旋转/切线问题和恒速问题

【英文标题】：Three.JS Object following a spline path - rotation / tanget issues & constant speed issue

【发布时间】：2013-08-26 09:03:30

【问题描述】：

我认为我的问题类似于：Orient object's rotation to a spline point tangent in THREE.JS 但我无法正确访问 jsfiddle，并且我在解释的第二部分中遇到了困难。

基本上，我已经创建了这个 jsfiddle：http://jsfiddle.net/jayfield1979/qGPTT/2/，它演示了一个简单的立方体，它遵循使用 SplineCurve3 的样条创建的路径。使用标准轨迹球鼠标交互进行导航。

沿着路径定位立方体很简单。不过我有两个问题。

首先，我使用spline.getTanget( t )，其中t 是沿路径的位置，以便让立方体旋转（Y 轴仅向上）。我想我遗漏了一些东西，因为即使我提取了所提供的结果切线的.y 属性，旋转似乎仍然关闭。是否需要做一些规范化？

其次，沿路径的速度变化很大，显然在创建更紧密的曲线时堆叠了更多的点，但我想知道有没有办法重构路径以更均匀地分布点之间的空间？我遇到了reparametrizeByArcLength 函数，但很难找到如何使用它的解释。

任何关于数学假人的帮助或解释，将不胜感激。

【参考方案1】：

要保持恒定速度，请使用.getPointAt( t ) 而不是.getPoint( t )。

要使框保持与曲线相切，请遵循Orient object's rotation to a spline point tangent in THREE.JS 的答案中解释的相同逻辑。

    box.position.copy( spline.getPointAt(counter) );

    tangent = spline.getTangentAt(counter).normalize();

    axis.crossVectors( up, tangent ).normalize();

    var radians = Math.acos( up.dot( tangent ) );

    box.quaternion.setFromAxisAngle( axis, radians );

编辑：更新小提琴：http://jsfiddle.net/qGPTT/509/

three.js r.88

【讨论】：

太棒了。我很欣赏小提琴，因为它让我看到了这一点并以这种方式学习。非常感谢。

感谢您的回答和提琴，如果您原谅双关语，我发现它很容易理解；-)。迫不及待地想将此应用到我的孩子们的游戏创意中，这对于火车轨道或过山车都适用。再次感谢。

@WestLangley 继这个出色的答案之后，我已经成功地在我的项目中实施了这个（经过长时间的休息），但我有一个问题：jsfiddle.net/jayfield1979/T2t59 当盒子连续第二个，他们翻转！有没有办法解决这个问题？

对不起。您只需要单步调试代码并对其进行调试。警告：如果两个向量是平行的，则叉积的定义不明确。

jsfiddle.net/T2t59/1 您的火车轨道在 X-Y 平面上。确保您了解我的更改为何有效。