【Three.js】十、three.js场景中物体的选择

利用THREE.Raycaster(光线投射)进行物体的选择。

使用方式：

let vector = new THREE.Vector2((event.clientX/window.innerWidth) * 2 -1,(event.clientY/window.innerHeight) * 2 + 1);
let raycaster = new THREE.Raycaster();
// 使用一个新的原点和方向来更新射线。
raycaster.setFromCamera(vector, camera);
// 检测所有在射线与这些物体之间，包括或不包括后代的相交部分。返回结果时，相交部分将按距离进行排序，最近的位于第一个）
// .intersectObjects ( objects : Array, recursive : Boolean, optionalTarget : Array ) : Array
// objects —— 检测和射线相交的一组物体。
// recursive —— 若为true，则同时也会检测所有物体的后代。否则将只会检测对象本身的相交部分。默认值为false。
// optionalTarget —— （可选）设置结果的目标数组。如果不设置这个值，则一个新的Array会被实例化；如果设置了这个值，则在每次调用之前必须清空这个数组（例如：array.length = 0;）。
let intersects = raycaster.intersectObjects([sphere, box]);

使用鼠标选择场景中的物体示例：

	let INTERSECTED, vector = new THREE.Vector2();
    function render(){
        stats.update();
        trackballControls.update();
        let raycaster = new THREE.Raycaster();
        raycaster.setFromCamera(vector, camera);
        let intersects = raycaster.intersectObjects( scene.children.filter(item => item instanceof THREE.Mesh && item.name !== 'plane'));
        if (intersects.length > 0) {
            let obj = intersects[0].object;
            if (INTERSECTED !== obj) {
                INTERSECTED && INTERSECTED.material.color.setHex(INTERSECTED.currentColor)
                INTERSECTED = obj;
                INTERSECTED.currentColor = obj.material.color.getHex();
                intersects[0].object.material.color.set(0xff0000);
            }
        } else {
            INTERSECTED && INTERSECTED.material.color.setHex(INTERSECTED.currentColor);
            INTERSECTED = null;
        }
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }
    function mousedown(event){
        vector.x = (event.clientX / window.innerWidth) * 2 - 1;
        vector.y = - (event.clientY / window.innerHeight) * 2 + 1;
    }
    render();
    document.addEventListener('mousemove', mousedown);

完整示例参考(src/pages/three_selectObject_demo)：https://github.com/MAXLZ1/threejs_demo