title: Changing a three.js object's geometry
body: <p>I am trying to change the geometry of some objects in a three.js scene. I have an almost-working piece of code where a mouse click triggers the change, but got the following problem: the (rendered) shape is only changed on the <i>first</i> mouse click, even though the geometry is also successfully modified by each following clicks. Using v66 or v68 of three.js library, if it is relevant.</p>
  
  <p>I read <a href="https://stackoverflow.com/questions/19977074">Three.js: Completely change object&#39;s Geometry</a> and <a href="https://stackoverflow.com/questions/15384078">Updating a geometry inside a mesh does nothing</a> but couldn't get my code to work so far.</p>
  
  <p>Relevant parts of my code:</p>
  
  <pre><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;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/hzmj74gb/" rel="nofollow noreferrer">Here</a> 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 change on-screen.</p>