使用Typescript和React three fiber编写着色器

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>

我遇到了错误：

在类型“JSX.IntrinsicElements”上不存在属性“customMaterial”。

- Bakr

Answer 1

请尝试：

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

你可能还需要在导入中添加以下内容：

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

- Jon

---

很抱歉打扰这个旧帖子，但我在同样的问题上卡住了。请问我应该把这个声明全局变量放在哪里？ - Jeekim

Answer 2

只想补充一点，如果你想添加的不是自定义材质，可以使用ReactThreeFiber.Object3DNode。

我试图让OrbitControls起作用，并成功地使用了以下方法：

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 });

- IgnWombat