GltfModel

Introduction

The GltfModel class extends from THREE.group from the Three.js library, providing functionality to load and manipulate GLTF models. It allows for setting initial properties such as position, scale, and debug mode, and includes methods to load the model and process its materials.

Getting started

Javascript

The GltfModel class is used when creating your own model class to be used in a ThreeJsViewer instance. The class can be extended and used to load a GLTF model and set initial properties.

When extending the class, you can set the initial properties of the model in the constructor like so:

class ExampleModel extends GltfModel {
    constructor(args = {}) {
        super(args);
        this.position.set(0, 0, 0);
        this.scale.set(1, 1, 1);
    }
}

You can also apply custom materials to the model you are loading. To use the custom materials you can pass a customMaterials object that maps the name of the mesh you want to apply the materials to to the Three.js material in the load method like so:

this.load({
    customMaterials: {
        "exampleMeshName": // a Three.js material
    }
    ...args,
});

Debug mode

When debug mode is enabled, the following information is displayed in the console:

• The list of available materials from the gltf file
• A mapping of which material is applied to which mesh

External dependencies

• Three.js: The main library used to create the 3D scene.