XML3DLoaderPlugin

Viewer plugin that loads models from 3DXML files.

[Run this example]

Overview

• Currently supports 3DXML V4.2.
• 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 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.
• Can optionally load a MetaModel to classify the objects within the model, from which you can create a tree view using the TreeViewPlugin.
  Note that the name of this plugin is intentionally munged to "XML3D" because a JavaScript class name cannot begin with a numeral.

An 3DXML model is a zip archive that bundles multiple XML files and assets. Internally, the XML3DLoaderPlugin uses the zip.js library to unzip them before loading. The zip.js library uses Web workers for fast unzipping, so XML3DLoaderPlugin requires that we configure it with a workerScriptsPath property specifying the directory where zip.js keeps its Web worker script. See the example for how to do that.

Usage

In the example below, we'll use an XML3DLoaderPlugin to load a 3DXML model. When the model has loaded, we'll use the CameraFlightAnimation to fly the Camera to look at boundary of the model. We'll then get the model's Entity from the Scene and highlight the whole model.

• [Run this example]

// Create a xeokit Viewer
const viewer = new Viewer({
     canvasId: "myCanvas"
});

// Add an XML3DLoaderPlugin to the Viewer
var plugin = new XML3DLoaderPlugin(viewer, {
     id: "XML3DLoader",  // Default value
     workerScriptsPath : "../../src/plugins/XML3DLoader/zipjs/" // Path to zip.js workers dir
});

// Load the 3DXML model
var model = plugin.load({ // Model is an Entity
    id: "myModel",
    src: "./models/xml3d/3dpreview.3dxml",
    scale: [0.1, 0.1, 0.1],
    rotate: [90, 0, 0],
    translate: [100,0,0],
    edges: true
});

// When the model has loaded, fit it to view
model.on("loaded", function() {
     viewer.cameraFlight.flyTo(model);
});

// Update properties of the model via the entity
model.highlighted = true;

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

// Destroy the model
model.destroy();

Loading MetaModels

We have the option to load a MetaModel that contains a hierarchy of MetaObjects that classifes the objects within our 3DXML model.

This is useful for building a tree view to navigate the objects, using TreeViewPlugin.

Let's load the model again, this time creating a MetaModel:

var model = plugin.load({
    id: "myModel",
    src: "./models/xml3d/3dpreview.3dxml",
    scale: [0.1, 0.1, 0.1],
    rotate: [90, 0, 0],
    translate: [100,0,0],
    edges: true,

    createMetaModel: true // <<-------- Create a MetaModel
});

The MetaModel can then be found on the Viewer's MetaScene, using the model's ID:

const metaModel = viewer.metaScene.metaModels["myModel"];

Now we can use TreeViewPlugin to create a tree view to navigate our model's objects:

import {TreeViewPlugin} from "xeokit-sdk.es.js""xeokit-sdk.es.js";

const treeView = new TreeViewPlugin(viewer, {
    containerElement: document.getElementById("myTreeViewContainer")
});

const treeView = new TreeViewPlugin(viewer, {
     containerElement: document.getElementById("treeViewContainer"),
     autoExpandDepth: 3, // Initially expand tree three storeys deep
     hierarchy: "containment",
     autoAddModels: false
});

model.on("loaded", () => {
     treeView.addModel(model.id);
});

Note that only the TreeViewPlugin "containment" hierarchy makes sense for an XML3D model. A "types" hierarchy does not make sense because XML3DLoaderPlugin will set each MetaObject#type to "Default", and "storeys" does not make sense because that requires some of the MetaObject#type values to be "IfcBuildingStorey".

• [Run this example]

Material Type

Although 3DXML only supports Phong materials, XML3DLoaderPlugin is able to convert them to physically-based materials.

The plugin supports three material types:

Let's load our model again, this time converting the 3DXML Blinn-Phong materials to SpecularMaterials:

var model = plugin.load({ // Model is an Entity
    id: "myModel",
    src: "./models/xml3d/3dpreview.3dxml",
    materialtype: "SpecularMaterial": true"
});

• [Run this example]