chore(deps): bump @react-three/fiber to ^8.0.0 #36

This release implements a context bridge within Canvas, enabling R3F children to consume context between renderers (e.g. react-dom or react-native), and removing the need for manually bridging context.

import * as React from 'react'
import * as ReactDOM from 'react-dom/client'
import { Canvas } from '@&#8203;react-three/fiber'

const DOMContext = React.createContext()

function Component() {
  // "Hello from react-dom"
  console.log(React.useContext(DOMContext))
}

ReactDOM.createRoot(document.getElementById('root')).render(
  <DOMContext.Provider value="Hello from react-dom">
    <Canvas>
      <Component />
    </Canvas>
  </DOMContext.Provider>,
)

Full Changelog: pmndrs/react-three-fiber@v8.7.4...v8.8.0

`v8.7.4`

Compare Source

What's Changed

fix: use self to get global context before window by @joewhatkins in https://github.com/pmndrs/react-three-fiber/pull/2493

New Contributors

@joewhatkins made their first contribution in https://github.com/pmndrs/react-three-fiber/pull/2493

Full Changelog: pmndrs/react-three-fiber@v8.7.2...v8.7.4

`v8.7.3`

Compare Source

What's Changed

fix: eventsource pointer events by @drcmda in f26cd95

Full Changelog: pmndrs/react-three-fiber@v8.7.2...v8.7.3

`v8.7.2`

Compare Source

What's Changed

fix: events in portals carry the wrong raycaster, camera, etc by @drcmda in 24cb1cf

Full Changelog: pmndrs/react-three-fiber@v8.7.1...v8.7.2

`v8.7.1`

Compare Source

What's Changed

fix: allow canvas eventsource to be a ref by @drcmda in bcb8f00

Full Changelog: pmndrs/react-three-fiber@v8.7.0...v8.7.1

`v8.7.0`

Compare Source

What's Changed

feat(hooks): useInstanceHandle by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2484
feat(loop): flushGlobalEffects for manual loop manipulation by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2481

Full Changelog: pmndrs/react-three-fiber@v8.6.2...v8.7.0

`v8.6.2`

Compare Source

What's Changed

fix(types): @react-three/drei declaration files by @Methuselah96 in https://github.com/pmndrs/react-three-fiber/pull/2478

Full Changelog: pmndrs/react-three-fiber@v8.6.1...v8.6.2

`v8.6.1`

Compare Source

What's Changed

chore(docs): fix typo, changed "id" to "i" by @Johnrobmiller in https://github.com/pmndrs/react-three-fiber/pull/2458
chore(docs): update RootState section by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2473
fix(core): don't append to unmounted containers by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2472

New Contributors

@Johnrobmiller made their first contribution in https://github.com/pmndrs/react-three-fiber/pull/2458

Full Changelog: pmndrs/react-three-fiber@v8.6.0...v8.6.1

`v8.6.0`

Compare Source

What's Changed

feat: eventsource and eventprefix on the canvas component by @drcmda in fbce5f9

Full Changelog: pmndrs/react-three-fiber@v8.5.1...v8.6.0

`v8.5.1`

Compare Source

What's Changed

fix(core): null-check instance.children on reconstruct by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2454

Full Changelog: pmndrs/react-three-fiber@v8.5.0...v8.5.1

`v8.5.0`

Compare Source

What's Changed

docs: remove usage of *BufferGeometry by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2442
docs: fix link for three js fundamentals by @michaelbayday in https://github.com/pmndrs/react-three-fiber/pull/2444
feat(core): check instanceof for auto-attach by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2453
fix(core): handle primitive children on reconstruct by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2452

New Contributors

@michaelbayday made their first contribution in https://github.com/pmndrs/react-three-fiber/pull/2444

Full Changelog: pmndrs/react-three-fiber@v8.3.1...v8.5.0

`v8.4.1`

Compare Source

`v8.4.0`

Compare Source

`v8.3.1`

Compare Source

What's Changed

fix(types): accept readonly arrays for vector props by @kmannislands in https://github.com/pmndrs/react-three-fiber/pull/2428

Full Changelog: pmndrs/react-three-fiber@v8.3.0...v8.3.1

`v8.3.0`

Compare Source

What's Changed

feat: improve errors by @lukekugelman in https://github.com/pmndrs/react-three-fiber/pull/2394

New Contributors

@lukekugelman made their first contribution in https://github.com/pmndrs/react-three-fiber/pull/2394

Full Changelog: pmndrs/react-three-fiber@v8.2.3...v8.3.0

`v8.2.3`

Compare Source

What's Changed

chore(docs): replace IntrinsicElements with ThreeElements by @bart-krakowski in https://github.com/pmndrs/react-three-fiber/pull/2393
chore: check lint in ci by @kmannislands in https://github.com/pmndrs/react-three-fiber/pull/2420
fix: compute initial size createRoot by @kmannislands in https://github.com/pmndrs/react-three-fiber/pull/2406
fix(types): add manager to useLoader signature by @miker2049 in https://github.com/pmndrs/react-three-fiber/pull/2421

New Contributors

@miker2049 made their first contribution in https://github.com/pmndrs/react-three-fiber/pull/2421

Full Changelog: pmndrs/react-three-fiber@v8.2.2...v8.2.3

`v8.2.2`

Compare Source

What's Changed

chore(docs): fix typo by @alexrider94 in https://github.com/pmndrs/react-three-fiber/pull/2384
chore(docs): fix typo in useLoader example by @inokawa in https://github.com/pmndrs/react-three-fiber/pull/2385
chore(tests): tests typecheck by @bart-krakowski in https://github.com/pmndrs/react-three-fiber/pull/2375
fix(renderer): warn on text instance, null check on instance create by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2395

New Contributors

@alexrider94 made their first contribution in https://github.com/pmndrs/react-three-fiber/pull/2384

Full Changelog: pmndrs/react-three-fiber@v8.2.1...v8.2.2

`v8.2.1`

Compare Source

What's Changed

fix: use useLayoutEffect in native by @CodyJasonBennett in https://github.com/pmndrs/react-three-fiber/pull/2376

Full Changelog: pmndrs/react-three-fiber@v8.2.0...v8.2.1

`v8.2.0`

Compare Source

What's Changed

refactor: renderer update by @bart-krakowski in https://github.com/pmndrs/react-three-fiber/pull/2360
feat: expose ThreeElements interface by @AndrewPrifer in https://github.com/pmndrs/react-three-fiber/pull/2347

This release exposes a ThreeElements interface containing native three JSX elements to discern from DOM JSX types.

import type { ThreeElements } from '@&#8203;react-three/fiber'

function Mesh(props: ThreeElements['mesh']) {
  return <mesh {...props} />
}

Extending JSX.IntrinsicElements is deprecated in favor of extending ThreeElements directly with the following:

declare module '@&#8203;react-three/fiber' {
  interface ThreeElements {
    myMesh: Object3DNode<MyMesh, typeof MyMesh>
  }
}

New Contributors

@bart-krakowski made their first contribution in https://github.com/pmndrs/react-three-fiber/pull/2360
@AndrewPrifer made their first contribution in https://github.com/pmndrs/react-three-fiber/pull/2347

Full Changelog: pmndrs/react-three-fiber@v8.1.0...v8.2.0

`v8.1.0`

Compare Source

What's Changed

fix(core):cannot remove effects correctly when use addEffect/addAfter… by @wangzongqi1001 in https://github.com/pmndrs/react-three-fiber/pull/2357
feat: expose position information on state.size by @kmannislands in https://github.com/pmndrs/react-three-fiber/pull/2339

New Contributors

@wangzongqi1001 made their first contribution in https://github.com/pmndrs/react-three-fiber/pull/2357
@kmannislands made their first contribution in https://github.com/pmndrs/react-three-fiber/pull/2339

Full Changelog: pmndrs/react-three-fiber@8ad0559...v8.1.0

`v8.0.27`

Compare Source

`v8.0.26`

Compare Source

`v8.0.25`

Compare Source

`v8.0.24`

Compare Source

`v8.0.23`

Compare Source

`v8.0.22`

Compare Source

`v8.0.21`

Compare Source

`v8.0.20`

Compare Source

`v8.0.19`

Compare Source

`v8.0.18`

Compare Source

`v8.0.17`

Compare Source

`v8.0.16`

Compare Source

`v8.0.15`

Compare Source

`v8.0.14`

Compare Source

`v8.0.13`

Compare Source

`v8.0.12`

Compare Source

`v8.0.11`

Compare Source

`v8.0.10`

Compare Source

`v8.0.9`

Compare Source

`v8.0.8`

Compare Source

`v8.0.7`

Compare Source

`v8.0.6`

Compare Source

`v8.0.5`

Compare Source

`v8.0.4`

Compare Source

`v8.0.3`

Compare Source

`v8.0.2`

Compare Source

`v8.0.1`

Compare Source

`v8.0.0`: v8.0.x

Compare Source

v8 Migration Guide

Changes and new features with v8 and react 18

Work on version 8 has begun 3 Sep 2021 and is perhaps the biggest update to Fiber yet. We've tried our best to keep breaking-changes to a minimum, they mostly affect rarely used api's like attach. This release brings a ton of performance related fixes, but also includes some new and ground breaking features.

We would like to express our gratitude to the community for their continued support, as well as to all our contributors. 🎉

React Native support

With React 18 and Expo 43, you can now ship threejs goodness across web and native. These apps are not confined to a web-view, they are truly native OpenGLES.

Now expo-gl, which does the hard lifting, has existed for a while, but we've addressed some of the common concerns related to interop and making the three eco system readily work in the native space. For instance, you handle assets the same exact way you'd treat them in a web app.

See installation to get started with managed Expo or bare React Native apps.

- import { Canvas, useLoader } from '@&#8203;react-three/fiber'
+ import { Canvas, useLoader } from '@&#8203;react-three/fiber/native'

- import { useGLTF } from '@&#8203;react-three/drei'
+ import { useGLTF } from '@&#8203;react-three/drei/native'

This is complete with support for Pressability events and native threejs loaders. See events for a complete list of events.

<mesh
  onClick={(e) => console.log('onPress')}
  onPointerDown={(e) => console.log('onPressIn')}
  onPointerUp={(e) => console.log('onPressOut')}
  onDoubleClick={(e) => console.log('onLongPress')}
  onPointerOver={(e) => console.log('onHoverIn')}
  onPointerOut={(e) => console.log('onHoverOut')}
  onPointerMove={(e) => console.log('onPressMove')}
  // Not implemented
  // onContextMenu={(e) => console.log('context menu')}
  // onWheel={(e) => console.log('wheel spins')}
/>

import React, { Suspense } from 'react'
import { useGLTF } from '@&#8203;react-three/drei/native'
import { Canvas } from '@&#8203;react-three/fiber/native'
import modelPath from './assets/model.glb'

function Model(props) {
  const { scene } = useGLTF(modelPath)
  return <primitive {...props} object={scene} />
}

export default function App() {
  return (
    <Canvas>
      <Suspense fallback={null}>
        <Model />
      </Suspense>
    </Canvas>
  )
}

React Native support was submitted by @Cody_J_Bennett. 🎉

Zustand and suspend-react

Fiber uses zustand to manage state. It's a simple, powerful, and performant state management library for React. And suspend-react to manage async ops and suspense (useLoader for instance). You can use these in your projects as well as they are to get closer interop with Fiber.

New pixel ratio default

The default DPR has changed from 1 to [1, 2], which will clamp between 1 and 2, but prefer 2, depending on the screen's native pixel ratio.

This was the most common setting in the wild, so it was brought in as a better default.

- <Canvas dpr={[1, 2]} />
+ <Canvas />

Color management

Color management is now being handled by Three R139. Therefore we set THREE.ColorManagement.legacyMode to false and cede to touch colors and textures since everything will now be converted from sRGB to linear space by Three itself.

While you can of course use Fiber with any Three version you like we recommend updating to R139.

Check out https://threejs.org/docs/index.html#manual/en/introduction/Color-management for information.

Automatic concurrency

Concurrency is now part of React 18, which automatically switches between blocking (default) and concurrent (async).

