Reference Source
public class | source

GLTFLoaderPlugin

Extends:

Plugin → 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"]
});

Constructor Summary

Public Constructor
public

constructor(viewer: Viewer, cfg: Object)

Member Summary

Public Members
public set

Sets a custom data source through which the GLTFLoaderPlugin can load metadata, glTF and binary attachments.

public get

Gets the custom data source through which the GLTFLoaderPlugin can load metadata, glTF and binary attachments.

public set

objectDefaults: {String: Object}

Sets map of initial default states for each loaded Entity that represents an object.

public get

objectDefaults: {String: Object}

Gets map of initial default states for each loaded Entity that represents an object.

Method Summary

Public Methods
public

Destroys this GLTFLoaderPlugin.

public

load(params: *): Entity

Loads a glTF model from a file into this GLTFLoaderPlugin's Viewer.

Inherited Summary

From class Plugin
public

ID for this Plugin, unique within its Viewer.

public

The Viewer that contains this Plugin.

public

Destroys this Plugin and removes it from its Viewer.

public

error(msg: String)

Logs an error message to the JavaScript developer console, prefixed with the ID of this Plugin.

public

fire(event: String, value: Object)

Fires an event at this Plugin.

public

log(msg: String)

Logs a message to the JavaScript developer console, prefixed with the ID of this Plugin.

public

on(event: String, callback: Function)

Subscribes to an event fired at this Plugin.

public

warn(msg: String)

Logs a warning message to the JavaScript developer console, prefixed with the ID of this Plugin.

Public Constructors

public constructor(viewer: Viewer, cfg: Object) source

Creates this Plugin and installs it into the given Viewer.

Override:

Plugin#constructor

Params:

NameTypeAttributeDescription
viewer Viewer

The Viewer.

cfg Object

Plugin configuration.

cfg.id String
  • optional
  • default: "GLTFLoader"

Optional ID for this plugin, so that we can find it within Viewer#plugins.

cfg.objectDefaults Object
  • optional

Map of initial default states for each loaded Entity that represents an object. Default value is IFCObjectDefaults.

cfg.dataSource Object
  • optional

A custom data source through which the GLTFLoaderPlugin can load metadata, glTF and binary attachments. Defaults to an instance of GLTFDefaultDataSource, which loads over HTTP.

Public Members

public set dataSource: Object source

Sets a custom data source through which the GLTFLoaderPlugin can load metadata, glTF and binary attachments.

Default value is GLTFDefaultDataSource, which loads via an XMLHttpRequest.

public get dataSource: Object source

Gets the custom data source through which the GLTFLoaderPlugin can load metadata, glTF and binary attachments.

Default value is GLTFDefaultDataSource, which loads via an XMLHttpRequest.

public set objectDefaults: {String: Object} source

Sets map of initial default states for each loaded Entity that represents an object.

Default value is IFCObjectDefaults.

public get objectDefaults: {String: Object} source

Gets map of initial default states for each loaded Entity that represents an object.

Default value is IFCObjectDefaults.

Public Methods

public destroy() source

Destroys this GLTFLoaderPlugin.

Override:

Plugin#destroy

public load(params: *): Entity source

Loads a glTF model from a file into this GLTFLoaderPlugin's Viewer.

Params:

NameTypeAttributeDescription
params *

Loading parameters.

params.id String
  • optional

ID to assign to the root Entity#id, unique among all components in the Viewer's Scene, generated automatically by default.

params.src String
  • optional

Path to a glTF file, as an alternative to the gltf parameter.

params.gltf *
  • optional

glTF JSON, as an alternative to the src parameter.

params.metaModelSrc String
  • optional

Path to an optional metadata file, as an alternative to the metaModelData parameter.

params.metaModelData *
  • optional

JSON model metadata, as an alternative to the metaModelSrc parameter.

params.objectDefaults {String: Object}
  • optional

Map of initial default states for each loaded Entity that represents an object. Default value is IFCObjectDefaults.

params.includeTypes String[]
  • optional

When loading metadata, only loads objects that have MetaObjects with MetaObject#type values in this list.

params.excludeTypes String[]
  • optional

When loading metadata, never loads objects that have MetaObjects with MetaObject#type values in this list.

params.edges Boolean
  • optional
  • default: false

Whether or not xeokit renders the model with edges emphasized.

params.origin Number[]
  • optional
  • default: [0,0,0]

The double-precision World-space origin of the model's coordinates.

params.position Number[]
  • optional
  • default: [0,0,0]

The single-precision position, relative to origin.

params.scale Number[]
  • optional
  • default: [1,1,1]

The model's scale.

params.rotation Number[]
  • optional
  • default: [0,0,0]

The model's orientation, as Euler angles given in degrees, for each of the X, Y and Z axis.

params.matrix Number[]
  • optional
  • default: [1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]

The model's world transform matrix. Overrides the position, scale and rotation parameters. Relative to origin.

params.saoEnabled Boolean
  • optional
  • default: true

Indicates if Scalable Ambient Obscurance (SAO) is enabled for the model. SAO is configured by the Scene's SAO component. Only works when SAO#enabled is also true

params.pbrEnabled Boolean
  • optional
  • default: true

Indicates if physically-based rendering (PBR) is enabled for the model. Overrides colorTextureEnabled. Only works when Scene#pbrEnabled is also true.

params.colorTextureEnabled Boolean
  • optional
  • default: true

Indicates if base color texture rendering is enabled for the model. Overridden by pbrEnabled. Only works when Scene#colorTextureEnabled is also true.

params.backfaces Boolean
  • optional
  • default: false

When true, allows visible backfaces, wherever specified in the glTF. When false, ignores backfaces.

params.edgeThreshold Number
  • optional
  • default: 10

When xraying, highlighting, selecting or edging, this is the threshold angle between normals of adjacent triangles, below which their shared wireframe edge is not drawn.

Return:

Entity

Entity representing the model, which will have Entity#isModel set true and will be registered by Entity#id in Scene#models