带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>

我收到错误：

类型上不存在属性"customMaterial"'JSX。IntrinsicElements。

Answer 1

尝试：

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

你可能还需要在你的进口中坚持以下几点：

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

Answer 2

我只想补充一点，如果你想添加自定义材料以外的东西，你可以使用ReactThreeFiber。Object3DNode。

我试图让轨道控制系统发挥作用，并设法用以下方法做到了这一点：

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