- <Canvas mode="concurrent" />
+ <Canvas />

React 18 introduces the startTransition and useTransition APIs to defer and schedule expensive operations and state updates. Use these to de-prioritize expensive operations.

import { startTransition } from 'react'
import { Points } from '@&#8203;react-three/drei'

const [radius, setRadius] = useState(1)
const positions = calculatePositions(radius)
const colors = calculateColors(radius)
const sizes = calculateSizes(radius)

<Points
  positions={positions}
  colors={colors}
  sizes={sizes}
  onPointerOut={() => startTransition(() => setRadius(prev => prev + 1))}
>
  <meshBasicMaterial vertexColors />
</Points>

Examples

Please be careful, this is an extreme stress test. It creates so much load that without React the browser will freeze or crash.

Conditional rendering with frameloop

frameloop can now be toggled to render conditionally. This is useful to toggle on user interaction or while in frame.

const [frameloop, setFrameloop] = useState('never')

<Canvas
  frameloop={frameloop}
  onClick={() => setFrameloop('always')}
/>

Another usecase would be using intersection observers to stop the canvas when it's out of view.

const canvasRef = useRef()
const [frameloop, setFrameloop] = useState('never')

useEffect(() => {
  const observer = new IntersectionObserver(([{ isIntersecting }]) => {
    setFrameloop(isIntersecting ? 'always' : 'never')
  }, {})

  observer.observe(canvasRef.current)
  return () => observer.disconnect()
}, [])

<Canvas ref={canvasRef} frameloop={frameloop} />

Expanded gl prop

The gl prop can now accept both constructor args and renderer properties like the camera prop.

<Canvas gl={{ alpha: false, physicallyCorrectLights: true }} />

It can also accept a synchronous callback to manually create a renderer. This allows you to use any custom renderer you want.

<Canvas gl={(canvas) => new Renderer({ canvas })} />

Improved WebXR handling

Automatic WebXR switching

The vr prop was removed in favor of automatic WebXR switching. Whenever a session is requested, XR features are enabled, and the renderer will render at the native refresh rate. The inverse is true when exiting a session.

frameloop will not be respected while in a session.

- <Canvas vr />
+ <Canvas />

Extended useFrame

In addition to the automatic rendering, useFrame will expose the current XRFrame obtained via XRSession#requestAnimationFrame.

useFrame((state: RootState, delta: number, frame?: THREE.XRFrame) => { ... })

This removes the need for custom rendering loops when using WebXR pose data and abstractions like useXRFrame of @react-three/xr.

Manual camera manipulation

By default Fiber is responsive and will set up cameras properly on resize (aspect ratio etc).

Cameras can be controlled manually by setting manual to true in camera. This will opt out of projection matrix recalculation when the drawing area resizes.

<Canvas camera={{ manual: true }}>

This is also supported by all cameras that you create, be it a THREE.PerspectiveCamera or drei/cameras, put manual on it and Fiber will not touch it.

import { PerspectiveCamera } from '@&#8203;react-three/drei'
;<Canvas>
  <PerspectiveCamera makeDefault manual />
</Canvas>

Unified attach API

Previously, attach had multiple signatures:

attach="name"
attachObject={["name", "attribute"]}
attachArray="name"
attachFns={["add", "remove"]}
attachFns={[(self, parent) => parent.add(self), (self, parent) => parent.remove(self)]}

This is now a single, unified signature with support for piercing and named attach functions or custom handlers.

// Attach foo to parent.a
<foo attach="a" />

// Attach foo to parent.a.b and a.b.c (nested object attach)
<foo attach="a-b" />
<foo attach="a-b-c" />

// Attach foo to parent.a[0] and [1] (array attach is just object attach)
<foo attach="a-0" />
<foo attach="a-1" />

