00:00/00:00TIME LEFT
Choosing the a bcd
3:22
00:03:22

Shortcuts

  • SPACE to play / pause
  • ARROW RIGHT or L to go forward
  • ARROW LEFT or J to go backward
  • ARROW UP to increase volume
  • ARROW DOWN to decrease volume
  • F to toggle fullscreen
  • M to toggle mute
  • 0 to 9 to go to the corresponding part of the video
  • SHIFT + , to decrease playback speed
  • SHIFT + . or ; to increase playback speed

Want to learn more?

That's the end of the free part 😔

To get access to 45 hours of video, a members-only Discord server and futur updates, join us for only $95!

38.

Importing and optimizing the scene

Difficulty Hard

Downloads

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 Dat.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.

Want to learn more?

That's the end of the free part 😔

To get access to 45 hours of video, a members-only Discord server and futur updates, join us for only $95!

Next lesson

Adding details to the scene

How to use it

  • Download the Starter pack or Final project
    (if your browser detects a menace, do not worry, it is not)
  • Unzip it
  • Open your terminal and go to the unzip folder
  • Run npm install command to install dependencies
  • Run npm run dev to launch the local server
    (your browser should start automatically)

You can now 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

Any trouble? Go to the discord server: