微信小程序中three.js的canvas非全屏情况下射线检测不准确问题解决方案

全屏情况下的射线检测函数一般是这样写的：

function onTouchstart(event) {
    var touch = event.touches[0];
    if (!touch) return;
    let mousePosition = new THREE.Vector2();
    mousePosition.x = (touch.x / wx.getSystemInfoSync().windowWidth) * 2 - 1;
    mousePosition.y = -(touch.y / wx.getSystemInfoSync().windowHeight) * 2 + 1;
    var raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(mousePosition, camera);
    let intersects = raycaster.intersectObjects(scene.children,true);
    if (intersects.length > 0) {
        console.log("检测到 ==", intersects[0].object);
        if (INTERSECTED != intersects[0].object) {
            if (INTERSECTED) INTERSECTED = intersects[0].object;
            return intersects[0].object;
        }
    } else {
        if (INTERSECTED)
            INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);

        INTERSECTED = null;
    }
}

当canvas非全屏时写法：

var canvasInfo;
 let query = wx.createSelectorQuery();
 query.select('#webgl').boundingClientRect((res) => {
    canvasInfo = res;
  }).exec();
function onTouchstart(event) {
  var touch = event.touches[0];
  if (!touch) return;
  let mousePosition = new THREE.Vector2();
  mousePosition.x = (touch.x / canvasInfo.width) * 2 - 1;
  mousePosition.y = -(touch.y / canvasInfo.height) * 2 + 1;
  var raycaster = new THREE.Raycaster();
  raycaster.setFromCamera(mousePosition, camera);
  let intersects = raycaster.intersectObjects(scene.children, true);
  if (intersects.length > 0) {
      console.log("检测到 ==", intersects[0].object.userData.name);
      if (INTERSECTED != intersects[0].object) {
          if (INTERSECTED) INTERSECTED = intersects[0].object;
          return intersects[0].object;
      }
  } else {
      if (INTERSECTED)
          INTERSECTED.material.emissive.setHex(INTERSECTED.currentHex);
      INTERSECTED = null;
  }
}