如何在click事件处理程序中将对象添加到three.js场景？

Question

给定在文档就绪时初始化的three.js场景,当init()函数已经触发后用户触发click事件时,如何添加3D对象(如简单的多维数据集)？

这是一个已经有场景设置的小提琴.

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

获取元素ID

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

添加活动

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

或者使用jquery

$(element).click(addCube);