Note
Reduce Jitter in React Three Fiber Without Raising FPS
How do you reduce jitter in a React Three Fiber scene without raising the frame rate?
Find the per-frame work that changes what's on screen and run it less often. In Antarang's walkable 3D museum, the centre-screen raycast that decides which artwork you're focused on ran every frame; throttling it to about ten times a second made the gallery feel smoother than any frame-rate tuning did.
Jitter isn't the same as low FPS
A scene can hold 60 frames per second and still feel jittery. The usual cause is state that flips back and forth between frames: a focus highlight toggling as the crosshair sits on the edge of a frame, a label re-rendering, a React state update every frame that re-renders part of the tree. Each frame is on time; the content is unstable.
Throttle the raycast
A raycast every frame is both expensive and twitchy. Accumulate time in useFrame and only cast when enough has passed — and only set React state when the focused object actually changes:
// illustrative — the pattern, not Antarang's exact source
const raycaster = new THREE.Raycaster();
const centre = new THREE.Vector2(0, 0);
let acc = 0;
useFrame((state, delta) => {
acc += delta;
if (acc < 0.1) return; // ~10 checks per second
acc = 0;
raycaster.setFromCamera(centre, state.camera);
const hit = raycaster.intersectObjects(artworks, false)[0];
const id = hit?.object.userData.id ?? null;
if (id !== focusedRef.current) { // update state only on change
focusedRef.current = id;
setFocused(id);
}
});Then hold the frame rate cheaply
Once the jitter is gone, protect the frame rate on weaker GPUs instead of chasing it everywhere: Antarang caps the device pixel ratio (to 1.8), uses drei's PerformanceMonitor and AdaptiveDpr to lower resolution under load, code-splits the 3D gallery out of the first page load, and turns off decorative motion (dust motes, head-bob) under reduced-motion settings.