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

Question

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);
    }
  }
},

百度

Answer 1

有认真看了一下官方文档，答案在此：
Canvas尺寸变化(射线坐标计算)
不能盲目抄度娘出来的答案，要么需求不一样，要么.....

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);
    }
  }
},