CODEWITHSUNDEEP
javascriptthree.jsgeometryvertices
윤형철
윤형철

Reputation: 33

three.js lines does not update

I'm using three.js. And line is not updated. I want to lengthen this line 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);
        }

Upvotes: 2

Views: 2752

Answers (1)

Wilt
Wilt

Reputation: 44422

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

Upvotes: 4

Related Questions