Movement regression allows your application to maintain a fluid framerate by reducing visual quality (e.g., lowering resolution, disabling shadows, or skipping post-processing) when the scene is active or moving.
React Three Fiber provides a performance object in the state to manage this. You must implement two parts:
- Triggering: Call
regress() when movement is detected (e.g., on mouse move or camera control changes). - Responding: Listen to the
performance.current value to scale your visual settings. A value of 1 is full quality; a value less than 1 (down to your configured min) indicates a request to scale down.
Note: Simply calling regress() does nothing by itself; your components must explicitly react to the current value.
// 1. Configure the Canvas with a performance floor
<Canvas performance={{ min: 0.5 }}>
{/* 2. A component that responds to the regression
It scales the pixel ratio based on the 'current' factor
*/}
<AdaptivePixelRatio />
<Scene />
</Canvas>
// Example of the Adaptive component
function AdaptivePixelRatio() {
const current = useThree((state) => state.performance.current)
const setPixelRatio = useThree((state) => state.setDpr)
useEffect(() => {
setPixelRatio(window.devicePixelRatio * current)
}, [current])
return null
}
// Example of triggering regression via controls
function Scene() {
const regress = useThree((state) => state.performance.regress)
const controls = useRef()
useEffect(() => {
// Call regress whenever the controls change (e.g., user is rotating the camera)
controls.current?.addEventListener('change', regress)
return () => controls.current?.removeEventListener('change', regress)
}, [regress])
return <OrbitControls ref={controls} />
}
