Until now, we have only used primitive shapes to create our 3D scenes (cube, sphere, plane, etc...).

But what make 3D graphics so interesting is the ability to import and display 3D models created with 3D modeling software such as Blender, Maya, Cinema 4D, Nomad Sculpt, etc...

Introduction

We won't do 3D modeling in this course as it's a whole topic on its own. It's not a mandatory skill to create 3D experiences with threejs and React Three Fiber. You can find many free 3D models online and use them in your projects. But learning the basics of 3D modeling can be very helpful to understand better how 3D models are made and how to use them in your projects.

If you follow this path, I recommend you to use Blender, which is a free and open-source 3D modeling software. It's a very powerful tool and there are many tutorials available online to learn how to use it.

The most famous one to get started is the Donut Tutorial from Blender Guru.

3D models

3D model are files that contain data about the geometry of the 3D model. They can also contain textures and animations.

There are many different file formats for 3D models. The most common ones are:

• .obj: A simple file format that only contains the geometry of the 3D model.
• .fbx: A binary file format that contains the geometry, the textures and the animations of the 3D model. It's the format used by Unity and Unreal Engine.
• .gltf: A JSON file format that contains the geometry, the textures and the animations of the 3D model. It's the recommended format for the web as it's a very compact format.
• .glb: The binary version of the .gltf format. It's a more compact format typically 33% smaller than the .gltf format.

In this course, we will use the .gltf and .glb formats.

It is easy to convert a 3D model from one format to another using Blender.

Finding 3D models

Here are some websites where you can find free 3D models:

• Poly Pizza: A collection of royalty-free low-poly 3D models
• Pmndrs Market: Another collection of royalty-free 3D assets (Yes from the creators of React Three Fiber!)
• Sketchfab: A platform to share and download 3D models. Many free models available!
• Unity Asset Store: Originally for Unity, but you can find many 3D models pack that you can use in your projects.
• Quaternius: A 3D artist who shares free 3D model packs on his website.
• Kenney: Another awesome creator who shares many high quality free 3D model packs.

In all cases, make sure to check the license of the 3D models you want to use. Some of them are free for personal use only, some are free for commercial use, and some are not free at all. Some also have custom licence to prevent the 3D models to be used in a specific context like NFTs.

Now we have our 3D models, let's see how to load them into our projects.

Project structure

The public folder is the root folder of our project. It's where we put all the static assets of our project (images, 3D models, audio files, etc...).

To keep our project organized, we will create a models folder in the public folder to store all our 3D models.

The starter pack already contains a models folder with some 3D models in it. They are from Quaternius.

useLoader

The base component to load any external resources in React Three Fiber is the useLoader hook. It's a hook that takes a loader as first argument and a url as second argument. It returns the loaded resource.

The loader is a class that extends the Loader class from threejs. There are many loaders available in threejs to load different types of resources. For example, the GLTFLoader is used to load .gltf and .glb files.

Let's load our first 3D model:

Copy
import { useLoader } from "@react-three/fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

export const Experience = () => {
  const model = useLoader(GLTFLoader, "models/Fish.gltf");

  return (
    <>
      <primitive object={model.scene} />
    </>
  );
};

The primitive component is used to display a threejs object in our scene. It takes an object prop that is the threejs object we want to display.

Our 3D model is now loaded and displayed in our scene. (Looks nice, right?)

useLoader takes care of caching the loaded resource. So if we load the same resource multiple times, it will only be loaded once.

useGLTF / useFBX

Drei library provides two hooks to load 3D models: useGLTF and useFBX. They are wrappers around the useLoader hook that are easier to use.

Let's update our existing code to use the useGLTF hook: