Define TypeScript types for custom Three.js shader materials

src/App.tsx

@@ -1,3 +1,5 @@
+/// <reference path="./types/three-jsx.d.ts" />
+
 import { Editor } from './scenes/Editor'
 import { Plaza } from './scenes/Plaza'
 import { Box } from '@mui/material'
@@ -133,7 +135,6 @@ function App() {
                             <Preview.Scene />
                             <mesh>
                                 <sphereGeometry args={[100, 32, 32]} />
-                                {/* @ts-ignore */}
                                 <skybox side={2} />
                             </mesh>
                         </Canvas>

src/scenes/Plaza.tsx

@@ -1,3 +1,5 @@
+/// <reference path="../types/three-jsx.d.ts" />
+
 import { createContext, memo, Suspense, useContext, useMemo, useState, type Dispatch, type SetStateAction } from 'react'
 import { Object3D, RepeatWrapping, SRGBColorSpace, Texture, TextureLoader, Vector3 } from 'three'
 
@@ -135,7 +137,6 @@ Plaza.Scene = (props: { avatars: string[]; setView: (position: Vector3, lookAt:
                     position={[0, -0.005, 0]}
                 >
                     <cylinderGeometry args={[20.0, 20.0, 0.01, 32]} />
-                    {/* @ts-ignore */}
                     <fadingFloorMaterial fadeRadius={20} map={texture} />
                 </mesh>
                 <AvatarsRenderer

src/types/three-jsx.d.ts

@@ -0,0 +1,82 @@
+import { Texture } from 'three'
+import { ThreeElement } from '@react-three/fiber'
+
+// Define the uniform types for our custom materials
+interface SkyboxUniforms {
+    topColor: [number, number, number]
+    middleColor: [number, number, number]
+    bottomColor: [number, number, number]
+    offset: number
+    exponent: number
+}
+
+interface FadingFloorMaterialUniforms {
+    map: Texture | null
+    fadeRadius: number
+}
+
+// Define the material types
+type SkyboxMaterial = THREE.ShaderMaterial & SkyboxUniforms
+type FadingFloorMaterialType = THREE.ShaderMaterial & FadingFloorMaterialUniforms
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            skybox: ThreeElement<typeof THREE.ShaderMaterial> & {
+                // Override with our specific props
+                topColor?: [number, number, number]
+                middleColor?: [number, number, number]
+                bottomColor?: [number, number, number]
+                offset?: number
+                exponent?: number
+                side?: number
+            }
+            fadingFloorMaterial: ThreeElement<typeof THREE.ShaderMaterial> & {
+                // Override with our specific props
+                map?: Texture | null
+                fadeRadius?: number
+            }
+        }
+    }
+}
+
+// Also extend the react/jsx-runtime module for consistency
+declare module 'react/jsx-runtime' {
+    namespace JSX {
+        interface IntrinsicElements {
+            skybox: ThreeElement<typeof THREE.ShaderMaterial> & {
+                topColor?: [number, number, number]
+                middleColor?: [number, number, number]
+                bottomColor?: [number, number, number]
+                offset?: number
+                exponent?: number
+                side?: number
+            }
+            fadingFloorMaterial: ThreeElement<typeof THREE.ShaderMaterial> & {
+                map?: Texture | null
+                fadeRadius?: number
+            }
+        }
+    }
+}
+
+declare module 'react/jsx-dev-runtime' {
+    namespace JSX {
+        interface IntrinsicElements {
+            skybox: ThreeElement<typeof THREE.ShaderMaterial> & {
+                topColor?: [number, number, number]
+                middleColor?: [number, number, number]
+                bottomColor?: [number, number, number]
+                offset?: number
+                exponent?: number
+                side?: number
+            }
+            fadingFloorMaterial: ThreeElement<typeof THREE.ShaderMaterial> & {
+                map?: Texture | null
+                fadeRadius?: number
+            }
+        }
+    }
+}
+
+export {}