Three.js изменить путь для трубы при визуализации

Question

Моего подхода включают следующие шаги:

1) создают начальный путь для трубы (массив позиций точек)

2) делают трубки, основанные на пути

3) массив изменить путь

4) перейти к шагу 2

Таким образом, возможно, мне нужны такие функции, как эти:

function morphPath(path){ 
// some magic here 
return newPath; 
} 

function morphTube(path){ 
// change tube's vertices positions based on path 
} 

Предположим, я хочу сделать змею, которая ползает вокруг.

Я нашел красивый и очень сложный для меня пример, пожалуйста, дайте мне базовое понимание того, как решить мою проблему.

Пример - http://codepen.io/tdhooper/full/ZGPOQJ/

Я использую эту функцию для создания трубки:

var geometry = new THREE.TubeGeometry(curve, 10, 3, 20, false); 

Пожалуйста, предложите мне какую функцию использовать для создания кривой и как морфинг (не в масштабе, не вращаются, а не переводить труба)?

Мой массив точек прост:

points = [{ x: 0, y: 0, z: 0}, { x: 1, y: 1, z: 0}, { x: 3, y: 0, z: 0}] 

Answer 1

В любое время вы создаете любой экземпляр любого вида геометрии в three.js, созданный экземпляр имеет свойство с именем «вершины». В вашем конкретном случае, Cilinder Geometry создает множество вершин на основе исходного массива (Vector3), который вы предоставили при создании кривой.

Итак, я думаю, что вы можете создать новый путь каждый раз, когда хотите преобразовать. Затем, для morphTube, создайте новую геометрию цилиндра на основе созданного вами пути и либо удалите геометрию из сетки, которая визуализируется, и прикрепите новую геометрию (иногда это может быть сложно), либо вы можете скопировать каждую вершину из геометрии цилиндра вы только что создали геометрию цилиндра, приложенную к сетке.