v10

.codesandbox/ci.json

@@ -1,5 +1,5 @@
 {
   "sandboxes": ["4nc1u", "bfplr", "1wh6f"],
   "packages": ["dist"],
-  "node": "18"
+  "node": "20"
 }

.storybook/stories/AccumulativeShadows.stories.tsx

@@ -1,7 +1,7 @@
 import * as THREE from 'three'
 import * as React from 'react'
 import { ComponentProps } from 'react'
-import { FlakesTexture } from 'three/examples/jsm/textures/FlakesTexture'
+import { FlakesTexture } from 'three-stdlib'
 import { Meta, StoryObj } from '@storybook/react'
 
 import { Setup } from '../Setup'
@@ -48,7 +48,7 @@ function Suzi(props: ComponentProps<'group'>) {
     material.color.set('orange')
     material.roughness = 0
     material.normalMap = new THREE.CanvasTexture(
-      new FlakesTexture(),
+      new FlakesTexture() as HTMLCanvasElement,
       THREE.UVMapping,
       THREE.RepeatWrapping,
       THREE.RepeatWrapping

.storybook/stories/ArcballControls.stories.tsx

@@ -47,7 +47,7 @@ const CustomCamera = ({ ...props }: ComponentProps<typeof ArcballControls>) => {
    * we will render our scene in a render target and use it as a map.
    */
   const fbo = useFBO(400, 400)
-  const virtualCamera = useRef<OrthographicCamera | PerspectiveCameraType>()
+  const virtualCamera = useRef<PerspectiveCameraType>(null!)
   const [virtualScene] = useState(() => new Scene())
 
   useFrame(({ gl }) => {

.storybook/stories/BBAnchor.stories.tsx

@@ -30,7 +30,7 @@ function BBAnchorScene({
   drawBoundingBox: boolean
   children?: React.ReactNode
 }) {
-  const ref = React.useRef(null)
+  const ref = React.useRef<THREE.Mesh<THREE.IcosahedronGeometry>>(null!)
 
   useHelper(drawBoundingBox && ref, BoxHelper, 'cyan')
 

.storybook/stories/Bvh.stories.tsx

@@ -23,7 +23,7 @@ export default {
 type Story = StoryObj<typeof Bvh>
 
 function TorusBVH({ z = 0, ...props }: { z: number } & React.ComponentProps<typeof Bvh>) {
-  const mesh = React.useRef<React.ElementRef<typeof TorusKnot>>(null!)
+  const mesh = React.useRef<React.ComponentRef<typeof TorusKnot>>(null!)
 
   useHelper(mesh, MeshBVHHelper)
 
@@ -122,7 +122,7 @@ const DebugRayCast = ({ grp }) => {
 }
 
 function Scene(props: React.ComponentProps<typeof Bvh>) {
-  const grp = React.useRef<React.ElementRef<'group'>>(null)
+  const grp = React.useRef<React.ComponentRef<'group'>>(null)
 
   const { raycaster } = useThree()
   raycaster.firstHitOnly = true

.storybook/stories/CameraControls.stories.tsx

@@ -1,6 +1,6 @@
 import { createPortal, useFrame } from '@react-three/fiber'
 import React, { ComponentProps, useRef, useState } from 'react'
-import { Scene } from 'three'
+import * as THREE from 'three'
 import { Meta, StoryObj } from '@storybook/react'
 
 import { Setup } from '../Setup'
@@ -47,9 +47,9 @@ const CameraControlsScene2 = (props: ComponentProps<typeof CameraControls>) => {
    * we will render our scene in a render target and use it as a map.
    */
   const fbo = useFBO(400, 400)
-  const virtualCamera = useRef<CameraControls['camera']>()
-  const [virtualScene] = useState(() => new Scene())
-  const cameraControlRef = useRef<CameraControls>(null)
+  const virtualCamera = useRef<THREE.PerspectiveCamera>(null!)
+  const [virtualScene] = useState(() => new THREE.Scene())
+  const cameraControlRef = useRef<CameraControls>(null!)
 
   useFrame(({ gl }) => {
     if (virtualCamera.current) {

.storybook/stories/CubeCamera.stories.tsx

@@ -22,18 +22,16 @@ export default {
 
 type Story = StoryObj<typeof CubeCamera>
 
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      axisHelper: object
-    }
+declare module '@react-three/fiber' {
+  interface ThreeElements {
+    axisHelper: object
   }
 }
 
 function Sphere({ offset = 0, ...props }: ComponentProps<typeof CubeCamera> & { offset?: number }) {
-  const ref = React.useRef<React.ElementRef<'mesh'>>(null)
+  const ref = React.useRef<THREE.Mesh>(null!)
   useFrame(({ clock }) => {
-    ref.current!.position.y = Math.sin(offset + clock.elapsedTime) * 5
+    ref.current.position.y = Math.sin(offset + clock.elapsedTime) * 5
   })
 
   return (

.storybook/stories/CurveModifier.stories.tsx

@@ -9,15 +9,13 @@ import { CurveModifier, CurveModifierRef } from '../../src'
 
 extend({ StdText: TextGeometry })
 
-type TextGeometryImpl = JSX.IntrinsicElements['extrudeGeometry'] & {
+type TextGeometryImpl = ThreeElements['extrudeGeometry'] & {
   args: [string, TextGeometryParameters]
 }
 
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      stdText: TextGeometryImpl
-    }
+declare module '@react-three/fiber' {
+  interface ThreeElements {
+    stdText: TextGeometryImpl
   }
 }
 

.storybook/stories/Extrude.stories.tsx

@@ -22,7 +22,7 @@ export default {
 type Story = StoryObj<typeof Extrude>
 
 function ExtrudeScene(props: React.ComponentProps<typeof Extrude>) {
-  const ref = useTurntable<React.ElementRef<typeof Extrude>>()
+  const ref = useTurntable<React.ComponentRef<typeof Extrude>>()
 
   return (
     <>

.storybook/stories/FaceControls.stories.tsx

@@ -7,7 +7,7 @@ import * as easing from 'maath/easing'
 import { Setup } from '../Setup'
 
 import { FaceLandmarker, FaceControls, Box, WebcamVideoTexture } from '../../src'
-import { ComponentProps, ElementRef, useRef, useState } from 'react'
+import { ComponentProps, ComponentRef, useRef, useState } from 'react'
 import { FaceLandmarkerResult } from '@mediapipe/tasks-vision'
 import { useFrame, useThree } from '@react-three/fiber'
 
@@ -55,8 +55,8 @@ export const FaceControlsSt = {
 //
 
 function FaceControlsScene2(props: ComponentProps<typeof FaceControls>) {
-  const faceLandmarkerRef = useRef<ElementRef<typeof FaceLandmarker>>(null)
-  const videoTextureRef = useRef<ElementRef<typeof WebcamVideoTexture>>(null)
+  const faceLandmarkerRef = useRef<ComponentRef<typeof FaceLandmarker>>(null)
+  const videoTextureRef = useRef<ComponentRef<typeof WebcamVideoTexture>>(null)
 
   const [faceLandmarkerResult, setFaceLandmarkerResult] = useState<FaceLandmarkerResult>()
 
@@ -99,7 +99,7 @@ export const FaceControlsSt2 = {
 //
 
 function FaceControlsScene3(props: ComponentProps<typeof FaceControls>) {
-  const faceControlsRef = useRef<ElementRef<typeof FaceControls>>(null)
+  const faceControlsRef = useRef<ComponentRef<typeof FaceControls>>(null)
 
   const camera = useThree((state) => state.camera)
   const [current] = useState(() => new THREE.Object3D())

.storybook/stories/Fbo.stories.tsx

@@ -22,7 +22,7 @@ export default {
 type Story = StoryObj<typeof Fbo>
 
 function SpinningThing() {
-  const mesh = React.useRef<React.ElementRef<typeof TorusKnot>>(null!)
+  const mesh = React.useRef<React.ComponentRef<typeof TorusKnot>>(null!)
 
   useFrame(() => {
     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>) {
 }
 
 function TargetWrapper({ target }: { target: THREE.WebGLRenderTarget }) {
-  const cam = React.useRef<React.ElementRef<typeof PerspectiveCamera>>(null!)
+  const cam = React.useRef<React.ComponentRef<typeof PerspectiveCamera>>(null!)
 
   const scene = React.useMemo(() => {
     const scene = new THREE.Scene()

.storybook/stories/HTML.stories.tsx

@@ -31,7 +31,7 @@ function HTMLScene({
   color?: React.ComponentProps<'meshBasicMaterial'>['color']
   children?: React.ReactNode
 } & HtmlProps) {
-  const ref = useTurntable<React.ElementRef<'group'>>()
+  const ref = useTurntable<React.ComponentRef<'group'>>()
 
   return (
     <group ref={ref}>
@@ -164,8 +164,8 @@ export const HTMLCalculatePositionSt = {
 //
 
 function HTMLOccluderScene(props: HtmlProps) {
-  const turntableRef = useTurntable<React.ElementRef<'group'>>()
-  const occluderRef = React.useRef<React.ElementRef<typeof Icosahedron>>(null)
+  const turntableRef = useTurntable<React.ComponentRef<'group'>>()
+  const occluderRef = React.useRef<React.ComponentRef<typeof Icosahedron>>(null)
 
   return (
     <>

.storybook/stories/Lathe.stories.tsx

@@ -22,7 +22,7 @@ export default {
 type Story = StoryObj<typeof Lathe>
 
 function LatheScene(props: React.ComponentProps<typeof Lathe>) {
-  const ref = useTurntable<React.ElementRef<typeof Lathe>>()
+  const ref = useTurntable<React.ComponentRef<typeof Lathe>>()
 
   return (
     <Lathe ref={ref} {...props}>

.storybook/stories/MarchingCubes.stories.tsx

@@ -35,8 +35,8 @@ function MarchingCubesScene({
   planeY?: boolean
   planeZ?: boolean
 } & React.ComponentProps<typeof MarchingCubes>) {
-  const cubeRefOne = React.useRef<React.ElementRef<typeof MarchingCube>>(null)
-  const cubeRefTwo = React.useRef<React.ElementRef<typeof MarchingCube>>(null)
+  const cubeRefOne = React.useRef<React.ComponentRef<typeof MarchingCube>>(null)
+  const cubeRefTwo = React.useRef<React.ComponentRef<typeof MarchingCube>>(null)
 
   useFrame(({ clock }) => {
     if (!cubeRefOne.current || !cubeRefTwo.current) return

.storybook/stories/MeshDistortMaterial.stories.tsx

@@ -47,7 +47,7 @@ export const MeshDistortMaterialSt = {
 //
 
 function MeshDistortMaterialRefScene(props: React.ComponentProps<typeof MeshDistortMaterial>) {
-  const material = React.useRef<React.ElementRef<typeof MeshDistortMaterial>>(null!)
+  const material = React.useRef<React.ComponentRef<typeof MeshDistortMaterial>>(null!)
 
   useFrame(({ clock }) => {
     material.current.distort = Math.sin(clock.getElapsedTime())

.storybook/stories/MeshRefractionMaterial.stories.tsx

@@ -39,7 +39,7 @@ function Diamond({
   rotation: React.ComponentProps<'mesh'>['rotation']
   position: React.ComponentProps<'mesh'>['position']
 } & React.ComponentProps<typeof MeshRefractionMaterial>) {
-  const ref = React.useRef<React.ElementRef<'mesh'>>(null)
+  const ref = React.useRef<React.ComponentRef<'mesh'>>(null)
   const { nodes } = useGLTF('/dflat.glb') as any
   // Use a custom envmap/scene-backdrop for the diamond material
   // This way we can have a clear BG while cube-cam can still film other objects

.storybook/stories/MeshWobbleMaterial.stories.tsx

@@ -45,7 +45,7 @@ export const MeshWobbleMaterialSt = {
 //
 
 function MeshWobbleMaterialRefScene(props: React.ComponentProps<typeof MeshWobbleMaterial>) {
-  const material = React.useRef<React.ElementRef<typeof MeshWobbleMaterial>>(null)
+  const material = React.useRef<React.ComponentRef<typeof MeshWobbleMaterial>>(null)
 
   useFrame(({ clock }) => {
     if (material.current === null) return

.storybook/stories/OrbitControls.stories.tsx

@@ -50,7 +50,7 @@ const CustomCamera = (props: OrbitControlsProps) => {
    * we will render our scene in a render target and use it as a map.
    */
   const fbo = useFBO(400, 400)
-  const virtualCamera = useRef<React.ElementRef<typeof PerspectiveCamera> | null>(null)
+  const virtualCamera = useRef<React.ComponentRef<typeof PerspectiveCamera> | null>(null)
   const [virtualScene] = useState(() => new Scene())
 
   useFrame(({ gl }) => {

.storybook/stories/Reflector.stories.tsx

@@ -42,7 +42,7 @@ function ReflectorScene({
   const roughnessMap = useTexture('roughness_floor.jpeg')
   const normalMap = useTexture('NORM.jpg')
   const distortionMap = useTexture('dist_map.jpeg')
-  const $box = React.useRef<React.ElementRef<typeof TorusKnot>>(null!)
+  const $box = React.useRef<React.ComponentRef<typeof TorusKnot>>(null!)
 
   React.useEffect(() => {
     distortionMap.wrapS = distortionMap.wrapT = RepeatWrapping

.storybook/stories/RoundedBox.stories.tsx

@@ -22,7 +22,7 @@ export default {
 type Story = StoryObj<typeof RoundedBox>
 
 function RoundedBoxScene(props: React.ComponentProps<typeof RoundedBox>) {
-  const ref = useTurntable<React.ElementRef<typeof RoundedBox>>()
+  const ref = useTurntable<React.ComponentRef<typeof RoundedBox>>()
 
   return (
     <RoundedBox ref={ref} {...props}>
@@ -44,7 +44,7 @@ export const RoundedBoxSt = {
 //
 
 function RoundedBoxScene2(props: React.ComponentProps<typeof RoundedBox>) {
-  const ref = useTurntable<React.ElementRef<typeof RoundedBox>>()
+  const ref = useTurntable<React.ComponentRef<typeof RoundedBox>>()
 
   return (
     <>

.storybook/stories/Sampler.stories.tsx

@@ -4,7 +4,7 @@ import { Meta, StoryObj } from '@storybook/react'
 import { Setup } from '../Setup'
 
 import { Sampler, ComputedAttribute, TransformFn } from '../../src'
-import { BufferAttribute, Vector3 } from 'three'
+import { BufferAttribute, InstancedMesh, Mesh, Vector3 } from 'three'
 
 export default {
   title: 'Misc/Sampler',
@@ -49,8 +49,8 @@ export const SamplerSt = {
 //
 
 function RefAPIScene(props: React.ComponentProps<typeof Sampler>) {
-  const meshRef = React.useRef(null)
-  const instancesRef = React.useRef(null)
+  const meshRef = React.useRef<Mesh>(null!)
+  const instancesRef = React.useRef<InstancedMesh>(null!)
 
   return (
     <>

.storybook/stories/ScreenQuad.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import * as THREE from 'three'
-import { extend, useThree, useFrame } from '@react-three/fiber'
+import { extend, useThree, useFrame, ThreeElements } from '@react-three/fiber'
 import { Meta, StoryObj } from '@storybook/react'
 
 import { Setup } from '../Setup'
@@ -47,22 +47,18 @@ const ColorShiftMaterial = shaderMaterial(
 
 extend({ ColorShiftMaterial })
 
-type ColorShiftMaterialImpl = {
-  time: number
-  resolution: number[]
-} & JSX.IntrinsicElements['shaderMaterial']
-
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      colorShiftMaterial: ColorShiftMaterialImpl
+declare module '@react-three/fiber' {
+  interface ThreeElements {
+    colorShiftMaterial: ThreeElements['shaderMaterial'] & {
+      time: number
+      resolution: number[]
     }
   }
 }
 
 function ScreenQuadScene(props: React.ComponentProps<typeof ScreenQuad>) {
   const size = useThree((state) => state.size)
-  const ref = React.useRef<React.ElementRef<'colorShiftMaterial'>>(null!)
+  const ref = React.useRef<ThreeElements['colorShiftMaterial']>(null!)
 
   useFrame((state) => {
     if (ref.current.uniforms) {

.storybook/stories/Segments.stories.tsx

@@ -49,7 +49,7 @@ export const BasicSegmentsSt = {
 //
 
 function AnimatedSegments(props: React.ComponentProps<typeof Segments>) {
-  const ref = React.useRef<React.ElementRef<typeof Segment>[]>([])
+  const ref = React.useRef<React.ComponentRef<typeof Segment>[]>([])
   useFrame(({ clock }) => {
     ref.current.forEach((r, i) => {
       const time = clock.elapsedTime
@@ -64,7 +64,16 @@ function AnimatedSegments(props: React.ComponentProps<typeof Segments>) {
   return (
     <Segments {...props}>
       {Array.from({ length: 10000 }).map((_, i) => (
-        <Segment key={i} ref={(r) => (ref.current[i] = r!)} color="orange" start={[0, 0, 0]} end={[0, 0, 0]} />
+        <Segment
+          key={i}
+          ref={(r) => {
+            ref.current[i] = r!
+            return () => void (ref.current[i] = null!)
+          }}
+          color="orange"
+          start={[0, 0, 0]}
+          end={[0, 0, 0]}
+        />
       ))}
     </Segments>
   )

.storybook/stories/Shadow.stories.tsx

@@ -21,8 +21,8 @@ export default {
 type Story = StoryObj<typeof Shadow>
 
 function ShadowScene(props: React.ComponentProps<typeof Shadow>) {
-  const shadow = React.useRef<React.ElementRef<typeof Shadow>>(null!)
-  const mesh = React.useRef<React.ElementRef<typeof Icosahedron>>(null!)
+  const shadow = React.useRef<React.ComponentRef<typeof Shadow>>(null!)
+  const mesh = React.useRef<React.ComponentRef<typeof Icosahedron>>(null!)
 
   useFrame(({ clock }) => {
     shadow.current.scale.x = Math.sin(clock.getElapsedTime()) + 3

.storybook/stories/Shapes.Box.stories.tsx

@@ -21,7 +21,7 @@ export default {
 type Story = StoryObj<typeof Box>
 
 function BoxScene(props: React.ComponentProps<typeof Box>) {
-  const ref = useTurntable<React.ElementRef<typeof Box>>()
+  const ref = useTurntable<React.ComponentRef<typeof Box>>()
 
   return (
     <Box ref={ref} {...props}>

.storybook/stories/Shapes.Circle.stories.tsx

@@ -21,7 +21,7 @@ export default {
 type Story = StoryObj<typeof Circle>
 
 function CircleScene(props: React.ComponentProps<typeof Circle>) {
-  const ref = useTurntable<React.ElementRef<typeof Circle>>()
+  const ref = useTurntable<React.ComponentRef<typeof Circle>>()
 
   return (
     <Circle ref={ref} {...props}>