react-three-fiber 使用指南
Published by powerfulyang on Jun 8, 2023
记录在使用 react-three-fiber 中遇到的问题。
TS2339: Property 'materials' does not exist on type 'GLTF'.
TS2339 is an error that occurs when a property does not exist on a type. For example, Property 'materials' does not exist on type 'GLTF'
.
You can use the gltfjsx
module to convert .glb to .tsx. You can run npx gltfjsx file.glb -t
or npx gltfjsx file.glb --types
.
和 Next.js 搭配使用
Next.js: 需要设置 transpilePackages: ['@react-three/drei']
有些资源是从 CDN 加载的,资源可能被墙了,最好是自己管理
比如 useGLTF 或 <Environment /> 自定义资源地址。
1import { useGLTF, Environment } from '@react-three/drei';
2
3const { nodes, materials } = useGLTF(
4 '/materials/banana-v1-transformed.glb',
5 '/draco/1.5.6/',
6 ) as BananaGLTFResult;
7
8<Environment files="venice_sunset_1k.hdr" path="/hdri/" />