javascript - Changing a three.js object's geometry -

i trying change geometry of objects in three.js scene. have almost-working piece of code mouse click triggers change, got following problem: (rendered) shape changed on first mouse click, though geometry modified each following clicks. using v66 or v68 of three.js library, if relevant.

i read three.js: change object's geometry , updating geometry inside mesh nothing couldn't code work far.

relevant parts of code:

var count = 0, item, geometry; var geoms = [new three.spheregeometry(2), new three.boxgeometry(3, 3, 3)];   function init() {      geometry = geoms[count];     item = new three.mesh(geometry, material);     scene.add(item);  }  // mouse click listener. function handleclick(event) {     count = 1 - count;     geometry = geoms[count];     item.geometry = geometry;      /* next line, on first click, sphere      * becomes cube (as intended), further clicks don't      * change view anymore, though item.geometry      * modified.      */     item.geometry.buffersneedupdate = true;      /* if try next line instead, got following error:      * "typeerror: l.geometrygroupslist undefined"      * three.js.      */     // item.geometry.verticesneedupdate = true; } 

here jsfiddle of (non-)working example. there sphere on screen, click make cube. further clicks supposed switch between sphere , cube, nothing change on-screen.

i don't know why happens. unable update geometry of mesh geometry object once used.

.clone() works in case.

item.geometry.dispose(); item.geometry = geometry.clone(); 

dispose() previous geometry object prevent memory leaks.

there better solution.