Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(deps): update dependency @react-three/fiber to v8 #2114

Merged
merged 2 commits into from
Mar 17, 2023

Conversation

renovate[bot]
Copy link
Contributor

@renovate renovate bot commented Mar 7, 2023

Mend Renovate

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
@react-three/fiber 7.0.29 -> 8.12.0 age adoption passing confidence

Release Notes

pmndrs/react-three-fiber

v8.12.0

Compare Source

What's Changed

New Contributors

Full Changelog: pmndrs/react-three-fiber@v8.11.10...v8.12.0

v8.11.11

Compare Source

v8.11.10

Compare Source

What's Changed

Full Changelog: v8.11.9...v8.11.10

v8.11.9

Compare Source

What's Changed

Full Changelog: pmndrs/react-three-fiber@v8.11.8...8.11.9

v8.11.8

Compare Source

What's Changed

Full Changelog: pmndrs/react-three-fiber@v8.11.7...v8.11.8

v8.11.7

Compare Source

What's Changed

Full Changelog: pmndrs/react-three-fiber@v8.11.5...v8.11.7

v8.11.6

Compare Source

What's Changed

  • fix: is.equ obj:shallow, allow it to test arrays 1 level deep, fix canvas.camera prop being stale by @​drcmda in 99fef6c

Full Changelog: pmndrs/react-three-fiber@v8.11.5...v8.11.6

v8.11.5

Compare Source

What's Changed

Full Changelog: pmndrs/react-three-fiber@v8.11.4...v8.11.5

v8.11.4

Compare Source

What's Changed

Full Changelog: pmndrs/react-three-fiber@v8.11.3...v8.11.4

v8.11.3

Compare Source

What's Changed

New Contributors

Full Changelog: pmndrs/react-three-fiber@v8.11.2...v8.11.3

v8.11.2

Compare Source

What's Changed

New Contributors

Full Changelog: pmndrs/react-three-fiber@v8.11.1...v8.11.2

v8.11.1

Compare Source

What's Changed

Full Changelog: pmndrs/react-three-fiber@v8.10.4...v8.11.1

v8.11.0

Compare Source

feat: events.update, allow raycast w/o user interaction by @​drcmda in 7b25689

Full Changelog: pmndrs/react-three-fiber@v8.10.4...v8.11.0

v8.10.4

Compare Source

What's Changed

Full Changelog: pmndrs/react-three-fiber@v8.10.3...v8.10.4

v8.10.3

Compare Source

What's Changed

New Contributors

Full Changelog: pmndrs/react-three-fiber@v8.10.1...v8.10.3

v8.10.2

Compare Source

What's Changed

Full Changelog: pmndrs/react-three-fiber@v8.10.1...v8.10.2

v8.10.1

Compare Source

What's Changed

Full Changelog: pmndrs/react-three-fiber@v8.10.0...v8.10.1

v8.10.0

Compare Source

What's Changed

Full Changelog: pmndrs/react-three-fiber@v8.9.2...v8.10.0

v8.9.2

Compare Source

What's Changed

New Contributors

Full Changelog: pmndrs/react-three-fiber@v8.9.1...v8.9.2

v8.9.1

Compare Source

What's Changed

Full Changelog: pmndrs/react-three-fiber@v8.9.0...v8.9.1

v8.9.0

Compare Source

What's Changed

Re-release of #​2481 from v8.7.0, it just didn't get exported.

Full Changelog: pmndrs/react-three-fiber@v8.8.11...v8.9.0

v8.8.11

Compare Source

What's Changed

New Contributors

Full Changelog: pmndrs/react-three-fiber@v8.8.10...v8.8.11

v8.8.10

Compare Source

What's Changed

Full Changelog: pmndrs/react-three-fiber@v8.8.9...v8.8.10

v8.8.9

Compare Source

What's Changed

Full Changelog: pmndrs/react-three-fiber@v8.8.8...v8.8.9

v8.8.8

Compare Source

What's Changed

Full Changelog: pmndrs/react-three-fiber@v8.8.7...v8.8.8

v8.8.7

Compare Source

What's Changed

Full Changelog: pmndrs/react-three-fiber@v8.8.6...v8.8.7

v8.8.6

Compare Source

What's Changed

Full Changelog: pmndrs/react-three-fiber@v8.8.5...v8.8.6

v8.8.5

Compare Source

What's Changed

Full Changelog: pmndrs/react-three-fiber@v8.8.4...v8.8.5

v8.8.4

Compare Source

What's Changed

Full Changelog: pmndrs/react-three-fiber@v8.8.2...v8.8.4

