Here are the steps I take in my approach:
1) Establish an initial path for the tube by creating an array of positions of points.
2) Render the tube based on the created path.
3) Modify the path array.
4) Repeat step 2.
To achieve this, I believe functions like the following may be necessary:
function morphPath(path){
// implement some magic here
return newPath;
}
function morphTube(path){
// adjust the tube's vertices positions according to the provided path
}
Let's say I aim to display a snake that moves around dynamically.
I came across a complex example which is beautiful but challenging for me. Any help in gaining a basic understanding of how to address my problem would be greatly appreciated.
Example - http://codepen.io/tdhooper/full/ZGPOQJ/
In order to create the tube, I use the following function:
var geometry = new THREE.TubeGeometry( curve, 10, 3, 20, false );
I am seeking guidance on which function to utilize for curve creation and specifically how to morph (not scale, not rotate, not translate) the tube?
The array of points I work with is straightforward:
points = [{ x: 0, y: 0, z: 0}, { x: 1, y: 1, z: 0}, { x: 3, y: 0, z: 0}]