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.