v8.8.3

Compare Source

What's Changed

Full Changelog: pmndrs/react-three-fiber@v8.8.2...v8.8.3

v8.8.2

Compare Source

What's Changed

New Contributors

Full Changelog: pmndrs/react-three-fiber@v8.8.1...v8.8.2

v8.8.1

Compare Source

What's Changed

No changes in this release.

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

v8.8.0

Compare Source

What's Changed

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 '@​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

New Contributors

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

v8.7.3

Compare Source

What's Changed

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

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

v8.7.0

Compare Source

What's Changed

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

v8.6.2

Compare Source

What's Changed

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

v8.6.1

Compare Source

What's Changed

New Contributors

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

v8.6.0

Compare Source

What's Changed

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

v8.5.1

Compare Source

What's Changed

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

v8.5.0

Compare Source

What's Changed

New Contributors

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

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

v8.3.0

Compare Source

What's Changed

New Contributors

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

v8.2.3

Compare Source

What's Changed

New Contributors

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

v8.2.2

Compare Source

What's Changed

New Contributors

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

v8.2.1

Compare Source

What's Changed

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

v8.2.0

Compare Source

What's Changed

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

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

v8.1.0

Compare Source

What's Changed

New Contributors

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.

View splitting

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:

View splitting

Tree-shaking via extend

The underlyi


Configuration

📅 Schedule: Branch creation - "before 3am on the first day of the month" (UTC), 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.

@vercel
Copy link

vercel bot commented Mar 7, 2023

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated
react-spring ❌ Failed (Inspect) Mar 9, 2023 at 1:44AM (UTC)

@renovate renovate bot added dependencies Pull requests that update a dependency file kind:chore labels Mar 7, 2023
@changeset-bot
Copy link

changeset-bot bot commented Mar 7, 2023

⚠️ No Changeset found

Latest commit: 1280019

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@github-actions
Copy link
Contributor

github-actions bot commented Mar 7, 2023

Size Change: 0 B

Total Size: 56.6 kB

ℹ️ View Unchanged
Filename Size
packages/animated/dist/esm/index.js 1.77 kB
packages/animated/dist/index.js 2.08 kB
packages/core/dist/esm/index.js 11.4 kB
packages/core/dist/index.js 11.6 kB
packages/parallax/dist/esm/index.js 1.7 kB
packages/parallax/dist/index.js 2 kB
packages/rafz/dist/esm/index.js 906 B
packages/rafz/dist/index.js 1.14 kB
packages/react-spring/dist/esm/index.js 52 B
packages/react-spring/dist/index.js 321 B
packages/shared/dist/esm/index.js 6.95 kB
packages/shared/dist/index.js 7.25 kB
packages/types/dist/esm/index.js 53 B
packages/types/dist/index.js 323 B
targets/konva/dist/esm/index.js 336 B
targets/konva/dist/index.js 612 B
targets/native/dist/esm/index.js 752 B
targets/native/dist/index.js 864 B
targets/three/dist/esm/index.js 347 B
targets/three/dist/index.js 679 B
targets/web/dist/esm/index.js 2.2 kB
targets/web/dist/index.js 2.42 kB
targets/zdog/dist/esm/index.js 308 B
targets/zdog/dist/index.js 650 B

compressed-size-action

@codesandbox-ci
Copy link

codesandbox-ci bot commented Mar 7, 2023

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 1280019:

Sandbox Source
Animating Auto Configuration
Card Configuration
Cards Stack Configuration
Chaining Transition and a Spring Configuration
CSS Gradients Configuration
CSS Keyframes Configuration
Async CSS variables Configuration
Draggable List Configuration
Exit Before Enter Configuration
Flip Card Configuration
Floating Button Configuration
Goo Blobs Configuration
Image Fade Configuration
List Reordering Configuration
MacOS Dock Configuration
Masonry Grid Configuration
Multistage Transitions Configuration
Noise Configuration
Horizontal Parallax Configuration
Vertical Parallax Configuration
Rocket decay Configuration
Basic Transition Configuration
Native Slide Configuration

@renovate renovate bot force-pushed the renovate/react-three-fiber-8.x branch from 94cec8d to 27cc6fd Compare March 9, 2023 01:42
@renovate
Copy link
Contributor Author

renovate bot commented Mar 17, 2023

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.

@joshuaellis joshuaellis merged commit 6a9ed19 into main Mar 17, 2023
@joshuaellis joshuaellis deleted the renovate/react-three-fiber-8.x branch March 17, 2023 11:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
dependencies Pull requests that update a dependency file
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant