Three.JS对象遵循样条路径-旋转/切线问题&恒速问题 [英] Three.JS Object following a spline path - rotation / tanget issues & constant speed issue

问题描述

我认为我的问题类似于:将对象的旋转定向到THREE.JS中的样条点切线，但是我无法正确访问jsfiddle，因此我在解释的第二部分中苦苦挣扎.

I think my issue is similar to: Orient object's rotation to a spline point tangent in THREE.JS but I can't access the jsfiddle's properly and I struggled with the second part of the explanation.

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

Basically, I have created this jsfiddle: http://jsfiddle.net/jayfield1979/qGPTT/2/ which demonstrates a simple cube following the path created by a spline using SplineCurve3. Use standard TrackBall mouse interaction to navigate.

将多维数据集沿路径定位很简单.但是我有两个问题.

Positioning the cube along the path is simple. However I have two questions.

首先，我使用spline.getTanget( t )，其中t是沿路径的位置，以使多维数据集旋转(Y轴仅作为UP).我想我丢失了一些东西，因为即使我提取了提供的结果切线的.y属性，旋转效果仍然看起来很差.是否有一些需要规范化的工作?

First, I am using the spline.getTanget( t ) where t is the position along the path in order to have the cube rotate (Y axis as UP only). I think I am missing something because even if I extract the .y property of the resulting tangent provided, the rotations still seem off. Is there some nomalizing that needs doing?

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

Second, the speed is very varied along the path, obviously a lot more points stacked in creating the tighter curves, but I was wondering is there a way to refactor the path to more evenly distribute the spaces between points? I came across the reparametrizeByArcLength function but struggled to find an explanation how to use it.

我们将不胜感激地收到任何有关数学假人的帮助或解释.

Any help or explanation for a bit of a maths dummy, would be gratefully received.

推荐答案

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

To maintain a constant speed, you use .getPointAt( t ) instead of .getPoint( t ).

要使框保持与曲线相切，请遵循与

To get the box to remain tangent to the curve, you follow the same logic as explained in the answer to 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

three.js r.88

这篇关于Three.JS对象遵循样条路径-旋转/切线问题&恒速问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！