如何在autodesk查看器中捕获mesh Three.js中的点击？

Question

我在 Revit 模型中标记了这个球体，我基本上想捕获对它们的单击并显示其详细信息。 我遵循了这个问题：如何在 Threejs 中为网格添加事件？，但是，当我单击某些内容时，我收到此错误：“THREE.Raycaster：不支持的相机类型。”

我的代码：

 issues.results.map((issue) => {

    //ADDING SPHERES INTO MODEL

    const x = issue.linkedDocuments[0].details.position.x;
    const y = issue.linkedDocuments[0].details.position.y;
    const z = issue.linkedDocuments[0].details.position.z;

    let geom = new THREE.SphereGeometry(2, 32, 16);
    let material = new THREE.MeshBasicMaterial({
      color: 0xff8000,
    });

    let circle = new THREE.Mesh(geom, material);
    circle.position.set(x, y, z);
    viewer_exports.overlays.addMesh(circle, "custom-scene");
    
    // TRYING TO CAPTURE ON CLICK

    let camera = viewer_exports.getCamera();
    let raycaster = new THREE.Raycaster();
    let mouse = new THREE.Vector2();

    function onMouseMove(event) {
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
    }

    function onMouseClick(event) {
      raycaster.setFromCamera(mouse, camera);
      let isIntersected = raycaster.intersectObject(circle);
      if (isIntersected) {
        console.log("Mesh clicked!");
      }
    }

    window.addEventListener("click", onMouseClick, false);
    window.addEventListener("mousemove", onMouseMove, false);
  });

我还尝试将“camera.perspectiveCamera”传递给“raycaster.setFromCamera(mouse,camera);”，错误没有出现，但正在记录“Mesh clicked!”我在屏幕中单击的任何位置，甚至在模型之外。

这是我在日志中的相机类型：

我也读了这个任务：单击叠加场景中自定义几何体的侦听器 - Autodesk Forge Viewer 以及答案中的所有链接，最重要的是：在 Forge Viewer 中沿着模型组件处理自定义网格选择，但是我不知道如何使用它。

我还看到了Raycaster源码：

这意味着不支持统一摄像头，所以我必须更改查看器摄像头类型吗？

我还看到Viewer有改变相机的功能，但只支持Unified Camera：

Answer 1

您可以使用 clientToWorld 方法响应单击事件以获取单击的点和几何图形。

NOP_VIEWER.container.addEventListener('click', function (ev) {
  const result = NOP_VIEWER.clientToWorld(ev.clientX, ev.clientY);
  if (result) {
    console.log(result.point);
  }
});