threejs的点击事件

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

        }

    }
}

上面就是一个标准的点击事件的方法，这里需要注意几点：

1. container是canvas的id名称,请换成自己的canvas。
2. clickObjects存储的都是mesh，对象实例，存储group是不会有反应的。
3. 在XXX被定义，生成的时候，调用scene.add(XXX)的时候，顺手一个clickObjects.push(XXX)，就可以实现监听了。
4. 捕捉到的监听数量不唯一，intersects返回的是一个数组，被该激光打中的所有对象都会存储在这个数组当中，选择你需要的提取出来下一步吧。
5. 即使点击空了，也会有点击回馈，intersects返回空数组。