LOADING GLTF MODELS

Once you have created a gltf/glb model, you will need to load the model and related animations into three.js.

a. Loading Your Model into Three.js

Three.js contains a helper program named GLTFLoader.js that you can use to load GLTF and GLB models into your program. In your three.js download, you can find this program in the "examples/js/loaders" folder. You can copy this program to the js folder associated with your program. You would then include a reference to this file at the beginning of your program, e.g.:

<script src = "js/loaders/GLTFLoader.js"></script>

You can then reference this program when assigning variables, e.g.:

let gltfLoader = new THREE.GLTFLoader();

Because of the different way that GLTF handles colors, you will want to add a command to your renderer variable. For example, if you have something like:

let renderer = new THREE.WebGLRenderer({antialias: true});

you will want to add this line:

     renderer.outputEncoding = THREE.sRGBEncoding;

Create a veriable to hold the address of the GLTF object, e.g.:

let airobj = 0;

Create a variable to hold the address of the GLTF file, e.g::

let fname = "models/b29/b29.glb";

Then you can create a subroutine to handle the loading the file and displaying the object, such as:

function loadAirPln() {
    gltfLoader.load(fname, function (gltf) {
        gltf.scene.traverse(function (child) {
            if (child.isMesh) child.material.envMap = envMap;
        });
        airobj = gltf.scene;
    scene.add(airobj);
    });
}

Simply call this subroutine in your program using:

    loadAirPln();

and your object should be loaded and displayed.

b. Loading Your Model into Three.js - Using Modules

Three.js contains a helper program named GLTFLoader.jsm that you can use to load GLTF and GLB models into your program. In your three.js download, you can find this program in the "examples/jsm/loaders" folder. You can copy this program to the js folder associated with your program (e.g. mod139/. You would then include a reference to this file at the beginning of your program, e.g.mod139/examples/jsm/loaders:

import {GLTFLoader} from "./mod139/examples/jsm/loaders/GLTFLoader.js";

You can then reference this program when assigning variables, e.g.:

let gltfLoader = new GLTFLoader();

Because of the different way that GLTF handles colors, you will want to add a command to your renderer variable. For example, if you have something like:

let renderer = new WebGLRenderer({antialias: true});

you will want to add this line:

     renderer.outputEncoding = sRGBEncoding;

Create a veriable to hold the address of the GLTF object, e.g.:

let airobj = 0;

Create a variable to hold the address of the GLTF file, e.g::

let fname = "models/b29/b29.glb";

Then you can create a subroutine to handle the loading the file and displaying the object, such as:

function loadAirPln() {
    gltfLoader.load(fname, function (gltf) {
        gltf.scene.traverse(function (child) {
            if (child.isMesh) child.material.envMap = envMap;
        });
        airobj = gltf.scene;
    scene.add(airobj);
    });
}

Simply call this subroutine in your program using:

    loadAirPln();

and your object should be loaded and displayed.