GLTFLoaderPlugin

Viewer plugin that loads models from glTF.

• Loads all glTF formats, including embedded and binary formats.
• Loads physically-based materials and textures.
• Creates an Entity representing each model it loads, which will have Entity#isModel set true and will be registered by Entity#id in Scene#models.
• Creates an Entity for each object within the model, which is indicated by each glTF node that has a name attribute. Those Entities will have Entity#isObject set true and will be registered by Entity#id in Scene#objects.
• When loading, can set the World-space position, scale and rotation of each model within World space, along with initial properties for all the model's Entitys.
• Not recommended for large models. For best performance with large glTF datasets, we recommend first converting them to .xkt format (eg. using convert2xkt), then loading the .xkt using XKTLoaderPlugin.

Metadata

GLTFLoaderPlugin can also load an accompanying JSON metadata file with each model, which creates a MetaModel corresponding to the model Entity and a MetaObject corresponding to each object Entity.

Each MetaObject has a MetaObject#type, which indicates the classification of its corresponding Entity. When loading metadata, we can also provide GLTFLoaderPlugin with a custom lookup table of initial values to set on the properties of each type of Entity. By default, GLTFLoaderPlugin uses its own map of default colors and visibilities for IFC element types.

Usage

In the example below we'll load a house plan model from a binary glTF file, along with an accompanying JSON IFC metadata file.

This will create a bunch of Entitys that represents the model and its objects, along with a MetaModel and MetaObjects that hold their metadata.

Since this model contains IFC types, the GLTFLoaderPlugin will set the initial colors of object Entitys according to the standard IFC element colors in the GLTFModel's current map. Override that with your own map via property GLTFLoaderPlugin#objectDefaults.

Read more about this example in the user guide on Viewing BIM Models Offline.

import {Viewer, GLTFLoaderPlugin} from "xeokit-sdk.es.js";

//------------------------------------------------------------------------------------------------------------------
// 1. Create a Viewer,
// 2. Arrange the camera,
// 3. Tweak the selection material (tone it down a bit)
//------------------------------------------------------------------------------------------------------------------

// 1
const viewer = new Viewer({
     canvasId: "myCanvas",
     transparent: true
});

// 2
viewer.camera.orbitPitch(20);
viewer.camera.orbitYaw(-45);

// 3
viewer.scene.selectedMaterial.fillAlpha = 0.1;

//------------------------------------------------------------------------------------------------------------------
// 1. Create a glTF loader plugin,
// 2. Load a glTF building model and JSON IFC metadata
// 3. Emphasis the edges to make it look nice
//------------------------------------------------------------------------------------------------------------------

// 1
const gltfLoader = new GLTFLoaderPlugin(viewer);

// 2
var model = gltfLoader.load({                                    // Returns an Entity that represents the model
     id: "myModel",
     src: "./models/gltf/OTCConferenceCenter/scene.gltf",
     metaModelSrc: "./models/gltf/OTCConferenceCenter/metaModel.json",     // Creates a MetaModel (see below)
     edges: true
});

model.on("loaded", () => {

     //--------------------------------------------------------------------------------------------------------------
     // 1. Find metadata on the third storey
     // 2. Select all the objects in the building's third storey
     // 3. Fit the camera to all the objects on the third storey
     //--------------------------------------------------------------------------------------------------------------

     // 1
     const metaModel = viewer.metaScene.metaModels["myModel"];       // MetaModel with ID "myModel"
     const metaObject
         = viewer.metaScene.metaObjects["0u4wgLe6n0ABVaiXyikbkA"];   // MetaObject with ID "0u4wgLe6n0ABVaiXyikbkA"

     const name = metaObject.name;                                   // "01 eerste verdieping"
     const type = metaObject.type;                                   // "IfcBuildingStorey"
     const parent = metaObject.parent;                               // MetaObject with type "IfcBuilding"
     const children = metaObject.children;                           // Array of child MetaObjects
     const objectId = metaObject.id;                                 // "0u4wgLe6n0ABVaiXyikbkA"
     const objectIds = viewer.metaScene.getObjectIDsInSubtree(objectId);   // IDs of leaf sub-objects
     const aabb = viewer.scene.getAABB(objectIds);                   // Axis-aligned boundary of the leaf sub-objects

     // 2
     viewer.scene.setObjectsSelected(objectIds, true);

     // 3
     viewer.cameraFlight.flyTo(aabb);
});