// Attach foo to parent via explicit add/remove functions
<foo attach={(parent, self) => {
  parent.add(self)
  return () => parent.remove(self)
} />

// The same as a one liner
<foo attach={(parent, self) => (parent.add(self), () => parent.remove(self))} />

Real-world use-cases:

Attaching to nested objects:

- <directionalLight
-   castShadow
-   position={[2.5, 8, 5]}
-   shadow-mapSize={[1024, 1024]}
-   shadow-camera-far={50}
-   shadow-camera-left={-10}
-   shadow-camera-right={10}
-   shadow-camera-top={10}
-   shadow-camera-bottom={-10}
- />
+ <directionalLight castShadow position={[2.5, 8, 5]} shadow-mapSize={[1024, 1024]}>
+   <orthographicCamera attach="shadow-camera" args={[-10, 10, 10, -10]} />
+ </directionalLight>

<bufferGeometry>
-   <bufferAttribute attachObject={['attributes', 'position']} count={count} array={vertices} itemSize={3} />
+   <bufferAttribute attach="attributes-position" count={count} array={vertices} itemSize={3} />
</bufferGeometry>

Arrays must be explcit now:

<mesh>
-  {colors.map((color, index) => <meshBasicMaterial key={index} attachArray="material" color={color} />}
+  {colors.map((color, index) => <meshBasicMaterial key={index} attach={`material-${index}`} color={color} />}
</mesh>

Spread Canvas props

The <Canvas /> can now accept non-render props to spread as native props: styles, classes, events, a11y, ...

- <div aria-describedby={...}>
-  <Canvas />
- </div>
+ <Canvas aria-describedby={...} />

New createRoot API

render is depreciated in v8 for the new createRoot signature.

import {
- render,
+ createRoot,
  events
} from '@&#8203;react-three/fiber'

- render(<mesh />, canvas, { event })
+ createRoot(canvas).configure({ events }).render(<mesh />)

Here is a typical setup:

import * as THREE from 'three'
import { extend, createRoot, events } from '@&#8203;react-three/fiber'

extend(THREE)

const root = createRoot(document.querySelector('#root'))

window.addEventListener('resize', () => {
  root.configure({
    events,
    camera: { position: [0, 0, 50]., fov: 50 },
    size: { width: window.innerWidth, height: window.innerHeight }
  })
  root.render(<App />)
})
window.dispatchEvent(new Event('resize'))

// This is how you would unmount the root
// root.unmount()

Examples

This is a custom-renderer example using the createRoot api:

Tree-shaking via extend

The underlying recon

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.

renovate · 2023-03-21T13:41:58Z

Edited/Blocked Notification

Renovate will not automatically rebase this PR, because it does not recognize the last commit author and assumes somebody else may have edited the PR.

You can manually request rebase by checking the rebase/retry box above.

⚠️ Warning: custom changes will be lost.

chore(deps): bump @react-three/fiber to ^8.0.0

7fc3f4f

renovate bot added the dependencies label Apr 24, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(deps): bump @react-three/fiber to ^8.0.0 #36

chore(deps): bump @react-three/fiber to ^8.0.0 #36

renovate bot commented Apr 24, 2022 •

edited

renovate bot commented Mar 21, 2023 •

edited

chore(deps): bump @react-three/fiber to ^8.0.0 #36

Are you sure you want to change the base?

chore(deps): bump @react-three/fiber to ^8.0.0 #36

Conversation

renovate bot commented Apr 24, 2022 • edited

Release Notes

What's Changed

New Contributors

What's Changed

What's Changed

What's Changed

What's Changed

What's Changed

What's Changed

What's Changed

What's Changed

New Contributors

What's Changed

New Contributors

What's Changed

What's Changed

What's Changed

New Contributors

What's Changed

What's Changed

What's Changed

What's Changed

New Contributors

What's Changed

What's Changed

What's Changed

New Contributors

What's Changed

What's Changed

What's Changed

What's Changed

What's Changed

What's Changed

What's Changed

What's Changed

What's Changed

New Contributors

What's Changed

What's Changed

What's Changed

New Contributors

What's Changed

What's Changed

What's Changed

What's Changed

What's Changed

What's Changed

New Contributors

What's Changed

What's Changed

What's Changed

New Contributors

What's Changed

What's Changed

New Contributors

What's Changed

New Contributors

What's Changed

New Contributors

What's Changed

What's Changed

New Contributors

What's Changed

New Contributors

renovate bot commented Apr 24, 2022 •

edited