Cubes and spheres are OK, but it’s much more fun to be able to use more complex 3D models that you buy or design yourself.
(Note: in a later lesson, we’ll look into how to make your own 3D models too)
There are many file formats (see bottom of page), but GLTF is the simplest for Three.js/React-Three-Fiber.
Where to find free GLTF files
The GLTF file format
GLTF stands for GL Transmission Format. There’s a binary form with one big file (.glb) and an open form with multiple files. In the open form, the .gltf file is a JSON file describing the file contents.
Multiple GLTF meshes
A GLTF file can have multiple meshes (3D objects). The camera in this example has two: camera_uv and tripod_uv.
GLTF textures
A GLTF model has one or more textures as PNG files: (Base)Color, Normal, and Roughness.
Where to host your 3D models
Place your 3D models where you would place image and video files, e.g. in your /public folder. If you use the open format with multiple files, place each model in a separate subfolder e.g. /public/MyModel/.
Creating a React Component from a GLTF file to with gltfjsx
gltfjsx is a great command-line tool for converting GLTF files.
You use it like this:
npx @react-three/gltfjsx public/MyModel/MyModel.gltf
The tool will generate a MyModel.js that you can place in your React project.
Loading your 3D model component in your React project
The useGLTF React hook is used to load the file. It work asynchronously, so you need to use <Suspense> higher up in the React component tree.
Other 3D formats supported by Three.js/React-Three-Fiber
Three.js (the 3D engine powering React-Three-Fiber) has loaders for these 3D formats:
- 3DM
- 3MF
- AMF
- Assimp
- BVH
- BasisTexture
- Collada
- DDS
- DRACO
- EXR
- FBX
- GCode
- GLTF
- HDRCubeTexture
- KMZ
- KTX2
- KTX
- LDraw
- LUT3dl
- LUTCube
- LWO
- Lottie
- MD2
- MDD
- MMD
- MTL
- NRRD
- NodeMaterial
- OBJ
- OBJ2
- OBJ2Parallel
- PCD
- PDB
- PLY
- PRWM
- PVR
- RGBE
- STL
- SVG
- TDS
- TGA
- TTF
- VOX
- VRML
- VRM
- VTK
- X
- XYZ