Display line dynamically with setDrawRange()

[tkt028]

I have a line object defined by a list of vertices (for example: 100 vertices). I writing a program to dynamically display the line from the vertex index 0 to the index N where N increases overtime. I used below code to render this effect:

        function drawLine(points) {
            var geometry = new THREE.Geometry();
            points.forEach(function(point) {
                  var v = new THREE.Vector3(point[0], point[1], point[2]);
                  geometry.vertices.push( v );
            });

            var line = new MeshLine.MeshLine();
            line.setGeometry( geometry );

              var material = new MeshLine.MeshLineMaterial( {
                color: COLORS.GREEN,
                opacity: 0.2,
                transparent: true,
                linewidth: 1
            } );
            var mesh = new THREE.Mesh( line.geometry, material ); // this syntax could definitely be improved!
            scene.add( mesh );

            return mesh;
        }

var line = drawLine(points);
line.geometry.setDrawRange( 0, 10 );   // show some points of trajectory line
line.geometry.attributes.position.needsUpdate = true;

The partial display of the line works (it doesn't show the whole line), but not the right number of vertices defined by the index N provided in runtime.

QUESTION: what is the right way to do this with THREE.MeshLine? Thank you very much!

[jimtang]

As the points buffer of MeshLine can not be changed dynamically, I used to alloc a static array for it like you do, but the difference is that I update the whole array every frame and set the [11, 99] to be the same point as 10, to avoid using setDrawRange API.

[tkt028]

Thank @jimtang for the hint. I close this issue.

[michaelybecker]

This issue saved me - thanks for the advice, @jimtang !