微信小程序中three.js的canvas非全屏情况下射线检测不准确问题解决方案_three.js 局部盒子,非全屏,点击触发物体检测位置不准确-CSDN博客

本文链接：https://blog.csdn.net/qq_34568700/article/details/125411485

这篇博客详细介绍了在Three.js中使用射线检测进行交互操作的方法，分别展示了全屏和非全屏情况下如何获取鼠标触摸位置并进行物体检测。在全屏模式下，通过窗口宽度和高度调整坐标；非全屏时，利用wx.getSystemInfoSync()或SelectorQuery获取canvas尺寸来计算。示例代码展示了如何设置Raycaster和处理检测结果。

摘要由CSDN通过智能技术生成

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

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