// Find the model Entity by ID
model = viewer.scene.models["myModel"];

// Destroy the model
model.destroy();

Transforming

We have the option to rotate, scale and translate each .glTF model as we load it.

This lets us load multiple models, or even multiple copies of the same model, and position them apart from each other.

In the example below, we'll scale our model to half its size, rotate it 90 degrees about its local X-axis, then translate it 100 units along its X axis.

const model = gltfLoader.load({
     src: "./models/gltf/Duplex/scene.gltf",
     metaModelSrc: "./models/gltf/Duplex/Duplex.json",
     rotation: [90,0,0],
     scale: [0.5, 0.5, 0.5],
     position: [100, 0, 0]
});

Including and excluding IFC types

We can also load only those objects that have the specified IFC types. In the example below, we'll load only the objects that represent walls.

const model = gltfLoader.load({
    id: "myModel",
     src: "./models/gltf/OTCConferenceCenter/scene.gltf",
     metaModelSrc: "./models/gltf/OTCConferenceCenter/metaModel.json",
     includeTypes: ["IfcWallStandardCase"]
});

We can also load only those objects that don't have the specified IFC types. In the example below, we'll load only the objects that do not represent empty space.

const model = gltfLoader.load({
    id: "myModel",
     src: "./models/gltf/OTCConferenceCenter/scene.gltf",
     metaModelSrc: "./models/gltf/OTCConferenceCenter/metaModel.json",
     excludeTypes: ["IfcSpace"]
});

Showing a glTF model in TreeViewPlugin when metadata is not available

When GLTFLoaderPlugin loads a glTF model, it creates an object Entity for each node in the glTF scene hierarchy that has a name attribute, giving the Entity an ID that has the value of the name attribute.

Those name attributes are created by converter tools, such as by IFC2GLTFCxConverter when it generates glTF from IFC files. However, those name attributes are not ordinarily present in glTF that comes from other sources, such as LiDAR scanners. For such glTF models, GLTFLoaderPlugin will create Entities, but they will have randomly-generated IDs, and therefore cannot be associated with MetaObjects in any MetaModels that we create alongside the model.

For glTF models containing nodes that don't have name attributes, we can use the load() method's elementId parameter to make GLTFLoaderPlugin load the entire model into a single Entity that gets this ID.

In conjunction with that parameter, we can then use the load() method's metaModelJSON parameter to create a MetaModel that contains a MetaObject that corresponds to that Entity.

When we've done that, then xeokit's TreeViewPlugin is able to have a node that represents the glTF model and controls the visibility of that Entity (ie. to control the visibility of the entire model).

The snippet below shows how this is done.

import {Viewer, GLTFLoaderPlugin, NavCubePlugin, TreeViewPlugin} from "../../dist/xeokit-sdk.es.js";

const viewer = new Viewer({
    canvasId: "myCanvas",
    transparent: true
});

new TreeViewPlugin(viewer, {
    containerElement: document.getElementById("treeViewContainer"),
    hierarchy: "containment"
});

const gltfLoader = new GLTFLoaderPlugin(viewer);

const sceneModel = gltfLoader.load({ // Creates a SceneModel with ID "myScanModel"
    id: "myScanModel",
    src: "public-use-sample-apartment.glb",

    //-------------------------------------------------------------------------
    // Specify an `elementId` parameter, which causes the
    // entire model to be loaded into a single Entity that gets this ID.
    //-------------------------------------------------------------------------

    entityId: "3toKckUfH2jBmd$7uhJHa4", // Creates an Entity with this ID

    //-------------------------------------------------------------------------
    // Specify a `metaModelJSON` parameter, which creates a
    // MetaModel with two MetaObjects, one of which corresponds
    // to our Entity. Then the TreeViewPlugin is able to have a node
    // that can represent the model and control the visibility of the Entity.
    //--------------------------------------------------------------------------

   metaModelJSON: { // Creates a MetaModel with ID "myScanModel"
        "metaObjects": [
            {
                "id": "3toKckUfH2jBmd$7uhJHa6", // Creates a MetaObject with this ID
                "name": "My Project",
                "type": "Default",
                "parent": null
            },
            {
                "id": "3toKckUfH2jBmd$7uhJHa4", // Creates a MetaObject with this ID (same ID as our Entity)
                "name": "My Scan",
                "type": "Default",
                "parent": "3toKckUfH2jBmd$7uhJHa6"
            }
        ]
    }
});