点击模型并获取当前点击位置高度

1：添加点击事件

    window.addEventListener('click', this.onMouseClick, false);

2：在点击事件中获取具体信息

    // 监听鼠标点击事件
    onMouseClick(event) {
        event.preventDefault();
        this.currentPartition = {}
        this.showHeight = false;
        // console.log(event)
        // 将鼠标位置转换成归一化设备坐标(-1 到 +1)
        // this.elem.clientWidth, this.elem.clientHeight
        // let x = event.clientX  - (window.innerWidth - this.elem.clientWidth)
        // let y = event.clientY  - (window.innerHeight - this.elem.clientHeight)
        // mouse.x = (  event.clientX / window.innerWidth ) * 2 - 1;
        // mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
        // console.log('event.clientY')
        // console.log(event)
        this.mouseTop = event.clientY-renderer.domElement.getBoundingClientRect().top +'px';
        this.mouseLeft = event.clientX-renderer.domElement.getBoundingClientRect().left+3+'px';
        const mouse = new THREE.Vector2();
        // 转换为webgl坐标系下的鼠标位置
        mouse.x = ((event.clientX - renderer.domElement.getBoundingClientRect().left) / renderer.domElement.clientWidth) * 2 - 1;
        mouse.y = -((event.clientY - renderer.domElement.getBoundingClientRect().top) / renderer.domElement.clientHeight) * 2 + 1;
        // console.log(mouse)
        // // 使用鼠标位置更新射线投射器
        raycaster.setFromCamera(mouse, camera);
        
        // // 计算鼠标点击的所有物体
        const intersects = raycaster.intersectObjects(scene.children, true);
        
        // 如果有物体被点击，输出它的信息
        if (intersects.length > 0) {
            // 获取最近的交点对象和交点坐标
            const intersect = intersects[0];
            const point = intersect.point; // 交点在世界坐标中的位置
            const object = intersect.object; // 被点击的对象
            const distanceToCamera = intersect.distance; // 从相机到交点的距离（可以用来计算高度）
            // console.log('Clicked on object:', object);
            // console.log('Intersection  ---------------  point:');
            // console.log(point);
            this.mouseCurrentHeight = parseInt(parseFloat((point.z-2.2).toFixed(2)) * 100) / 100;// Math.floor(point.z-1);
            this.showHeight = true;
            // if(this.timerHeight){
            //     clearInterval(this.timerHeight)
            // }
            // this.timerHeight = setInterval(()=>{
            //     this.showHeight = false;
            //     clearInterval(this.timerHeight)
            // },1500)
            // console.log('Distance to camera:', distanceToCamera);
            
            // // 如果需要计算高度，可以这样做：
            // // 假设相机位于y=0的位置，则可以计算高度为：point.y - cameraPosition.y;
            // const cameraPosition = new THREE.Vector3();
            // camera.getWorldPosition(cameraPosition);
            // const height = point.y - cameraPosition.y; // 注意：这取决于你的场景设置，可能需要调整以适应实际情况。
            // console.log('Height from camera:', height);
            return
            // // 取第一个被点击的物体
            // let intersect = null;
            // console.log('输出被点击的物体信息');
            // intersects.forEach((ele) => {
            //     // console.log('ele');
            //     // console.log(ele);
            //     // if(ele.object.name == "partitionName"){
            //         intersect = ele;
            //     // }
            // })
            // if(intersect){
            //     // 输出被点击的物体信息
            //     console.log('输出被点击的物体信息');
            //     console.log(intersect.object);
            //     // if(intersect.object.partitionInfo.volume){
            //     //     intersect.object.partitionInfo.volume = Number(intersect.object.partitionInfo.volume).toFixed(2)
            //     // }
            //     // this.currentPartition = { ...intersect.object.partitionInfo }
            //     // console.log(intersects);
            // }
            // 你可以获取更多的信息，例如点的位置、面的法线等
            // console.log(intersect.point);
            // console.log(intersect.face.normal);
        }
    },

备住：由于我这里展示3d模型的区域不是全屏所以点击时候做了处理需要转化一下坐标系。代码如下：

        this.mouseTop = event.clientY-renderer.domElement.getBoundingClientRect().top +'px';
        this.mouseLeft = event.clientX-renderer.domElement.getBoundingClientRect().left+3+'px';
        const mouse = new THREE.Vector2();
        // 转换为webgl坐标系下的鼠标位置
        mouse.x = ((event.clientX - renderer.domElement.getBoundingClientRect().left) / renderer.domElement.clientWidth) * 2 - 1;
        mouse.y = -((event.clientY - renderer.domElement.getBoundingClientRect().top) / renderer.domElement.clientHeight) * 2 + 1;
        // console.log(mouse)