I have generated a tube shape with 200 coordinates from an external JSON file. See the code snippet below.
function plotPath()
{
var obj = getPath();
var segments = obj.path.length;
var closed = false;
var debug = false;
var radiusSegments = 12;
var tube;
var points = [];
var x=0,y=0,z=0; var vertices=[];
var point2x, point2y;
function v(x,y,z) {
return new THREE.Vertex(new THREE.Vector3(x,y,z));
};
for(var i=0; i<obj.path.length; i++)
{
var point = obj.path[i].point;
points.push(point);
}
extrudePath = new THREE.SplineCurve3(points);
extrudePath.dynamic = true;
tube = new THREE.TubeGeometry(extrudePath, segments, 60, radiusSegments, closed, debug);
tube.dynamic = true;
tube.verticesNeedUpdate = true;
tube.dynamic = true;
var faceIndices = [ 'a', 'b', 'c', 'd' ];
var f;
console.log(tube.faces[0]);
for ( var i = 0; i < tube.faces.length; i ++ )
{
f = tube.faces[i];
color = new THREE.Color( 0xffffff );
color.setRGB( Math.random(), Math.random(), Math.random());
for(var j=0;j<4;j++)
{
vertexIndex = f[ faceIndices[ j ] ];
p = tube.vertices[ vertexIndex ];
f.vertexColors[ j ] = color;
}
}
tubeMesh = new THREE.Mesh(tube ,new THREE.MeshBasicMaterial(
{ color: 0xffffff, shading: THREE.FlatShading, side: THREE.DoubleSide, wireframe: false, transparent: false,
vertexColors: THREE.VertexColors, overdraw: true } ));
var v = new THREE.Vector3(1,0,0).normalize();
tubeMesh.applyMatrix(matrix.makeRotationAxis(v, 0));
tubeMesh.applyMatrix(matrix.makeTranslation(-500,0,0));
if ( tube.debug ) tubeMesh.add( tube.debug );
scene.add(tubeMesh);
objects.push(tubeMesh);
}
Now I am looking to place/draw markers like lines with text at each segment. I attempted to draw lines by adding 10 to x and y of each coordinate, however, the tube has been translated so it's not drawing correctly from the exact point. Below is the code snippet I used to add lines.
for(var i=0; i<obj.path.length; i++)
{
var point = obj.path[i].point;
point2x = point.x+10;
point2y = point.y+10;
var lineGeo = new THREE.Geometry();
lineGeo.vertices.push(v(point.x, point.y, 0), v(point2x, point2y, 0));
var lineMat = new THREE.LineBasicMaterial({
color: 0x000000, lineWidth: 2});
var line = new THREE.Line(lineGeo, lineMat);
line.type = THREE.Lines;
scene.add(line);
points.push(point);
}
Is there a way to draw/place such markers with text at each segment of the tube geometry?