[英]How can I add an object to a three.js scene inside a click event handler?
给定在文档就绪时初始化的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();
获取元素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 = 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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.