Once you have created a gltf/glb model, you will need to load the model and related animations 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.
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.