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

有认真看了一下官方文档，答案在此：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);
    }
  }
},