fix(types): remove references to Shader type (#1765)

src/core/MeshDistortMaterial.tsx

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

src/core/MeshWobbleMaterial.tsx

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

src/core/useBoxProjectedEnv.tsx

@@ -49,9 +49,17 @@ const getIBLRadiance_patch = /* glsl */ `
 #endif
 `
 
-function boxProjectedEnvMap(shader: THREE.Shader, envMapPosition: THREE.Vector3, envMapSize: THREE.Vector3) {
+// 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 }
+}
+
+function boxProjectedEnvMap(shader: MaterialShader, envMapPosition: THREE.Vector3, envMapSize: THREE.Vector3) {
   // defines
-  ;(shader as any).defines.BOX_PROJECTED_ENV_MAP = true
+  shader.defines!.BOX_PROJECTED_ENV_MAP = true
   // uniforms
   shader.uniforms.envMapPosition = { value: envMapPosition }
   shader.uniforms.envMapSize = { value: envMapSize }
@@ -89,7 +97,7 @@ export function useBoxProjectedEnv(
   const spread = React.useMemo(
     () => ({
       ref,
-      onBeforeCompile: (shader: THREE.Shader) => boxProjectedEnvMap(shader, config.position, config.size),
+      onBeforeCompile: (shader: MaterialShader) => boxProjectedEnvMap(shader, config.position, config.size),
       customProgramCacheKey: () => JSON.stringify(config.position.toArray()) + JSON.stringify(config.size.toArray()),
     }),
     [...config.position.toArray(), ...config.size.toArray()]