Труба Three.jsGeometry не правильно окрашивается

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 с волной sin и графиком положения перемычки. Эти два элемента обозначены отдельными цветовыми картами, и вы можете видеть, что волна sin цветна правильно, но данных нет.

Сначала я подумал, что, возможно, данные были слишком малонаселенными, но это не проблема.

Код для этого слишком длинный, чтобы действительно вставить здесь, но тот факт, что он имеет диаграммы для всех других наборов данных, заставляет меня думать, что мне не хватает чего-то, что присуще функции tubeGeometry.

Любые идеи относительно того, почему одна трубка отличается от цвета?

ОБНОВЛЕНИЕ: Когда я добавляю дополнительные интерполированные точки между каждой существующей точкой набора данных, уроки ошибок. Чем больше отступы, тем меньше ошибка. Это заставляет меня думать, что ошибка связана с различием между интерполяцией сплайновой функции от Three.SplineCurve3 и истинных данных. Это также объясняет, почему мои другие примеры прекрасно работают, поскольку все они являются синусоидными данными.

Как я могу предотвратить использование SplineCurve3 или что еще я могу использовать для создания геометрии трубы?

Answer 1

Я предполагаю, что это проблема подсчета длины сетки (три не учитывали длину вектора + вектор + вектор, но через mesh.position + ограничивающий радиус) Возможно, вы можете разделить кривую на части и покрасить каждую часть независимо от их длины ,

Есть некоторые рабочие подходы:

• 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