- Rewrite reconciler, optimize hot paths
- Inline react-reconciler (again, faster hot paths) via closure-compiler
- Remove bloat (
<Dom />,{ __$ } = useLoader,sRGB - Color Management by default
- Webgl2 by default
- Auto-attach geometries and materials
<mesh>
<planeBufferGeometry />
<meshBasicMaterial />
</mesh>- #429
viewport(), calculates precise viewport bounds + distance
Current viewport is responsive to screen resize, that makes no sense because the viewport is reliant on the camera position. If the camera changes/moves, the last viewport is obsolete.
viewport.width/height/etc will still work as always, but calling it as a function gives you recalculated, fresh values.
const { viewport } = useThree()
const { width, height, factor, distance } = viewport(optionalTarget)const ref = useResource()- Xhr and error-boundary support for useLoader
Crashes in loaders were previously swallowed, these will now throw so that you can catch then properly with error-boundaries. You also can tap into the loading process.
useLoader(
Loader,
url,
extensions, // optional
xhr => console.log((xhr.loaded / xhr.total * 100) + '% loaded'), // optional
)- Primitives do not dispose
Primitives are objects that are created imperatively, they should not be freed or disposed of by r3f.
Previously:
return <primitive object={scene} dispose={null} />V5:
return <primitive object={scene} />In the unlikely case that you do want to dispose a primitive (i would be OK with not documenting that at all, primitives should normally not be touched by r3f):
return <primitive object={scene} dispose={undefined} />- Support for contextmenu & dblclick #530
- addAfterEffects (for global before and after render effects) 0307a13
- Preloading assets
R3f uses use-asset instead of react-promise-suspense, which has better cache busting strategies and preload support.
import { useLoader } from "react-three-fiber"
useLoader.preload(GLTFLoader, url)