title: ThreeJS, Updating mesh.geometry at runtime
body: <p>Considering a scene and 3 <code>BoxBufferGeometries</code>, I don't want to re-render the scene (<code>drawObjects</code> is called once, the 'first' time), but rather update it (<code>updateScene</code> is called on user action for example), the following code sucessfully updates the color and texture material attributes for all the objects of the scene, but only seems to affect one of the  3 objects when it comes to mesh.geometry transformation (one becomes as sphere, the 2 other remains squares), why? (<a href="https://still-bayou-39915.herokuapp.com/" rel="nofollow noreferrer">live example</a>)</p>
  
  <pre><code>drawObjects = (options) -&gt;
      map = (new (THREE.TextureLoader)).load(options.texture)
      map.wrapS = map.wrapT = THREE.RepeatWrapping
      map.anisotropy = 16
      material = new (THREE.MeshToonMaterial)(
          color: options.color
          map: map
          transparent: true
          side: THREE.DoubleSide)
  
      geometry = new THREE.BoxBufferGeometry( 20, 20, 20 )
  
      i = 0
      while i &lt; 3
          object = new (THREE.Mesh)(geometry, material, (color: Math.random() * 0xffffff))
          object.position.x = Math.random() * 800 - 400
          object.position.y = Math.random() * 800 - 400
          object.position.z = Math.random() * 800 - 400
  
          object.setGeometry = -&gt;
              geometry = new THREE.SphereGeometry(20)
              object.geometry = geometry
              return
  
          object.setTexture = (texture) -&gt;
              object.material.map = new THREE.TextureLoader().load( texture )
              return
  
          object.setColor = (color) -&gt;
              object.material.color = new THREE.Color(color)
              return
  
          scene.add object
          i++
  
  updateScene = (options) -&gt;
      @scene.traverse (object) -&gt;
          if object.isMesh == true
              object.setColor(options.color)
              object.setTexture(options.texture)
              object.setGeometry()
              return 
  </code></pre>
  
  <p>I tried few other approches aswell, the first was about updating vertices (like indicated <a href="https://stackoverflow.com/questions/15384078/updating-a-geometry-inside-a-mesh-does-nothing">here</a>) but it doesn't work since BoxGeometry do no have vertices. Then I tied to add a few options such as, but without success.</p>
  
  <pre><code># object.geometry.dynamic = true
  # object.geometry.buffersNeedUpdate = true
  # object.updateMatrix()
  </code></pre>
  
  <p>The second one was using <code>object dispose</code> basically making a clone of the original, like advised <a href="https://stackoverflow.com/questions/25766981/changing-a-three-js-objects-geometry">here</a> dispose the original mesh and replace it with its clone such as but it didn't work in my case since I have functions attached to this object I'll need to re-use. Maybe I did it wrong:</p>
  
  <pre><code>object.geometry.dispose();
  object.geometry = geometry.clone();
  </code></pre>
  
  <p>I bet there is a way to achieve this kind mesh.geometry transformation and apply it to every object while traversing the scene, but can't find how. </p>
  
  <p>Kind regards</p>