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 { Scene } from "@xeokit/sdk/scene";
import * as ifcTypes from "@xeokit/sdk/formats/ifc/ifctypes_4_0_2_1";
import { TreeView } from "@xeokit/sdk/treeview";
import { XGFLoader } from "@xeokit/sdk/formats/xgf";
Copy

Initialize a Viewer with a WebGL Renderer

const data = new Data();

const scene = new Scene();

const viewer = new Viewer({
    scene
});

new WebGLRenderer({
  viewer,
});
Copy

Create a View and Set Up the Camera

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

const view = view1Result.value;

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,
    data,
    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 sceneModelResult = scene.createModel({ id: "myModel" });
const sceneModel = sceneModelResult.value;

const dataModelResult = data.createModel({ id: "myModel" });
const dataModel = dataModelResult.value;

fetch("myModel.xgf").then(response => {
    response.arrayBuffer().then(fileData => {
        XGFLoader.load({ fileData, sceneModel, dataModel });
    });
});
Copy