使用 Typescript 和 React 三纤维的着色器答案

【问题标题】：Shaders with Typescript and React three fiber使用 Typescript 和 React 三纤维的着色器
【发布时间】：2021-04-04 03:03:50
【问题描述】：

我正在尝试将着色器与 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'。

【问题讨论】：

标签： typescript react-three-fiber

【解决方案1】：

试试：

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

您可能还需要在导入时坚持以下内容：

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

【讨论】：

【解决方案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 });

【讨论】：