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

Question

我认为我的问题类似于:将对象的旋转方向旋转到THREE.JS中的样条点切线,但是我无法正确访问jsfiddle并且我在解释的第二部分中遇到了困难.

基本上,我创建了这个jsfiddle:http://jsfiddle.net/jayfield1979/qGPTT/2/,它演示了一个简单的立方体,遵循由样条曲线创建的路径SplineCurve3.使用标准的TrackBall鼠标交互进行导航.

沿着路径定位立方体很简单.但是我有两个问题.

首先,我使用spline.getTanget( t )where t是路径上的位置,以使立方体旋转(Y轴仅为UP).我想我错过了一些东西,因为即使我提取.y了所提供的切线的属性,旋转仍然显得不合适.是否需要进行一些正规化？

其次,沿着路径的速度变化很大,显然在创建更紧凑的曲线时会堆积更多的点,但我想知道有没有办法重构路径以更均匀地分布点之间的空间？我遇到了这个reparametrizeByArcLength功能,但很难找到如何使用它的解释.

如果对数学假人有任何帮助或解释,我们将非常感激.

Answer 1

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

要使框保持与曲线相切,请遵循与Orient对象的旋转的答案中所解释的逻辑相同的逻辑,使其与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