Modify vertices in a THREE.BufferGeometry object

Question

I need to selectively show/hide 1000+ lines of different sizes, positions and colors.

My first attempt made a THREE.Geometry with a name for each. To hide/show I iterate over scene and hide/show on each based on name and my heuristic. That seemed very slow - around 50Hz for ~1000 lines.

I made a test using a similar approach but using only a single THREE.Geometry to hold all of the lines. That was much faster but of course but I can only apply one material to all the lines which is no good. I was able to set the right flags and update the positions of the lines while the app was running though.

The best approach seems to be to use THREE.BufferGeometry. I made a test which was very fast and worked as expected for the initial set up but I was unable to change the position/visibility and color of each line afterwards. I made a JS fiddle that illustrates it - http://jsfiddle.net/SSnKk/ - but calling buffer_geometry.dynamic = true; and buffer_geometry.verticesNeedUpdate = true; didn't appear to help.

Answer 1

You need to call

buffer_geometry.attributes.position.needsUpdate = true;
buffer_geometry.attributes.color.needsUpdate = true;

Updated fiddle: jsfiddle.net/hjx3rLmt/1

three.js r.76