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 /> 自定义资源地址。

ts
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/" />