Shaders with Typescript and React three fiber

user_6289495 0
Viewed 1125

I'm trying to use shaders with React-three-fiber and Typescript. Shader file:

import { ShaderMaterial } from "three"
import { extend } from "react-three-fiber"

class CustomMaterial extends ShaderMaterial {
  constructor() {
    super({
      vertexShader: `...`,
      fragmentShader: `...`,
      uniforms: [...]
    })
  }
}

extend({ CustomMaterial })

and the component file:

<mesh
  key={el.name}
  material={el.material}
  receiveShadow
  castShadow
>
  <bufferGeometry attach="geometry" {...el.geometry} />
  <customMaterial attach="material" />
</mesh>

I'm getting error:

Property 'customMaterial' does not exist on type 'JSX.IntrinsicElements'.

react-three-fiber typescript
2 Answers

Try:

declare global {
  namespace JSX {
    interface IntrinsicElements {
      customMaterial: ReactThreeFiber.Object3DNode<CustomMaterial, typeof CustomMaterial>
    }
  }
}

You might also need to stick in the following in your imports:

import { extend } from 'react-three-fiber'
...
extend ({ CustomMaterial })
user_7723330

Would just like to add that if you're trying to add something other than a custom material, you can use ReactThreeFiber.Object3DNode.

I was trying to get OrbitControls to work, and managed to do it with the following method:

import { extend } from '@react-three/fiber';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

declare global {
    namespace JSX {
        interface Intrinsicelements {
            orbitControls: ReactThreeFiber.Node<OrbitControls, typeof OrbitControls>;
        }
    }
}

extend({ OrbitControls });
user_178837080
Related