v6.2.3

RELEASING: Releasing 2 package(s)

Releases:
  @react-three/[email protected]
  @react-three/[email protected]

[skip ci]

v6.0.13

fix obj.set | up

6.x

Monorepo

--- npm install react-three-fiber
+++ npm install @react-three/fiber

Features

• Use r3f without react-dom (saves ~30kb)

import React from 'react'
import { render } from 'react-three-fiber'

render(<mesh />, document.getElementById('canvas'), { shadows: true, ... })

• Moving to zustand for reactive internal state

// Fetches everything, renders on every change to the state model, no breaking change ...
const state = useThree()
// Fetches specific parts, renders only when these change
const camera = useThree(state => state.camera)

• Adaptive pixelratio to allow scaling down resolution on movement for expensive scenes etc

// Since zustand drives state, pixelratio is now reactive
const pixelRatio = useThree(state => state.pixelRatio)

• Opt in adaptive performance

This is an opt in feature that makes it possible to create components that could be dropped into the scene that will reduce visuals if the system is in regression, similar to what Sketchfab does (lower textures, fbo's etc on camera movement and so on).

#1070

• Object shortcuts (specifically objects that feature setScalar)

<mesh position={0} scale={1} rotation={Math.PI} />

• Clock control

<Canvas frameloop='always' | 'demand' | 'never'

• always, game loop
• demand, on prop changes, invalide and a forced first render
• never, no invalidation

import { advance } from 'react-three-fiber'

// Render a single frame, we can inject custom timestamps 
advance(Date.now())

• Unit testing, snapshots, expecting scene outcome, act

https://github.com/pmndrs/react-three-fiber/tree/master/packages/test-renderer

• Fix prop delete in HMR and otherwise

#996

Removal of useUpdate

Instead, use:

const ref = useRef()
useLayoutEffect(() => ref.currrent = ..., [condition])

or

<mesh onUpdate={didUpdate} />

Removal of useResource

Instead, use:

const [material, set] = useState()
return (
  <>
    <meshBasicMaterial ref={material} />
    {material && <Foo material={material}>}
  </>
)

Changed

• pixelRatio -> dpr
• colorManagement={false} -> linear
• noEvents={true} -> state.raycaster,.enabled = false
• shadowMap -> shadows
• invalidateFrameloop -> frameloop='demand'

v5.0.0 release

• 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)

v4.1.0

https://twitter.com/0xca0a/status/1251958966176886784

v2.0.0

Breaking changes

• I recommend importing three from 'three' instead of 'three/src/Three', the lib pulls the former
• Name attachments have been changed, see: https://github.com/drcmda/react-three-fiber#objects-and-properties
• Events have been changed to pointer events, see: https://github.com/drcmda/react-three-fiber#events