Skip to content

Commit eafb38d

Browse files
CodyJasonBennettCodyJasonBennett
authored
BREAKING CHANGE: React 19 support (pmndrs#2318)
BREAKING CHANGE: React 19 support
1 parent c9d1463 commit eafb38d

File tree

198 files changed

+1736
-2300
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

198 files changed

+1736
-2300
lines changed

‎.codesandbox/ci.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"sandboxes": ["4nc1u", "bfplr", "1wh6f"],
33
"packages": ["dist"],
4-
"node": "18"
4+
"node": "20"
55
}

‎.storybook/Setup.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react'
22
import { Vector3 } from 'three'
3-
import { Canvas, Props as CanvasProps } from '@react-three/fiber'
3+
import { Canvas, CanvasProps } from '@react-three/fiber'
44

55
import { OrbitControls } from '../src'
66

@@ -25,8 +25,8 @@ export const Setup = ({
2525
{children}
2626
{lights && (
2727
<>
28-
<ambientLight intensity={0.8} />
29-
<pointLight intensity={1} position={[0, 6, 0]} />
28+
<ambientLight intensity={0.8 * Math.PI} />
29+
<pointLight intensity={1 * Math.PI} position={[0, 6, 0]} decay={0} />
3030
</>
3131
)}
3232
{controls && <OrbitControls makeDefault />}

‎.storybook/stories/AccumulativeShadows.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as THREE from 'three'
22
import * as React from 'react'
33
import { ComponentProps } from 'react'
4-
import { FlakesTexture } from 'three/examples/jsm/textures/FlakesTexture'
4+
import { FlakesTexture } from 'three-stdlib'
55
import { Meta, StoryObj } from '@storybook/react'
66

77
import { Setup } from '../Setup'
@@ -48,7 +48,7 @@ function Suzi(props: ComponentProps<'group'>) {
4848
material.color.set('orange')
4949
material.roughness = 0
5050
material.normalMap = new THREE.CanvasTexture(
51-
new FlakesTexture(),
51+
new FlakesTexture() as HTMLCanvasElement,
5252
THREE.UVMapping,
5353
THREE.RepeatWrapping,
5454
THREE.RepeatWrapping

‎.storybook/stories/Adaptive.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ function AdaptiveScene(props: ComponentProps<typeof AdaptiveDpr>) {
6060
<Archer />
6161
</Suspense>
6262
<directionalLight
63-
intensity={0.2}
63+
intensity={0.2 * Math.PI}
6464
position={[10, 10, 5]}
6565
shadow-mapSize-width={64}
6666
shadow-mapSize-height={64}

‎.storybook/stories/ArcballControls.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const CustomCamera = ({ ...props }: ComponentProps<typeof ArcballControls>) => {
4747
* we will render our scene in a render target and use it as a map.
4848
*/
4949
const fbo = useFBO(400, 400)
50-
const virtualCamera = useRef<OrthographicCamera | PerspectiveCameraType>()
50+
const virtualCamera = useRef<PerspectiveCameraType>(null!)
5151
const [virtualScene] = useState(() => new Scene())
5252

5353
useFrame(({ gl }) => {

‎.storybook/stories/BBAnchor.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ function BBAnchorScene({
3030
drawBoundingBox: boolean
3131
children?: React.ReactNode
3232
}) {
33-
const ref = React.useRef(null)
33+
const ref = React.useRef<THREE.Mesh<THREE.IcosahedronGeometry>>(null!)
3434

3535
useHelper(drawBoundingBox && ref, BoxHelper, 'cyan')
3636

‎.storybook/stories/Bvh.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export default {
2323
type Story = StoryObj<typeof Bvh>
2424

2525
function TorusBVH({ z = 0, ...props }: { z: number } & React.ComponentProps<typeof Bvh>) {
26-
const mesh = React.useRef<React.ElementRef<typeof TorusKnot>>(null!)
26+
const mesh = React.useRef<React.ComponentRef<typeof TorusKnot>>(null!)
2727

2828
useHelper(mesh, MeshBVHHelper)
2929

@@ -122,7 +122,7 @@ const DebugRayCast = ({ grp }) => {
122122
}
123123

124124
function Scene(props: React.ComponentProps<typeof Bvh>) {
125-
const grp = React.useRef<React.ElementRef<'group'>>(null)
125+
const grp = React.useRef<React.ComponentRef<'group'>>(null)
126126

127127
const { raycaster } = useThree()
128128
raycaster.firstHitOnly = true

‎.storybook/stories/CameraControls.stories.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { createPortal, useFrame } from '@react-three/fiber'
22
import React, { ComponentProps, useRef, useState } from 'react'
3-
import { Scene } from 'three'
3+
import * as THREE from 'three'
44
import { Meta, StoryObj } from '@storybook/react'
55

66
import { Setup } from '../Setup'
@@ -47,9 +47,9 @@ const CameraControlsScene2 = (props: ComponentProps<typeof CameraControls>) => {
4747
* we will render our scene in a render target and use it as a map.
4848
*/
4949
const fbo = useFBO(400, 400)
50-
const virtualCamera = useRef<CameraControls['camera']>()
51-
const [virtualScene] = useState(() => new Scene())
52-
const cameraControlRef = useRef<CameraControls>(null)
50+
const virtualCamera = useRef<THREE.PerspectiveCamera>(null!)
51+
const [virtualScene] = useState(() => new THREE.Scene())
52+
const cameraControlRef = useRef<CameraControls>(null!)
5353

5454
useFrame(({ gl }) => {
5555
if (virtualCamera.current) {

‎.storybook/stories/CubeCamera.stories.tsx

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,16 @@ export default {
2222

2323
type Story = StoryObj<typeof CubeCamera>
2424

25-
declare global {
26-
namespace JSX {
27-
interface IntrinsicElements {
28-
axisHelper: object
29-
}
25+
declare module '@react-three/fiber' {
26+
interface ThreeElements {
27+
axisHelper: object
3028
}
3129
}
3230

3331
function Sphere({ offset = 0, ...props }: ComponentProps<typeof CubeCamera> & { offset?: number }) {
34-
const ref = React.useRef<React.ElementRef<'mesh'>>(null)
32+
const ref = React.useRef<THREE.Mesh>(null!)
3533
useFrame(({ clock }) => {
36-
ref.current!.position.y = Math.sin(offset + clock.elapsedTime) * 5
34+
ref.current.position.y = Math.sin(offset + clock.elapsedTime) * 5
3735
})
3836

3937
return (

‎.storybook/stories/CurveModifier.stories.tsx

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,13 @@ import { CurveModifier, CurveModifierRef } from '../../src'
99

1010
extend({ StdText: TextGeometry })
1111

12-
type TextGeometryImpl = JSX.IntrinsicElements['extrudeGeometry'] & {
12+
type TextGeometryImpl = ThreeElements['extrudeGeometry'] & {
1313
args: [string, TextGeometryParameters]
1414
}
1515

16-
declare global {
17-
namespace JSX {
18-
interface IntrinsicElements {
19-
stdText: TextGeometryImpl
20-
}
16+
declare module '@react-three/fiber' {
17+
interface ThreeElements {
18+
stdText: TextGeometryImpl
2119
}
2220
}
2321

‎.storybook/stories/Extrude.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default {
2222
type Story = StoryObj<typeof Extrude>
2323

2424
function ExtrudeScene(props: React.ComponentProps<typeof Extrude>) {
25-
const ref = useTurntable<React.ElementRef<typeof Extrude>>()
25+
const ref = useTurntable<React.ComponentRef<typeof Extrude>>()
2626

2727
return (
2828
<>

‎.storybook/stories/FaceControls.stories.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import * as easing from 'maath/easing'
77
import { Setup } from '../Setup'
88

99
import { FaceLandmarker, FaceControls, Box, WebcamVideoTexture } from '../../src'
10-
import { ComponentProps, ElementRef, useRef, useState } from 'react'
10+
import { ComponentProps, ComponentRef, useRef, useState } from 'react'
1111
import { FaceLandmarkerResult } from '@mediapipe/tasks-vision'
1212
import { useFrame, useThree } from '@react-three/fiber'
1313

@@ -55,8 +55,8 @@ export const FaceControlsSt = {
5555
//
5656

5757
function FaceControlsScene2(props: ComponentProps<typeof FaceControls>) {
58-
const faceLandmarkerRef = useRef<ElementRef<typeof FaceLandmarker>>(null)
59-
const videoTextureRef = useRef<ElementRef<typeof WebcamVideoTexture>>(null)
58+
const faceLandmarkerRef = useRef<ComponentRef<typeof FaceLandmarker>>(null)
59+
const videoTextureRef = useRef<ComponentRef<typeof WebcamVideoTexture>>(null)
6060

6161
const [faceLandmarkerResult, setFaceLandmarkerResult] = useState<FaceLandmarkerResult>()
6262

@@ -99,7 +99,7 @@ export const FaceControlsSt2 = {
9999
//
100100

101101
function FaceControlsScene3(props: ComponentProps<typeof FaceControls>) {
102-
const faceControlsRef = useRef<ElementRef<typeof FaceControls>>(null)
102+
const faceControlsRef = useRef<ComponentRef<typeof FaceControls>>(null)
103103

104104
const camera = useThree((state) => state.camera)
105105
const [current] = useState(() => new THREE.Object3D())

‎.storybook/stories/Fbo.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default {
2222
type Story = StoryObj<typeof Fbo>
2323

2424
function SpinningThing() {
25-
const mesh = React.useRef<React.ElementRef<typeof TorusKnot>>(null!)
25+
const mesh = React.useRef<React.ComponentRef<typeof TorusKnot>>(null!)
2626

2727
useFrame(() => {
2828
mesh.current.rotation.x = mesh.current.rotation.y = mesh.current.rotation.z += 0.01
@@ -40,7 +40,7 @@ function FboScene(props: React.ComponentProps<typeof Fbo>) {
4040
}
4141

4242
function TargetWrapper({ target }: { target: THREE.WebGLRenderTarget }) {
43-
const cam = React.useRef<React.ElementRef<typeof PerspectiveCamera>>(null!)
43+
const cam = React.useRef<React.ComponentRef<typeof PerspectiveCamera>>(null!)
4444

4545
const scene = React.useMemo(() => {
4646
const scene = new THREE.Scene()

‎.storybook/stories/HTML.stories.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ function HTMLScene({
3131
color?: React.ComponentProps<'meshBasicMaterial'>['color']
3232
children?: React.ReactNode
3333
} & HtmlProps) {
34-
const ref = useTurntable<React.ElementRef<'group'>>()
34+
const ref = useTurntable<React.ComponentRef<'group'>>()
3535

3636
return (
3737
<group ref={ref}>
@@ -123,8 +123,8 @@ function HTMLOrthographicScene(props: HtmlProps) {
123123
<Html {...props}>Orthographic</Html>
124124
}
125125
</Icosahedron>
126-
<ambientLight intensity={0.8} />
127-
<pointLight intensity={1} position={[0, 6, 0]} />
126+
<ambientLight intensity={0.8 * Math.PI} />
127+
<pointLight intensity={1 * Math.PI} position={[0, 6, 0]} decay={0} />
128128
</>
129129
)
130130
}
@@ -164,8 +164,8 @@ export const HTMLCalculatePositionSt = {
164164
//
165165

166166
function HTMLOccluderScene(props: HtmlProps) {
167-
const turntableRef = useTurntable<React.ElementRef<'group'>>()
168-
const occluderRef = React.useRef<React.ElementRef<typeof Icosahedron>>(null)
167+
const turntableRef = useTurntable<React.ComponentRef<'group'>>()
168+
const occluderRef = React.useRef<React.ComponentRef<typeof Icosahedron>>(null)
169169

170170
return (
171171
<>
@@ -195,8 +195,8 @@ function HTMLOccluderScene(props: HtmlProps) {
195195
</Html>
196196
</Icosahedron>
197197
</group>
198-
<ambientLight intensity={0.8} />
199-
<pointLight intensity={1} position={[0, 6, 0]} />
198+
<ambientLight intensity={0.8 * Math.PI} />
199+
<pointLight intensity={1 * Math.PI} position={[0, 6, 0]} decay={0} />
200200
</>
201201
)
202202
}

‎.storybook/stories/Lathe.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default {
2222
type Story = StoryObj<typeof Lathe>
2323

2424
function LatheScene(props: React.ComponentProps<typeof Lathe>) {
25-
const ref = useTurntable<React.ElementRef<typeof Lathe>>()
25+
const ref = useTurntable<React.ComponentRef<typeof Lathe>>()
2626

2727
return (
2828
<Lathe ref={ref} {...props}>

‎.storybook/stories/MarchingCubes.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ function MarchingCubesScene({
3535
planeY?: boolean
3636
planeZ?: boolean
3737
} & React.ComponentProps<typeof MarchingCubes>) {
38-
const cubeRefOne = React.useRef<React.ElementRef<typeof MarchingCube>>(null)
39-
const cubeRefTwo = React.useRef<React.ElementRef<typeof MarchingCube>>(null)
38+
const cubeRefOne = React.useRef<React.ComponentRef<typeof MarchingCube>>(null)
39+
const cubeRefTwo = React.useRef<React.ComponentRef<typeof MarchingCube>>(null)
4040

4141
useFrame(({ clock }) => {
4242
if (!cubeRefOne.current || !cubeRefTwo.current) return

‎.storybook/stories/MeshDistortMaterial.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ export const MeshDistortMaterialSt = {
4747
//
4848

4949
function MeshDistortMaterialRefScene(props: React.ComponentProps<typeof MeshDistortMaterial>) {
50-
const material = React.useRef<React.ElementRef<typeof MeshDistortMaterial>>(null!)
50+
const material = React.useRef<React.ComponentRef<typeof MeshDistortMaterial>>(null!)
5151

5252
useFrame(({ clock }) => {
5353
material.current.distort = Math.sin(clock.getElapsedTime())

‎.storybook/stories/MeshRefractionMaterial.stories.tsx

Lines changed: 12 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ function Diamond({
3939
rotation: React.ComponentProps<'mesh'>['rotation']
4040
position: React.ComponentProps<'mesh'>['position']
4141
} & React.ComponentProps<typeof MeshRefractionMaterial>) {
42-
const ref = React.useRef<React.ElementRef<'mesh'>>(null)
42+
const ref = React.useRef<React.ComponentRef<'mesh'>>(null)
4343
const { nodes } = useGLTF('/dflat.glb') as any
4444
// Use a custom envmap/scene-backdrop for the diamond material
4545
// This way we can have a clear BG while cube-cam can still film other objects
@@ -74,9 +74,9 @@ function RefractionScene(props: React.ComponentProps<typeof MeshRefractionMateri
7474
return (
7575
<>
7676
<color attach="background" args={['#f0f0f0']} />
77-
<ambientLight intensity={0.5} />
78-
<spotLight position={[5, 5, -10]} angle={0.15} penumbra={1} />
79-
<pointLight position={[-10, -10, -10]} />
77+
<ambientLight intensity={0.5 * Math.PI} />
78+
<spotLight position={[5, 5, -10]} angle={0.15} penumbra={1} decay={0} />
79+
<pointLight position={[-10, -10, -10]} decay={0} />
8080

8181
<Diamond rotation={[0, 0, 0.715]} position={[0, -0.175 + 0.5, 0]} {...props} />
8282

@@ -110,7 +110,14 @@ function RefractionScene(props: React.ComponentProps<typeof MeshRefractionMateri
110110
scale={12}
111111
position={[0, -0.5, 0]}
112112
>
113-
<RandomizedLight amount={8} radius={10} ambient={0.5} intensity={1} position={[5, 5, -10]} bias={0.001} />
113+
<RandomizedLight
114+
amount={8}
115+
radius={10}
116+
ambient={0.5}
117+
intensity={1 * Math.PI}
118+
position={[5, 5, -10]}
119+
bias={0.001}
120+
/>
114121
</AccumulativeShadows>
115122
<Environment files="https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/aerodynamics_workshop_1k.hdr" />
116123
<OrbitControls makeDefault autoRotate autoRotateSpeed={0.1} minPolarAngle={0} maxPolarAngle={Math.PI / 2} />

‎.storybook/stories/MeshTransmissionMaterial.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ function GelatinousCube(props: React.ComponentProps<typeof MeshTransmissionMater
5656
function MeshTransmissionMaterialScene(props: React.ComponentProps<typeof MeshTransmissionMaterial>) {
5757
return (
5858
<>
59-
<ambientLight />
59+
<ambientLight intensity={Math.PI} />
6060
<group position={[0, -2.5, 0]}>
6161
<Center top>
6262
<GelatinousCube {...props} />
@@ -70,7 +70,7 @@ function MeshTransmissionMaterialScene(props: React.ComponentProps<typeof MeshTr
7070
opacity={0.8}
7171
scale={20}
7272
>
73-
<RandomizedLight radius={10} ambient={0.5} intensity={1} position={[2.5, 8, -2.5]} bias={0.001} />
73+
<RandomizedLight radius={10} ambient={0.5} intensity={1 * Math.PI} position={[2.5, 8, -2.5]} bias={0.001} />
7474
</AccumulativeShadows>
7575
</group>
7676
<OrbitControls minPolarAngle={0} maxPolarAngle={Math.PI / 2} autoRotate autoRotateSpeed={0.05} makeDefault />

‎.storybook/stories/MeshWobbleMaterial.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ export const MeshWobbleMaterialSt = {
4545
//
4646

4747
function MeshWobbleMaterialRefScene(props: React.ComponentProps<typeof MeshWobbleMaterial>) {
48-
const material = React.useRef<React.ElementRef<typeof MeshWobbleMaterial>>(null)
48+
const material = React.useRef<React.ComponentRef<typeof MeshWobbleMaterial>>(null)
4949

5050
useFrame(({ clock }) => {
5151
if (material.current === null) return

‎.storybook/stories/OrbitControls.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const CustomCamera = (props: OrbitControlsProps) => {
5050
* we will render our scene in a render target and use it as a map.
5151
*/
5252
const fbo = useFBO(400, 400)
53-
const virtualCamera = useRef<React.ElementRef<typeof PerspectiveCamera> | null>(null)
53+
const virtualCamera = useRef<React.ComponentRef<typeof PerspectiveCamera> | null>(null)
5454
const [virtualScene] = useState(() => new Scene())
5555

5656
useFrame(({ gl }) => {

‎.storybook/stories/Reflector.stories.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ function ReflectorScene({
4242
const roughnessMap = useTexture('roughness_floor.jpeg')
4343
const normalMap = useTexture('NORM.jpg')
4444
const distortionMap = useTexture('dist_map.jpeg')
45-
const $box = React.useRef<React.ElementRef<typeof TorusKnot>>(null!)
45+
const $box = React.useRef<React.ComponentRef<typeof TorusKnot>>(null!)
4646

4747
React.useEffect(() => {
4848
distortionMap.wrapS = distortionMap.wrapT = RepeatWrapping
@@ -76,7 +76,7 @@ function ReflectorScene({
7676
<TorusKnot args={[0.5, 0.2, 128, 32]} ref={$box} position={[0, 1, 0]}>
7777
<meshPhysicalMaterial color="hotpink" />
7878
</TorusKnot>
79-
<spotLight intensity={1} position={[10, 6, 10]} penumbra={1} angle={0.3} />
79+
<spotLight intensity={1 * Math.PI} position={[10, 6, 10]} penumbra={1} angle={0.3} decay={0} />
8080
<Environment preset="city" />
8181
</>
8282
)

‎.storybook/stories/RoundedBox.stories.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default {
2222
type Story = StoryObj<typeof RoundedBox>
2323

2424
function RoundedBoxScene(props: React.ComponentProps<typeof RoundedBox>) {
25-
const ref = useTurntable<React.ElementRef<typeof RoundedBox>>()
25+
const ref = useTurntable<React.ComponentRef<typeof RoundedBox>>()
2626

2727
return (
2828
<RoundedBox ref={ref} {...props}>
@@ -44,11 +44,11 @@ export const RoundedBoxSt = {
4444
//
4545

4646
function RoundedBoxScene2(props: React.ComponentProps<typeof RoundedBox>) {
47-
const ref = useTurntable<React.ElementRef<typeof RoundedBox>>()
47+
const ref = useTurntable<React.ComponentRef<typeof RoundedBox>>()
4848

4949
return (
5050
<>
51-
<spotLight position={[35, 35, 35]} intensity={2} />
51+
<spotLight position={[35, 35, 35]} intensity={2 * Math.PI} decay={0} />
5252
<RoundedBox ref={ref} {...props}>
5353
<meshPhongMaterial color="#f3f3f3" />
5454
</RoundedBox>

0 commit comments

Comments
 (0)