Three.js: Updating Geometries vs Replacing

Question

I have a scene with lots of objects using ExtrudeGeometry. Each of these need to update each frame, where the shape that is being extruded is changing, along with the amount of extrusion. The shapes are being generated using d3's voronoi algorithm.

See example.

Right now I am achieving this by removing every object from the scene and redrawing them each frame. This is very costly and causing performance issues. Is there a way to edit each mesh/geometry instead of removing from the scene? Would this help with performance? Or is there a more efficient way of redrawing the scene?

I'd need to edit both the shape of the extrusion and the amount of extrusion.

Thanks for taking a look!

Answer 1

If you're not changing the number of faces, you can use morph targets http://threejs.org/examples/webgl_morphtargets.html

You should

1. Create your geometry
2. Clone the geometry and make your modifications to it, such as the maximum length of your geometry pillar

3. Set both geometries as morph targets to your base geometry, for example

   baseGeo.morphTargets.push( { name: "targetName", vertices: [ modifiedVertexArray ] } );

After that, you can animate the mesh this using mesh.updateMorphTargets()

See http://threejs.org/examples/webgl_morphtargets.html