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
Shortcuts ⌨️
⚠️ Update
In the latest versions of Three.js, the texture color will look washed out.
Don’t worry, you will fix that in a minute.
⚠️ Update
Since the version 0.152 of Three.js encoding
has been replaced by colorSpace
:
bakedTexture.colorSpace = THREE.SRGBColorSpace
But the idea stays the same.
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!
Importing and optimizing the scene
Difficulty Hard
Introduction 00:00
In the previous lessons, we created and exported our scene.
We can now import it into Three.js, but we will also make sure to optimize our model as best as we possibly can.
Setup 00:12
Currently, all we have in our scene is a white cube.
The loaders have already been added to the code, and Draco is already supported:
/**
* Loaders
*/
// Texture loader
const textureLoader = new THREE.TextureLoader()
// Draco loader
const dracoLoader = new DRACOLoader()
dracoLoader.setDecoderPath('draco/')
// GLTF loader
const gltfLoader = new GLTFLoader()
gltfLoader.setDRACOLoader(dracoLoader)
The portal.glb
and baked.jpg
files are located in the /static/
folder but you can replace them with your own files.
An instance of lil-gui is also available, and we are going to add some tweaks to it in the next lesson.
The antialias is already set on the WebGLRenderer
.
Loading the model 01:46
We can start by loading the model. We are going to keep the cube in the scene to make sure that everything is working. Once we can see our portal scene, we will get rid of the cube.
Load the model after the loaders part and test the result in the console:
/**
* Model
*/
gltfLoader.load(
'portal.glb',
(gltf) =>
{
console.log(gltf.scene)
}
)
If you don't get the scene in the console log, check the path and search for errors.
We will now try to add the model to the scene:
gltfLoader.load(
'portal.glb',
(gltf) =>
{
scene.add(gltf.scene)
}
)
You should see some silhouettes.
The problem is that, by default, when GLTF exports PBR materials, they get interpreted as MeshStandardMaterial. And, this material needs light.
But we don't want lights because our scene is baked, and all the lighting and shadow information is already contained in the texture:
So, we are going to create a MeshBasicMaterial and apply it to all the elements in the scene.
Since we are going to create multiple materials, we need to create a section for them in the code before loading the model:
/**
* Materials
*/
// Baked material
const bakedMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 })
There are a lot of objects in the scene. Instead of applying the material to each one manually, we can traverse the scene in the load callback:
gltfLoader.load(
'portal.glb',
(gltf) =>
{
gltf.scene.traverse((child) =>
{
child.material = bakedMaterial
})
scene.add(gltf.scene)
}
)
You should get all the objects visible with a uniform red color.
Now, remove the code related to the white cube.
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