SPACE
to play / pauseARROW RIGHT
orL
to go forwardARROW LEFT
orJ
to go backwardARROW UP
to increase volumeARROW DOWN
to decrease volumeF
to toggle fullscreenM
to toggle mute0 to 9
to go to the corresponding part of the videoSHIFT
+,
to decrease playback speedSHIFT
+.
or;
to increase playback speed
Three.js documentation
GLTF -> React Three Fiber
Shortcuts ⌨️
Unlock content 🔓
To get access to 93 hours of video, a members-only Discord server, subtitles, lesson resources, future updates and much more join us for only $95!
Want to learn more? 🤘
That's the end of the free part 😔
To get access to 93 hours of video, a members-only Discord server and future updates, join us for only $95!
Introduction 00:00
In one of the previous lessons, we created a hamburger (although I realised it should have been named “cheeseburger”) and learned how to implement it in Three.js.
We are going to do the same with R3F and discover some tips and tricks along the way.
Setup 00:33
The starter is similar to the previous lesson with a sphere, a cube and a green floor.
We’ve also added <Perf />
from r3f-perf
in order to keep an eye on performance.
We activated the shadows on the <Canvas>
and added castShadow
and receiveShadow
on the corresponding <mesh>
and <directionalLight>
.
The @react-three/drei
dependency is already installed within the project and we are using the OrbitControls
helper to be able to move the camera around.
Clean up
In Experience.jsx
, we can start by removing the sphere <mesh>
and the cube <mesh>
that were there just to make sure that the shadows function:
export default function Experience()
{
return <>
<Perf position="top-left" />
<OrbitControls makeDefault />
<directionalLight castShadow position={ [ 1, 2, 3 ] } intensity={ 4.5 } />
<ambientLight intensity={ 1.5 } />
<mesh receiveShadow position-y={ - 1 } rotation-x={ - Math.PI * 0.5 } scale={ 10 }>
<planeGeometry />
<meshStandardMaterial color="greenyellow" />
</mesh>
</>
}
Loading a model 01:37
We have a bunch of models available in the /public/
folder and we are going to focus on the two hamburger
files for now.
One is DRACO compressed (hamburger-draco.glb
) and the other is not (hamburger.glb
).
In the following part, we are only going to discuss GLTF loading since it’s the standard and the most frequently used format, but the solutions we are going to see can be used with other formats.
R3F provides a hook named useLoader
that abstract loading.
In Experience.jsx
, import useLoader
from @react-three/fiber
:
import { useLoader } from '@react-three/fiber'
To use it, we need to send it the Three.js loader class we want to use and the path to the file.
Because it’s a GLTF, we need to import GLTFLoader from three
:
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
In Experience
, we can now call useLoader
:
export default function Experience()
{
const model = useLoader(GLTFLoader, './hamburger.glb')
console.log(model)
// ...
}
Note that we started the path to the file with ./
which should work in most cases. './hamburger.glb'
will look for the file named hamburger.glb
in the same folder and since the files located in the /public/
folder are made available like if they are at the root of the website, the model will load. Still, when putting your experience online, you might have to do some tweaks according to your website, the path to access it, specific folders structure and rewriting rules.
Back to our project, you should see an object containing our model in the console.
To display it in our scene, we need to add model.scene
somewhere in the JSX. Unfortunately, we can’t just write it like this:
{ model.scene }
Or like this:
<model.scene />
These commands are not supported by R3F and they don’t really make sense.
How to use it 🤔
- Download the Starter pack or Final project
- Unzip it
- Open your terminal and go to the unzip folder
-
Run
npm install
to install dependencies
(if your terminal warns you about vulnerabilities, ignore it) -
Run
npm run dev
to launch the local server
(project should open on your default browser automatically) - Start coding
- The JS is located in src/script.js
- The HTML is located in src/index.html
- The CSS is located in src/style.css