typescript - Shaders with Typescript 和 React 三纤

Question

我正在尝试将着色器与 React-three-fiber 和 Typescript 结合使用。着色器文件:

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

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

extend({ CustomMaterial })

和组件文件:

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

我遇到错误:

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

Answer 1

尝试:

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

您可能还需要在导入中坚持以下内容:

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