three.js - draw line at each segment in tube geometry

Question

I've created a tube geometry with 200 co-ordinates from external json file. Please find the below code.

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 want to put/draw some marker such as line with text at each segment. I tried to draw line by adding 10 to x and y of each co-ordinates but the tube is translated so could not able to draw it from exact point. Below is the code I am using to add line.

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);                 
            }

How do I draw/put such marker with text at each segment of tube geometry ?

Answer 1

If you want your lines to move/rotate with your tube, then add the lines as children of the tubeMesh, rather than as children of the scene.

tubeMesh.add( line );

If you need to know how to correctly draw lines, then have a look at the three.js line examples.