Question

I make a graph with three.js and I would like to connect the nodes with THREE.Line.
After I move one of the nodes with mouse, must re create the edge (THREE.Line) with the nodes new coordinates. How can I make it?

my code does not update the view:

function render(){

    newEdge.vertices.push(new THREE.Vertex(inNode.position));
    newEdge.vertices.push(new THREE.Vertex(outNode.position));

    var newLine = new THREE.Line(newEdge, new THREE.LineBasicMaterial({
        color: 0xff0000,
        opacity: 0.9
    }));

    scene.objects[edgePos] = newLine;

    renderer.render(scene, camera);

}

Thanks a lot for any suggestion!

Answer 1

When you change the geometry directly like that, the render loop won’t pick up on it. You need to flag the vertices as dirty with newEdge.__dirtyVertices = true;. You may also need newEdge.dynamic = true;. Look at section 9 here.