pmndrs/react-three-fiber v6.0.0

6.x

on GitHub

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'