Three.JS对象沿着样条路径移动 - 旋转/切线问题和恒定速度问题

Question

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

基本上，我创建了这个jsfiddle: http://jsfiddle.net/jayfield1979/qGPTT/2/，它展示了一个简单的立方体沿着使用SplineCurve3创建的样条曲线路径移动。使用标准的TrackBall鼠标交互进行导航。

将立方体沿路径定位很简单。然而，我有两个问题。

首先，我正在使用spline.getTanget( t )，其中t是沿路径的位置，以便立方体旋转（仅以Y轴为UP）。我认为我错过了什么，因为即使我提取所提供的切线的.y属性，旋转看起来仍然偏离轨道。是否需要归一化？

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

任何对于数学小白的帮助或解释都将不胜感激。

- jayfield1979

Answer 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 );

three.js r.144

- WestLangley

---

太棒了。我很欣赏这个小样，因为它让我能够看到实际操作并通过这种方式学习。非常感谢你。 - jayfield1979

抱歉。你只能逐步执行代码并进行调试。警告：如果两个向量平行，叉积没有明确定义。 - WestLangley

@WestLangley 嗯，我已经尝试过了，唯一让它工作的方法是将后向直线向量偏移1度。这使得创建完美的循环不可能（或非常不优雅）。这是一个错误、改进还是不可能的呢？毫无疑问，跟随样条曲线是3D引擎的标准功能之一，所以这肯定不是不可能的吧？ - jayfield1979

你的火车轨道在X-Y平面上。确保你理解我的更改为什么有效。 - WestLangley

非常感谢。我最初更改了这个（从您的第一个fiddle开始），因为我正在使用导入的Collada模型，它们位于不同的平面上，与本机3D对象不同。我只是在导入时旋转了它们，这似乎起作用了 :) - jayfield1979