three.js监听点击模型事件

three.js监听模型事件是通过THREE上的Raycaster方法实现的

原理是通过获取相机和鼠标点击时的位置，计算并返回一条射线上的模型队列

            //获取鼠标坐标 处理点击某个模型的事件
            let mouse = new THREE.Vector2();
            let raycaster = new THREE.Raycaster();
            console.log(scene);
            function onmodelclick(event) {
                mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
                mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

                raycaster.setFromCamera(mouse, camera);
                const intersects = raycaster.intersectObjects(scene.children);
                console.log(intersects);
                //在计算的射线上的模型全部变红
                // for (var i = 0; i < intersects.length; i++) {
                //     intersects[i].object.material.color.set(0xff0000);
                // }
                //点击的第一个模型变红
                intersects[0].object.material.color.set(0xff0000);

            }
            window.addEventListener("click", onmodelclick);