Shaders with Typescript 和 React 三纤
Shaders with Typescript and React three fiber
我正在尝试将着色器与 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'.
尝试:
declare global {
namespace JSX {
interface IntrinsicElements {
customMaterial: ReactThreeFiber.Object3DNode<CustomMaterial, typeof CustomMaterial>
}
}
}
您可能还需要在导入中坚持以下内容:
import { extend } from 'react-three-fiber'
...
extend ({ CustomMaterial })
只想补充一点,如果您尝试添加自定义内容以外的内容 material,您可以使用 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 });
我正在尝试将着色器与 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'.
尝试:
declare global {
namespace JSX {
interface IntrinsicElements {
customMaterial: ReactThreeFiber.Object3DNode<CustomMaterial, typeof CustomMaterial>
}
}
}
您可能还需要在导入中坚持以下内容:
import { extend } from 'react-three-fiber'
...
extend ({ CustomMaterial })
只想补充一点,如果您尝试添加自定义内容以外的内容 material,您可以使用 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 });