济南网站建设方案报价北京网站建设报价表

2025.03.14今天我学习了如何对非全屏的模型实现点击到对应物体的位置，模型如下：

当我的模型是放在一个div里面的时候，要把window.innerWidth  和window.innerHeight属性全部改成对应的div宽高，

点击物体方法如下：

function onClick(event) {event.preventDefault();let mouse = new THREE.Vector2();let canvas = proxy.$refs.content;//获取div元素，我这边是vue3写法，proxy = thislet getBoundingClientRect = canvas.getBoundingClientRect();//获取点击物体的位置let x = ((event.clientX - getBoundingClientRect.left) / getBoundingClientRect.width) * 2 - 1;// 标准设备横坐标let y = -((event.clientY - getBoundingClientRect.top) / getBoundingClientRect.height) * 2 + 1;// 标准设备纵坐标let standardVector = new THREE.Vector3(x, y, 1);let worldVector = standardVector.unproject(camera);let ray = worldVector.sub(camera.position).normalize();let rayCaster = new THREE.Raycaster(camera.position, ray);rayCaster.params.Line.threshold = 0.01;//增加精确度let intersects = rayCaster.intersectObjects(scene.children, true);rayCaster.setFromCamera(mouse, camera);console.log(intersects)
}

 最主要的是getBoundingClientRect();方法用于获取点击物体的位置，找到对应的偏移位置，就可以计算拿到该物体的精确位置。