Javascript 如何将对象添加到单击事件处理程序中的three.js场景中?
给定一个在document ready上初始化的three.js场景,当用户在init()函数启动后触发单击事件时,如何添加3D对象(例如简单的立方体) 这是一个已经有场景设置的场景Javascript 如何将对象添加到单击事件处理程序中的three.js场景中?,javascript,three.js,Javascript,Three.js,给定一个在document ready上初始化的three.js场景,当用户在init()函数启动后触发单击事件时,如何添加3D对象(例如简单的立方体) 这是一个已经有场景设置的场景 var camera, scene, renderer; var geometry, material, mesh; window.addEventListener("click", onClick, false); function onClick() { alert("Replace me wit
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);
这是一个动态添加旋转立方体的小提琴:
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=函数(){
请求动画帧(动画);
对于(var i=0;i
这很明显。我在这方面遇到了麻烦,因为我没有正确地暴露
场景
。值得一提的是,我让它在这里工作,尽管新的立方体没有旋转:天啊,知道场景是全局的真的很有帮助。。。谢谢你,解决了另一个问题,帮助我两次发帖。。。摄影机和渲染器也是全局的吗?我会发现:)
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);
}