Three.js tubeGeometry没有正确着色

Question

我有一个代码，允许用户输入数据并使用管几何图形绘制它。代码似乎在大多数情况下都能正常工作，但是，其中一个测试数据集没有正确着色。

Here is an example page for a site that I am building that solves for the position and velocity of a bungee jumper.滚动到页面底部，您将看到一个带有正弦波的三js环境以及跳线位置图。这两个项目用单独的彩色图表绘制，您可以看到正弦波的颜色是正确的，但数据却没有。

起初我以为数据可能太稀疏，但这不是问题。

这段代码太长了，无法真正粘贴到这里，但是它适用于所有其他数据集的事实让我觉得我缺少了tubeGeometry函数固有的东西。

关于为什么一根管子被错误染色的任何想法？

更新：当我在数据集中的每个现有点之间添加额外的插值点时，错误课程。填充越多，错误越少。这让我认为错误是由于Three.SplineCurve3的样条函数插值与真实数据之间的差异造成的。这也可以解释为什么我的其他例子工作正常，因为它们都是正弦曲线数据。

如何阻止SplineCurve3执行此操作，或者我还可以使用其他方法创建Tube几何图形？

Answer 1

我猜这是网格长度计数问题（三个不计算矢量+矢量+矢量的长度，而是通过mesh.position + bounding radius计算长度） 也许你可以将曲线与零件分开，并将每个零件的颜色与它们的长度无关。

有一些工作方法：

• https://stemkoski.github.io/Three.js/Graphulus-Curve.html
• https://stemkoski.github.io/Three.js/Graphulus-Surface.html
• https://stemkoski.github.io/Three.js/Graphulus-Function.html