3D on the Web3D on the Web

Learn how to make 3D on the web, with React. Don’t miss the next lesson – sign up below!

Lesson 04: Loading 3D files

How to load your own custom 3D models (GLTF files).

Feel free to play with the example below, and see how the output changes:

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

Learn how to make 3D on the web, with React. Don’t miss the next lesson – sign up below!