Three.js 3D模型点击素材偏移问题解决方法？-灵析社区

七厦

threejs的3D模型，点击素材，获取点击的素材对象，偏移问题怎么解决。总是不对 window.addEventListener("click", this.initClick, false); .... initClick(event) { const webgl = document.getElementById('webgl'); const webglData = webgl.getBoundingClientRect(); const px = event.offsetX; const py = event.offsetY; //屏幕坐标转标准设备坐标 const mouse = new THREE.Vector2(); const x = ((px - webglData.left) / webgl.offsetWidth) * 2 - 1; const y = -((py - webglData.top) / webgl.offsetHeight) * 2 + 1; const raycaster = new THREE.Raycaster(); //.setFromCamera()在点击位置生成raycaster的射线ray raycaster.setFromCamera(new THREE.Vector2(x, y), this.camera); // 射线交叉计算拾取模型 const intersects = raycaster.intersectObjects(this.material.list); if (intersects.length > 0) { // 处理点击事件 // intersects[0] 包含了第一个交点 const clickedObject = intersects[0].object; //通过点击到该模型用名字匹配 if (clickedObject.name === clickedObject.name) { console.log("点击了:", clickedObject.name); } } }, 百度

阅读量：14

点赞量：0

问AI
有认真看了一下官方文档，答案在此： "Canvas尺寸变化(射线坐标计算)" (https://link.segmentfault.com/?enc=%2FA8mvgwyIRjcvoGTni7xwg%3D%3D.sIpOdGQAkr%2B5ivblRovx85eDRMQL%2BPE33jVJ5Y0YDnXg%2BHzHGi494pQNGc2ukf6R) 不能盲目抄度娘出来的答案，要么需求不一样，要么..... initClick(event) { const px = event.offsetX; const py = event.offsetY; const webgl = document.getElementById('webgl'); const webglData = webgl.getBoundingClientRect(); const width = webglData.width; const height = webglData.height; // 画布跟随窗口变化（我们不变，但是画布不是全屏的，所以可以理解为变了1次） this.renderer.setSize(width, height); this.camera.aspect = width / height; this.camera.updateProjectionMatrix(); //屏幕坐标转标准设备坐标 const x = (px / width) * 2 - 1; const y = -(py / height) * 2 + 1; const raycaster = new THREE.Raycaster(); //.setFromCamera()在点击位置生成raycaster的射线ray raycaster.setFromCamera(new THREE.Vector2(x, y), this.camera); // 射线交叉计算拾取模型 const intersects = raycaster.intersectObjects(this.material.list); if (intersects.length > 0) { // 处理点击事件 // intersects[0] 包含了第一个交点 const clickedObject = intersects[0].object; //通过点击到该模型用名字匹配 if (clickedObject.name === clickedObject.name) { console.log("点击了:", clickedObject.name); } } },