CODEWITHSUNDEEP
three.js
speedwell
speedwell

Reputation: 655

Modify vertices in a THREE.BufferGeometry object

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.

Upvotes: 9

Views: 10405

Answers (1)

WestLangley
WestLangley

Reputation: 104763

If you update the contents of the attribute buffers, you need to set the needsUpdate flag. For example:

buffer_geometry.attributes.position.needsUpdate = true;

buffer_geometry.attributes.color.needsUpdate = true;

three.js r.143

Upvotes: 16

Related Questions