How to add an object to the three.js scene inside the click event handler?

Question

Given the three.js scene that is initialized on the finished document, how can I add a 3D object (like a simple cube) when the user fires the click event after the init () function is already running?

Here's a fiddle that already has a scene setup.

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(); 

Answer 1

Get item id

 var el = document.getElementById("element-id"); 

Add Event

 el.addEventListener("click", addCube, false); function addCube(){ var geometry = new THREE.CubeGeometry( 200, 200, 200 ); var material = new THREE.MeshBasicMaterial( { color: 0x000000 } ); var mesh = new THREE.Mesh( geometry, material ); //scene is global scene.add(mesh); } 

Or using jquery

 $(element).click(addCube); 

Answer 2

Here is a fiddle with a dynamically added cube with rotation:

 function addCube(){ var r = Math.random() + 0.5; var geometry = new THREE.CubeGeometry( 200 * r, 200 * r, 200 * r); var material = new THREE.MeshBasicMaterial( { color: 0x00FF00, wireframe: true, wireframeLinewidth: 2 } ); var mtmp = new THREE.Mesh( geometry, material ); meshes.push( mtmp ); //scene is global scene.add(mtmp); } 

---

 var animate = function () { requestAnimationFrame(animate); for (var i = 0; i < meshes.length; i++) { console.log(i); //scene.add(meshes[i]); meshes[i].rotation.x = Date.now() * 0.0005 * (1+i); meshes[i].rotation.y = Date.now() * 0.001 * (1+i); } renderer.render(scene, camera); } 

http://jsfiddle.net/Lkk1zhkt/2/