React-three-fiber: 🔮 V5: Milestones, Ideas, Suggestions, ...

[drcmda]

Pull request and beta versions: https://github.com/react-spring/react-three-fiber/pull/423

• [ ] It would be nice if r3f could also be used without react-dom (saves ~30kb)

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

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

• [x] Rewrite reconciler, optimize hot paths
• [x] Inline react-reconciler (again, faster hot paths) via closure-compiler
• [x] Remove bloat (<Dom />, { __$ } = useLoader, sRGB
• [x] colorManagement=true by default
• [x] auto-attach geometries and materials

<mesh>
  <planeBufferGeometry />
  <meshBasicMaterial />
</mesh>

• [x] https://github.com/react-spring/react-three-fiber/issues/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)

• [x] Fix crash with createPortal https://github.com/react-spring/react-three-fiber/pull/435
• [x] https://github.com/react-spring/react-three-fiber/issues/488 forceResize fn
• [x] Simplify useResource

const ref = useResource()

• [x] xhr and error-boundary support for useLoader

useLoader(
  Loader,
  url,
  extensions, // optional
  xhr => console.log((xhr.loaded / xhr.total * 100) + '% loaded'), // optional
)

• [x] primitives do not dispose

primitives are objects that are created imperatively, they should not be freed or disposed of by r3f.

previouly:

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} />

• [x] support for contextmenu & dblclick https://github.com/react-spring/react-three-fiber/pull/530
• [x] addAfterEffects (for global before and after render effects) https://github.com/react-spring/react-three-fiber/commit/0307a13455e9fed56c78a61e17ae26188cd182eb
• [x] 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)

[likethemammal]

There doesnt seem to be many helpers for animating the camera. I've had to step out of the framework and jsx to tween the camera position and it feels pretty hacky. It'd be amazing if the camera could be set and animated in JSX, so declarative animations and react-spring can be used.

[BryanChrisBrown]

@likethemammal I've had similar struggles with animating the camera.

[s3ththompson]

using react-three-fiber without react-dom would be huge! I can imagine plenty of use cases for this.

[drcmda]

@likethemammal you can animate the camera declaratively with react spring, but you need to set updateprojectionmatrix. Nothing in react should be animated via props though, that is an anti pattern.

R3f itself doesn't know what a camera is, it has no relation to threejs other than reconciling it, that's it's super power. If you want cameras to behave differently from threejs I think that's drei's scope.

Personally I like to animate things inside useFrame, lerping or trigonometric functions. It seems the easiest to me.

[kylejwatson]

Wasn't too sure if I should put this here or create a new issue for it but having an onProgress callback for useLoader would be great! Having a loading bar for big model loading is nicer than waiting for it to pop up.

[drcmda]

i think loading should eventually be part of suspense, it doesnt seem right that the component should handle it. but either way, i have added it. errors get thrown as well finally. it's up in v5-

[Will-Wrightwa]

There doesnt seem to be many helpers for animating the camera. I've had to step out of the framework and jsx to tween the camera position and it feels pretty hacky. It'd be amazing if the camera could be set and animated in JSX, so declarative animations and react-spring can be used.

@likethemammal
Check out https://www.npmjs.com/package/camera-controls
I think we should make a convenience wrapper component in drei I just haven't gotten around to it yet.

[s3ththompson]

@drcmda are you still interested in making react-dom optional for v5? any help needed on that front?

[drcmda]

Yes, very much, could need help for sure. I've completed many of the tasks I wanted to tackle and this this the big one that would need quite the rewrite.

[s3ththompson]

@drcmda what's your high-level vision for refactoring this? what happens to ResizeContainer for example? (happy to fork this discussion to a separate issue)

[drcmda]

events and resize observer would have to happen outside of react, essentially it would be

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

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

how events and resize happen, that i guess would be an interchangeable part of render(), because react-native has a different impl.

the state model that's currently kept in <Canvas /> would be in the renderer root (in renderer.tsx)

const roots = new Map<THREE.Object3D, Reconciler.FiberRoot>()

instead of Reconciler.FiberRoot it would be an object with the fiberroot and the state.