给定一个在文档就绪时初始化的 three.js 场景,当用户在 init() 函数已经触发后触发点击事件时,我如何添加一个 3D 对象(例如一个简单的立方体)?
这是一个 fiddle已经有场景设置。
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();
最佳答案
获取元素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);
关于javascript - 如何将对象添加到单击事件处理程序内的 three.js 场景?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18293593/