title: Three.js: geometry.addEventListener is not a function
body: <p>I've been messing around with <a href="http://threejs.org/" rel="nofollow">Threejs</a> trying to get my sea legs, but I've run into a problem long before I expected to and I can't figure out if there's a mistake in my code or a mistake in the framework (I assume it's mine).</p>
  
  <p>I want to replace an object with another when a button is pressed. My test code (below) loads a cube on the initial load, and I was hoping to replace it with a sphere when a button is pressed. However, that's not happening, and instead I'm getting the error:</p>
  
  <pre><code>TypeError: geometry.addEventListener is not a function
  geometry.addEventListener( 'dispose', onGeometryDispose );
  </code></pre>
  
  <p>My html: </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;My test&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
  &lt;/head&gt;
  &lt;body style="margin: 0;"&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r71/three.js"&gt;&lt;/script&gt;
    &lt;script src="OrbitControls.js"&gt;&lt;/script&gt;
    &lt;script&gt;
        var WIDTH = 500,
           HEIGHT = 500;
        var scene = new THREE.Scene();
        var aspect = WIDTH / HEIGHT;
        var camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 1000);
        camera.position.set(0,0,5);
        scene.add(camera);
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize( WIDTH , HEIGHT );
        document.body.appendChild( renderer.domElement );
  
        var geometry = new THREE.BoxGeometry( 1, 1, 1 ); 
        var material = new THREE.MeshNormalMaterial(); 
        var cube = new THREE.Mesh( geometry, material ); 
        scene.add( cube ); 
  
        controls = new THREE.OrbitControls(camera, renderer.domElement);
  
        function animate() {
          requestAnimationFrame(animate);
          renderer.render(scene, camera);
          controls.update();
        }
        animate();
  
  
      &lt;/script&gt;
      &lt;div&gt;
          &lt;button onclick="updateThing();"&gt;Update Thing&lt;/button&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;script src="scripts.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My function for making the change when the button is pressed:</p>
  
  <pre><code>function updateThing() {
      scene.remove(cube)
      var pos = new THREE.Vector3(0, 0, 0); 
      var geo = new THREE.Sphere(pos, parseFloat(1.4));
      var mat = new THREE.MeshNormalMaterial();
      sphere = new THREE.Mesh( geo, mat );
      scene.add( sphere );
  }
  </code></pre>
  
  <p>Am I doing something wrong?</p>
  
  <p>Orbit controls can be found here: <a href="https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js" rel="nofollow">https://github.com/mrdoob/three.js/blob/master/examples/js/controls/OrbitControls.js</a></p>