Fix/2514 update types three webglprogram

package.json

@@ -91,7 +91,7 @@
     "@storybook/react-vite": "^9.1.2",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",
-    "@types/three": "^0.159.0",
+    "@types/three": "^0.161.0",
     "@typescript-eslint/eslint-plugin": "^8.15.0",
     "@typescript-eslint/parser": "^8.15.0",
     "@vitejs/plugin-react": "^4.3.3",

src/core/MeshDistortMaterial.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { IUniform, MeshPhysicalMaterial, MeshPhysicalMaterialParameters } from 'three'
+import { MeshPhysicalMaterial, MeshPhysicalMaterialParameters, WebGLProgramParametersWithUniforms } from 'three'
 import { ThreeElements, useFrame } from '@react-three/fiber'
 // @ts-ignore
 import distort from '../helpers/glsl/distort.vert.glsl'
@@ -22,8 +22,7 @@ class DistortMaterialImpl extends MeshPhysicalMaterial {
     this._radius = { value: 1 }
   }
 
-  // FIXME Use `THREE.WebGLProgramParametersWithUniforms` type when able to target @types/[email protected]
-  onBeforeCompile(shader: { vertexShader: string; uniforms: { [uniform: string]: IUniform } }) {
+  onBeforeCompile(shader: WebGLProgramParametersWithUniforms) {
     shader.uniforms.time = this._time
     shader.uniforms.radius = this._radius
     shader.uniforms.distort = this._distort

src/core/MeshTransmissionMaterial.tsx

@@ -66,12 +66,6 @@ interface Uniform<T> {
   value: T
 }
 
-interface Shader {
-  uniforms: { [uniform: string]: Uniform<any> }
-  vertexShader: string
-  fragmentShader: string
-}
-
 declare module '@react-three/fiber' {
   interface ThreeElements {
     meshTransmissionMaterial: MeshTransmissionMaterialType
@@ -121,7 +115,9 @@ class MeshTransmissionMaterialImpl extends THREE.MeshPhysicalMaterial {
       buffer: { value: null },
     }
 
-    this.onBeforeCompile = (shader: Shader & { defines: { [key: string]: string } }) => {
+    this.onBeforeCompile = (
+      shader: THREE.WebGLProgramParametersWithUniforms & { defines: { [key: string]: string } }
+    ) => {
       shader.uniforms = {
         ...shader.uniforms,
         ...this.uniforms,

src/core/MeshWobbleMaterial.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { IUniform, MeshStandardMaterial, MeshStandardMaterialParameters } from 'three'
+import { WebGLProgramParametersWithUniforms, MeshStandardMaterial, MeshStandardMaterialParameters } from 'three'
 import { ThreeElements, useFrame } from '@react-three/fiber'
 import { ForwardRefComponent } from '../helpers/ts-utils'
 
@@ -18,8 +18,7 @@ class WobbleMaterialImpl extends MeshStandardMaterial {
     this._factor = { value: 1 }
   }
 
-  // FIXME Use `THREE.WebGLProgramParametersWithUniforms` type when able to target @types/[email protected]
-  onBeforeCompile(shader: { vertexShader: string; uniforms: { [uniform: string]: IUniform } }) {
+  onBeforeCompile(shader: WebGLProgramParametersWithUniforms) {
     shader.uniforms.time = this._time
     shader.uniforms.factor = this._factor
 

src/core/Wireframe.tsx

@@ -151,6 +151,8 @@ function WireframeWithCustomGeo({
               fragDepth: false,
               drawBuffers: false,
               shaderTextureLOD: false,
+              clipCullDistance: false,
+              multiDraw: false,
             }}
           />
         </mesh>

src/core/useBoxProjectedEnv.tsx

@@ -49,13 +49,7 @@ const getIBLRadiance_patch = /* glsl */ `
 #endif
 `
 
-// FIXME Replace with `THREE.WebGLProgramParametersWithUniforms` type when able to target @types/[email protected]
-interface MaterialShader {
-  vertexShader: string
-  fragmentShader: string
-  defines: { [define: string]: string | number | boolean } | undefined
-  uniforms: { [uniform: string]: THREE.IUniform }
-}
+type MaterialShader = THREE.WebGLProgramParametersWithUniforms
 
 function boxProjectedEnvMap(shader: MaterialShader, envMapPosition: THREE.Vector3, envMapSize: THREE.Vector3) {
   // defines

yarn.lock

@@ -2809,7 +2809,7 @@ __metadata:
     "@storybook/react-vite": "npm:^9.1.2"
     "@types/react": "npm:^19.0.2"
     "@types/react-dom": "npm:^19.0.2"
-    "@types/three": "npm:^0.159.0"
+    "@types/three": "npm:^0.161.0"
     "@typescript-eslint/eslint-plugin": "npm:^8.15.0"
     "@typescript-eslint/parser": "npm:^8.15.0"
     "@use-gesture/react": "npm:^10.3.1"
@@ -3694,15 +3694,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/three@npm:^0.159.0":
-  version: 0.159.0
-  resolution: "@types/three@npm:0.159.0"
+"@types/three@npm:^0.161.0":
+  version: 0.161.2
+  resolution: "@types/three@npm:0.161.2"
   dependencies:
     "@types/stats.js": "npm:*"
     "@types/webxr": "npm:*"
     fflate: "npm:~0.6.10"
     meshoptimizer: "npm:~0.18.1"
-  checksum: 10c0/c5ec776ba213d148f0ebcce07b7a31514b8676d20e3d19458ba46d286c87c9d95224ee9225872d18c771110563c712f0237ec5d2264ad7ab7b47f2d4c1fd93a9
+  checksum: 10c0/b8f49ee5eff1ec137444753e8f65a0d51fe493f6efeb157c2a7a0049300482d1fafef63f1c5bcfabab7568be65b569a3676d6bc9d718bc69143ab93e9638d7cd
   languageName: node
   linkType: hard