Call async function in Three.js useFrame?

Question

I need to make a fetch call when the camera’s position crosses a threshold. I need the function to be callable again, but not until after 1000ms has passed.

Ideally this would happen immediately, but a small delay is tolerable. My main concern is performance as I’m rendering a very complex scene.

import { useMemo, useEffect } from "react";
import { useThree, useFrame } from "@react-three/fiber";
import throttle from "lodash/throttle";

export default function Component() {
  const { camera } = useThree();

  const throttledFetch = useMemo(
    () =>
      throttle(
        (positionY: number) => {
          fetch(`/something?positionY=${positionY}`).then((res) => {
            console.log(res);
          });
        },
        1000,
        { leading: true, trailing: false }
      ),
    []
  );

  useFrame(() => {
    if (camera.position.y < 1.5) {
      throttledFetch(camera.position.y);
    }
  });

  useEffect(() => {
    return () => {
      throttledFetch.cancel();
    };
  }, [throttledFetch]);

  return null;
}

This code works, but is it a sensible approach?

Could you be more specific, I mean what of sense you are writing at? Other thing, performance is quite big topic, could you make working example with scene, and potential performance issues etc, in your specific scenario? — Łukasz Daniel Mastalerz
– Łukasz Daniel Mastalerz, Commented May 5 at 17:22
@ŁukaszDanielMastalerz my actual logic involves fetching and displaying more data based on the camera's position. I simplified it as im specifically interested in performance considerations when you need fetch requests triggered by the useFrame hook, as I know it's called many times per second. — Evanss
– Evanss, Commented May 6 at 7:36
@Evanss I appreciate this a ReactJS project but added the "Javascript" tag to get a usable Answer from other possible sources. — VC.One
– VC.One, Commented May 7 at 14:03
Is there any specific reason why you want to make API call every frame if position.y is lower than 1.5? It will make so many calls, even if you use throttle. — mrconcerned
– mrconcerned, Commented May 9 at 13:53
@mrconcerned I simplified my actual code, which is fetching more data for LOD rendering based on the camera's position. The essence of my query is what considerations are there when triggering a fetch requests in the useFrame function. — Evanss
– Evanss, Commented May 12 at 11:40

Sumod Sivadas · Accepted Answer · 2025-05-12 07:36:04Z

0

Minimal improvement using a useRef instead of lodash.throttle Avoids an external dependency and keeps control tight.

import { useRef } from "react";
import { useThree, useFrame } from "@react-three/fiber";

export default function Component() {
  const { camera } = useThree();
  const lastCall = useRef(0);

  useFrame(() => {
    if (camera.position.y < 1.5) {
      const now = Date.now();
      if (now - lastCall.current > 1000) {
        lastCall.current = now;
        fetch(`/something?positionY=${camera.position.y}`).then(res => {
          console.log(res);
        });
      }
    }
  });

  return null;
}

answered May 12 at 7:36

Sumod Sivadas

3943 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Call async function in Three.js useFrame?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related