三.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 的样条曲线创建的路径.使用标准的轨迹球鼠标交互进行导航.

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 ).

要使框保持与曲线相切，请遵循 将对象的旋转定向到 THREE.JS 中的样条点切线.

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

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