title: How can I add an object to a three.js scene inside a click event handler?
body: <p>Given a three.js scene that is initialized on document ready, how can I add a 3D object (such as a simple cube), when the user triggers a click event after the init() function has already fired? </p>
  
  <p>Here's a <a href="http://jsfiddle.net/pHmEd/1/" rel="nofollow">fiddle</a> that already has the scene setup.</p>
  
  <pre><code>var camera, scene, renderer;
  var geometry, material, mesh;
  
  window.addEventListener("click", onClick, false);
  
  
  function onClick() {
      alert("Replace me with code to add an object!");
  }
  
  var init = function () {
  
      renderer = new THREE.CanvasRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);
  
      camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
      camera.position.z = 500;
  
      scene = new THREE.Scene();
  
  geometry = new THREE.CubeGeometry(200, 200, 200);
  material = new THREE.MeshBasicMaterial({
                  color: 0x000000,
                  wireframe: true,
                  wireframeLinewidth: 2
              });
  
  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
  
  }
  
  var animate = function () {
  
      requestAnimationFrame(animate);
  
      mesh.rotation.x = Date.now() * 0.0005;
      mesh.rotation.y = Date.now() * 0.001;
  
      renderer.render(scene, camera);
  
  }
  
  init();
  animate();
  </code></pre>