Skip to content

v5.0.0 release
Compare
Choose a tag to compare
@drcmda drcmda released this 24 Sep 12:32
· 1457 commits to master since this release
v5.0.0
8b07c7a
  • 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)
  • Fix crash with createPortal #435
  • #488 forceResize fn
  • Simplify useResource 
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)
Assets 2
Loading