update vertices in THREE.Line()

Question

Im trying to dynamically rebuild some geometry inside a THREE.Line object in a simple three.js app but for some reason the update is not triggered. I've set the line as a dynamic object and I set the verticesNeedUpdate attribute to true every time I update the geometry and still the line doesn't update. Can anybody see what I'm doing wrong?

// ---------------------------------------------------------------------------------------
// line
// ---------------------------------------------------------------------------------------


function build_line(length) 
{
    var vertices = [];
    for (i = 0; i < length; i++)
    {
        vertices.push(new THREE.Vector3(i * 2, 0, 0)); 
    }

    return vertices;
}


var line_geo = new THREE.Geometry();


line_geo.vertices = build_line(3);
line_geo.dynamic = true;

console.log(line_geo);


// simple
material = new THREE.LineBasicMaterial({
    color: 0xffffff,
    linewidth: 1,
    linejoin: "mitre"
});


var scene_object = new THREE.Line(line_geo, material);

scene.add(scene_object);



// ---------------------------------------------------------------------------------------
// render loop 
// ---------------------------------------------------------------------------------------

var current_length = 3

var render = function()
{
    current_length += 1;
    line_geo.vertices = build_line(current_length);
    line_geo.verticesNeedUpdate = true;

    // draw!
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}

render();

edit

according to this post

Adding geometry to a three.js mesh after render

you cant resize the contents of a buffer only repopulate it. This page mentions you can emulate resizing the buffer by initialising the buffer oversized and keeping unused verts colapsed or hidden

https://github.com/mrdoob/three.js/wiki/Updates

I'm not sure exactly how you'd do this, I cant see a visibility flag or collapse flag on the THREE.Vector3 I'm using for verts. I tried just replacing the Vectors with nulls but that throws an error. Any thoughts how to achieve this?

See if stackoverflow.com/questions/17842521/… answers your question. — WestLangley
@WestLangley Thanks for the link, I tried a few things with no avail, you can see in the post edit — jonathan topf
@WestLangley That seems to be linking to this page if I'm not mistaken — jonathan topf

vals vals · Accepted Answer · 2014-06-25T20:59:10

At the end , collapsed can be understood as "in the same place". (there could be other ways to understand it, though)

That would mean that you need to allocate the max length

var vertices = [];

function allocate_line(maxLength) 
{
    var vertices = [];
    for (i = 0; i < maxLength; i++)
    {
        vertices.push(new THREE.Vector3(0, 0, 0)); 
    }
}

And then

function build_line(length) 
{
    for (i = 0; i < length; i++)
    {
        vertices[i].x = i * 2; 
    }
    for (i = length; i <= maxLength; i++)
    {
        vertices[i].x = (length - 1) * 2; 
    }
}

That is, all the unused vertices set to the coor of the last used one.

This is of course a quick and dirty implementation to give you the idea..

update vertices in THREE.Line()

edit

1 Answers