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

admin管理员组

文章数量:1291144

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

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

• javascript
• three.js

Share Improve this question Follow edited Aug 17, 2013 at 22:02 asked Aug 17, 2013 at 21:46 user396070user396070

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

here is a fiddle with dynamic 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/Lkk1zhkt/2/

本文标签： javascriptHow can I add an object to a threejs scene inside a click event handlerStack Overflow