I have been working on changing the geometry of objects in a three.js scene. I have written code that almost works, where a mouse click triggers the change. However, I am facing an issue where the shape is only updated on the first mouse click, even though the geometry is being modified correctly with each subsequent click. This is using either version 66 or 68 of the three.js library.
I have looked at resources such as Three.js: Completely change object's Geometry and Updating a geometry inside a mesh does nothing but so far, I haven't been able to get my code to work properly.
Here are the relevant parts of my 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;
/* With that next line, on the first click, the sphere
* becomes a cube (as intended), but further clicks don't
* change the view anymore, even though item.geometry is
* modified.
*/
item.geometry.buffersNeedUpdate = true;
/* If I try next line instead, I got the following error:
* "TypeError: l.geometryGroupsList is undefined"
* from three.js.
*/
// item.geometry.verticesNeedUpdate = true;
}
Here is a jsfiddle of a (non-)working example. There is a sphere on screen, a click will make it a cube. Further clicks are supposed to switch between sphere and cube, but nothing changes on-screen.