如何在React-three-fiber中设置射线投射

Question

我正在尝试在 react-three-fiber 中设置一个场景，使用射线检测它是否与对象相交。

我的场景：场景。

我一直在看像这个例子和这个其他的例子那样使用简单的三维物体的射线检测器的示例，但是它们都没有使用分离的组件 jsx ".gltf" 网格或者不包含在 jsx 中。所以我不确定如何将我的网格组添加到 "raycaster.intersectObject();" 中。

似乎你所要做的就是在不同变量中分别设置相机、场景和光线投射器，但我的相机和场景是 Canvas 组件的一部分。

问题：如何给我的场景添加射线检测支持？这会遮挡在球体相反侧上的文本。

谢谢！

- user14440113

---

射线投射用于指针事件显然是内置的，我猜你想直接使用射线投射器？如果是这样，那么有什么阻止你的呢？它的工作方式与普通的Three.js完全相同。你仍然有一个场景，可以通过引用访问其中的每个元素。 const ref = useRef() useEffect(() => { yourRaycaster.intersectObject(ref.current) ... }, []) return ... - hpalu

谢谢您的回复，我刚刚尝试了一下，将组引用放入intersectObjects()函数中，但控制台没有记录任何数组。是否可以对组网格进行光线投射？我如何知道光线投射器来自哪里？我应该在哪里调用这个useEffect？我应该把新的THREE.Raycaster()放在哪里？当模型旋转或相机重新定位时，这会自动调用吗？ - user14440113

根据教程，似乎需要找到场景中每个对象的位置。在 three.js 中，使用 .getWorldPosition()，但在 react 中，使用 refs 位置。然后需要使用投影在用户屏幕的 XY 轴上找到该向量的归一化位置。然后为每个对象的归一化屏幕位置投射一个单独的光线。如果它相交，则可见，否则不可见。现在我只需从最少的文档中弄清楚如何将其转换为 jsx。 - user14440113

Answer 1

这是我使用的方法。请注意，我使用了useState而不是useRef，因为我在后者方面遇到了问题。

const Template = function basicRayCaster(...args) {
  const [ray, setRay] = useState(null);
  const [box, setBox] = useState(null);
  useEffect(() => {
    if (!ray || !box) return;
    console.log(ray.ray.direction);
    const intersect = ray.intersectObject(box);
    console.log(intersect);
  }, [box, ray]);
  return (
    <>
      <Box ref={setBox}></Box>
      <raycaster
        ref={setRay}
        ray={[new Vector3(-3, 0, 0), new Vector3(1, 0, 0)]}
      ></raycaster>
    </>
  );
};

- Ahmed Aouaiti

---

请将代码和数据作为文本添加（使用代码格式），而不是图像。 图像：A）不允许我们复制和粘贴代码/错误/数据进行测试； B）不允许基于代码/错误/数据内容进行搜索；以及更多原因。 如果图像除了文本代码/错误/数据之外还有其他重要信息，则应该在文本代码格式之外仅使用图像。 - Suraj Rao

Answer 2

尝试使用Drei库中的CycleRayCast。它与react-three-fiber兼容。

“此组件允许您循环浏览光标下所有对象，并提供可选的视觉反馈。这对于非平凡选择、CAD数据、房屋以及所有具有图层的内容非常有用。它通过更改射线投射器的过滤函数，然后刷新射线投射器来实现此目的。”

- sugaith

Answer 3

您可以从useThree中检索raycaster。

以下是修改射线投射器阈值的示例：

  const { raycaster } = useThree();
  useEffect(() => {
    if (raycaster.params.Points) {
      raycaster.params.Points.threshold = 0.1;
    }
  }, []);

完成后，您可以修改其属性或使用它

- TheKalashnikov