How can I add an object to a three.js scene inside a click event handler?

javascript, three.js

Solution

Get element 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 with jquery

$(element).click(addCube);

Problem

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? Here's a fiddle that already has the 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(); ```

Original source