threeJS的点击，原理很简单。
将需要添加点击事件的对象放在一个数组里，生成点击事件。用户点击屏幕的时候，threejs会根据视角从触碰点会发射一条“激光”，激光扫到的所有记录在数组里的对象，都被会捕捉到。
var clickObjects=[];
clickObjects.push(obj1);
function initThreeClickEvent() {
//点击射线
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
document.getElementById("container").addEventListener('mousedown', onDocumentMouseDown, false);
function onDocumentMouseDown(event) {
event.preventDefault();
mouse.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;
mouse.y = -(event.clientY / renderer.domElement.clientHeight) * 2 + 1;
raycaster.setFromCamera(mouse, camera);
//总结一下，这里必须装网格，mesh，装入组是没有效果的
//所以我们将所有的盒子的网格放入对象就可以了
// 需要被监听的对象要存储在clickObjects中。
var intersects = raycaster.intersectObjects(clickObjects);
// console.log(intersects)
if(intersects.length > 0) {
// 在这里填写点击代码
console.log("dianji");
console.log(intersects[0].object)
showDetailPage(intersects[0].object.name);
}
}
}
上面就是一个标准的点击事件的方法，这里需要注意几点：
- container是canvas的id名称,请换成自己的canvas。
- clickObjects存储的都是mesh，对象实例，存储group是不会有反应的。
- 在XXX被定义，生成的时候，调用scene.add(XXX)的时候，顺手一个clickObjects.push(XXX)，就可以实现监听了。
- 捕捉到的监听数量不唯一，intersects返回的是一个数组，被该激光打中的所有对象都会存储在这个数组当中，选择你需要的提取出来下一步吧。
- 即使点击空了，也会有点击回馈，intersects返回空数组。
