three.js lines does not update

Question

I'm using three.js. And line is not updated. I want to lengthen this line in realtime.

I think, first, A line is drawn by reading the two data.
Second, Scene and clear.
Third, reading the third information and the extended line.
Fourth, Scene and clear.
Finally line is longer in realtime.

But, this line is not generated.

var geometry = new THREE.Geometry();
var material = new THREE.LineBasicMaterial ({color : 0x0100FF, linewidth : 6});
function line_(k){
            if(k-1 >= 0){
                geometry.vertices.push (new THREE.Vector3 (py[k]*API.Orbit_Scale ,pz[k]*API.Orbit_Scale ,px[k]*API.Orbit_Scale));
            }
            else{
                geometry.vertices.push (new THREE.Vector3 (0,0,0));
            }
            line = new THREE.Line (geometry, material);
            line.geometry.verticesNeedUpdate = true;
            scene.add (line);
        }

function animate(){
            onWindowResize();
            line.geometry.verticesNeedUpdate = true;
            renderer.render(scene, camera);
            scene.remove(line);
            requestAnimationFrame(animate);
        }

score 4 · Accepted Answer · edited May 23 '17 at 11:50

With a THREE.Geometry instance you can update the position of existing vertices in the array and use verticesNeedUpdate to animate a line. You cannot add vertices to an existing line and expect verticesNeedUpdate to draw your new line with the added vertices.

The easiest solution to add vertices to an existing line geometry is:

remove old line from scene
create new line with extra vertices
add line to scene

You can also tie this to an animation loop.

If you want to animate without removing/adding the geometry you have to use a use a THREE.BufferGeometry instance with drawCalls instead. How to do that you can read here in this answer

three.js lines does not update

1 Answers1