xeokit Tree View UI

Overview

• TreeView - A fast and interactive HTML-based tree view.
• Enables seamless navigation of federated models in a Viewer.
• Designed to work with a View and a semantic Data model.
• Supports Industry Foundation Classes (IFC).
• Compatible with any schema structured as an ER graph with aggregation relationships.

Installation

npm install @xeokit/sdk
Copy

Usage

Import Required Modules

import { Viewer } from "@xeokit/sdk/viewer";
import { WebGLRenderer } from "@xeokit/sdk/webglrenderer";
import { Data } from "@xeokit/sdk/data";
import * as ifcTypes from "@xeokit/sdk/ifctypes";
import { TreeView } from "@xeokit/sdk/treeview";
import { loadXGF } from "@xeokit/sdk/xgf";
Copy

Initialize a Viewer with a WebGL Renderer

const myViewer = new Viewer({
    id: "myViewer",
    renderer: new WebGLRenderer({})
});
Copy

Create a View and Set Up the Camera

const view1 = myViewer.createView({
    id: "myView",
    canvasId: "myView1"
});

view1.camera.eye = [-3.933, 2.855, 27.018];
view1.camera.look = [4.400, 3.724, 8.899];
view1.camera.up = [-0.018, 0.999, 0.039];

const data = new Data();
Copy

Create and Configure a TreeView

const treeView = new TreeView({
    view: myView,
    data: myData,
    containerElement: document.getElementById("myTreeViewContainer"),
    hierarchy: TreeView.GroupsHierarchy,
    linkType: ifcTypes.IfcRelAggregates,
    groupTypes: [ifcTypes.IfcBuilding, ifcTypes.IfcBuildingStorey]
});
Copy

Load a Model and Add it to the Viewer

const sceneModel = new SceneModel();
const dataModel = data.createModel({ id: "myModel" });

fetch("myModel.xgf").then(response => {
    response.arrayBuffer().then(data => {
        loadXGF({ data, sceneModel, dataModel });
        sceneModel.build();
        dataModel.build();
        myViewer.scene.addModel({ id: "myModel", sceneModel });
    });
});
Copy