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

我试图在react three fiber中设置一个场景，该场景使用光线投射器来检测对象是否与它相交

我的场景：

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

看起来您所做的只是在不同的变量中分别设置摄影机、场景和光线跟踪器，但我的摄影机和场景是画布组件的一部分

问题：如何向场景添加光线投射支持？这将模糊球体另一侧的文本

---

谢谢

指针事件的光线投射显然是内置的，我想你想按原样使用光线投射器？在这种情况下，是什么阻止了你？它的工作方式与普通3JS中的工作方式完全相同。您仍然有一个场景，可以通过参照访问其中的每个元素<代码>jsx const ref=useRef（）useffect（（）=>{yourRaycaster.intersectObject（ref.current）…}，[]）返回感谢您的响应，我刚才尝试过将group ref放入intersectObjects（）函数及其控制台中。在数组中不记录任何内容。是否可以对网格进行光线投射组？我怎么知道raycaster是从哪里来的？我把这种效应称为什么？我应该把新的3.Raycaster（）放在哪里？当模型旋转或相机重新定位时，是否会自动调用此函数？根据教程，似乎需要找到场景中每个对象的位置。在three.js中使用.getWorldPosition（），但在react中使用refs位置。然后，您需要使用投影在用户屏幕的XY轴上找到该向量的标准化位置。然后为每个对象的标准化屏幕位置投射一条单独的光线。如果它相交，那么它是可见的，如果不相交，那么它是不可见的。现在，我只需要找出如何从最少的文档中将其转换为jsx。