StructureTreeViewPlugin

A Viewer plugin that provides an HTML tree view to navigate the structural hierarchy of IFC elements in models.

[Run this example]

Overview

• A fast HTML tree widget, with zero external dependencies, that works with huge numbers of objects.
• Each node has a checkbox to control the visibility of its object.
• Automatically includes all models (that have metadata) that are currently in the Scene.
• Allows custom CSS styling.

Credits

StructureTreeViewPlugin is based on techniques described in Super Fast Tree View in JavaScript by Chris Smith.

Usage

In the example below we'll add a StructureTreeViewPlugin which, by default, will automatically show the structural hierarchy of the IFC elements in each model we load.

Then we'll use an XKTLoaderPlugin to load the Schependomlaan model from an .xkt file, along with an accompanying JSON IFC metadata file.

[Run this example]

import {Viewer} from "../src/viewer/Viewer.js";
import {XKTLoaderPlugin} from "../src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js";
import {StructureTreeViewPlugin} from "../src/plugins/StructureTreeViewPlugin/StructureTreeViewPlugin.js";

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

viewer.camera.eye = [-2.56, 8.38, 8.27];
viewer.camera.look = [13.44, 3.31, -14.83];
viewer.camera.up = [0.10, 0.98, -0.14];

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

const xktLoader = new XKTLoaderPlugin(viewer);

const model = xktLoader.load({
    id: "myModel",
    src: "./models/xkt/schependomlaan/schependomlaan.xkt",
    metaModelSrc: "./metaModels/schependomlaan/metaModel.json",
    edges: true
});

Manually Adding Models

We can control which models appear in our StructureTreeViewPlugin by adding them manually.

In the next example, we'll configure the StructureTreeViewPlugin to not automatically add models. Once the model has loaded, we'll add it manually using StructureTreeViewPlugin#addModel.

const treeView = new StructureTreeViewPlugin(viewer, {
     containerElement: document.getElementById("myTreeViewContainer"),
     autoAddModels: false  // <<---------------- Don't auto-add models
});

const xktLoader = new XKTLoaderPlugin(viewer);

const model = xktLoader.load({
    id: "myModel",
    src: "./models/xkt/schependomlaan/schependomlaan.xkt",
    metaModelSrc: "./metaModels/schependomlaan/metaModel.json",
    edges: true
});

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

Initially Expanding Nodes

We can configure StructureTreeViewPlugin to initially expand each model's nodes to a given depth.

Let's automatically expand the first three nodes from the root, for every model added:

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

Customizing Appearance

We can customize the appearance of our StructureTreeViewPlugin by defining custom CSS for its HTML elements. See our example's source code for an example of custom CSS rules.