CODEWITHSUNDEEP
javascriptreactjsthree.jsreact-three-fiber
user14440113
user14440113

Reputation:

How to Set-up Raycasting in React-three-fiber

I am trying to set up a scene in react-three-fiber that uses a raycaster to detect if an object intersects it.

My Scene: scene

I have been looking at examples like this example and this other example, of raycasters that use simple three objects but don't utilize separated component jsx ".gltf" meshes or their not in jsx. So I'm not sure how to add my group of meshes to a "raycaster.intersectObject();".

It seems that all you do is set up your camera, scene, and raytracer separately in different variables, but my camera and scene are apart of the Canvas Component.

Question: How do I add raycasting support to my scene? This would obscure the text that is on the opposite side of the sphere.

Thanks!

Upvotes: 6

Views: 10529

Answers (3)

TheKalashnikov
TheKalashnikov

Reputation: 391

You can retrieve the raycaster from useThree.

Example to modify the raycaster threshold for points onMount:

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

Once done you are enable to modify its properties or to use it

Upvotes: 0

Ahmed Aouaiti
Ahmed Aouaiti

Reputation: 11

This is the approach I used. Note that I used useState instead of useRef", since I had problems with the latter

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

Upvotes: 1

sugaith
sugaith

Reputation: 964

Try CycleRayCast from Drei lib. It is react-three-fiber-friendly

"This component allows you to cycle through all objects underneath the cursor with optional visual feedback. This can be useful for non-trivial selection, CAD data, housing, everything that has layers. It does this by changing the raycasters filter function and then refreshing the raycaster."

Upvotes: 0

Related Questions