如何在React三光纤中设置光线投射

Question

我正试图在react three光纤中设置一个场景，该场景使用光线投射器来检测物体是否与之相交。

我的场景：场景

我一直在看像这个例子和另一个例子这样的例子，光线投射器使用简单的三个对象，但不使用分离的组件jsx；。gltf"；网格或它们不在jsx中。所以我不知道如何将我的网格组添加到"；raycaster.intersectObject((&"；。

您所做的似乎只是在不同的变量中分别设置相机、场景和光线跟踪器，但我的相机和场景是画布组件的一部分。

问题：如何将光线投射支持添加到场景中？这会使球体另一侧的文本模糊不清。

谢谢！

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

Answer 2

尝试Drei-lib中的CycleRayCast。它是反应三纤维友好

"该组件允许您使用可选的视觉反馈循环浏览光标下的所有对象。这对于非琐碎的选择、CAD数据、房屋、所有有图层的东西都很有用。它通过更改光线投射器过滤器功能，然后刷新光线投射器来完成此操作">

Answer 3

您可以从useThree中检索raycaster。

修改Mount:上点的光线投射器阈值的示例

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

一旦完成，您就可以修改其属性或使用