THREEJS - 点击/拾取

在三维场景中，我们经常会遇到点击拾取事件，例如点击某个模型，模型变色等等，常规的点击事件声明是：

container.addEventListener('click', onDocumentMouseDown, false);

但是这种点击事件，当你切换至移动端时，你就会发现点击事件失效了，这时候我们需要定义的点击事件是：

container.addEventListener('touchstart', onDocumentMouseDown, false);

所以，我们在写点击拾取的时候，可以综合以上两种事件，结合的代码如下：

// 添加监听事件
container.addEventListener('click', onDocumentMouseDown, false); // PC端
container.addEventListener('touchstart', onDocumentMouseDown, false); // 移动端

// 点击交互函数
function onDocumentMouseDown(event) {
    let mouseVector = new THREE.Vector3();
    let x, y;
    if (event.touches) { // 判断是否是客户端的touch事件
        x = (event.touches[0].pageX / window.innerWidth) * 2 - 1;
        y = -(event.touches[0].pageY / window.innerHeight) * 2 + 1;
    } else {
        x = (event.layerX / window.innerWidth) * 2 - 1;
        y = -(event.layerY / window.innerHeight) * 2 + 1;
    }
    mouseVector.set(x, y, 0.5);
	const raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mouseVector, camera);
    let intersects = raycaster.intersectObjects(intersectsObjs, true);
    if (intersects.length > 0) {
        control.attach(intersects[0].object);
        intersects[0].object.traverse(child => {
            if (child.isMesh) {
                child.material.color.set(0xffffff);
            }
        });
    } else {
        control.detach();
    }
    renderer.render(scene, camera);
}