<< User Guide

Using xeokit SDK to view an IFC model, loaded from JSON

Click on the preview below to run the example. Scroll down to learn how it's made.

Click to load
Placeholder image

Using xeokit SDK to view an IFC model, loaded from JSON


HTML

Listed below is the HTML for this example.


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Using xeokit SDK to view an IFC model, loaded from JSON</title>
    <style>
        body {
            background-color: white;
            overflow: hidden;
            margin: 0;
            user-select: none;
        }

        #demoCanvas {
            width: 100%;
            height: 100%;
            position: absolute;
            background: white;
            border: 0;
        }
    </style>
</head>
<body>
<canvas id="demoCanvas"></canvas>
</body>
<script type="module" src="./index.js"></script>
</html>

JavaScript

Listed below is the JavaScript for this example, which we'll break down into steps.

import {log} from "../../js/logger.js";
import * as xeokit from "../../js/xeokit-demo-bundle.js";
import {DemoHelper} from "../../js/DemoHelper.js";

1. Create a Scene to hold geometry and materials

const scene = new xeokit.scene.Scene();

2. Create a Data to hold semantic data

const data = new xeokit.data.Data();

3. Create a WebGLRenderer to use the browser's WebGL graphics API for rendering

const renderer = new xeokit.webglrenderer.WebGLRenderer({});

4. Create a Viewer that will use the WebGLRenderer to draw the Scene

const viewer = new xeokit.viewer.Viewer({
    id: "demoViewer",
    scene,
    renderer
});

5. Give the Viewer a single View to render the Scene in our HTML canvas element

const view = viewer.createView({
    id: "demoView",
    elementId: "demoCanvas"
});

6. Position the View's Camera 

view.camera.eye = [-3.933, 2.855, 27.018];
view.camera.look = [4.400, 3.724, 8.899];
view.camera.up = [-0.018, 0.999, 0.039];
view.camera.zoom(5);
view.camera.orbitPitch(20);

7. Add a CameraControl to interactively control the View's Camera with keyboard, mouse and touch input

new xeokit.cameracontrol.CameraControl(view, {});

8. Create a SceneModel to hold our model's geometry and materials

const sceneModel = scene.createModel({
    id: "demoModel"
});

9. Ignore the DemHelper

const demoHelper = new DemoHelper({
    viewer,
    data
});
demoHelper.init()
    .then(() => {

10. Create a DataModel to hold semantic data for our model

        const dataModel = data.createModel({
            id: "demoModel"
        });
        if (sceneModel instanceof xeokit.core.SDKError) {
            log(`Error creating SceneModel: ${sceneModel.message}`);
        } else {

11. Load JSON parameters into our SceneModel. The parameters follow the schema defined by SceneModelParams .

            fetch("../../models/Duplex/json/sceneModel.json").then(response => {
                response.json().then(sceneModelParams => {

12. Load JSON parameters into our DataModel. The parameters follow the schema defined by DataModelParams .

                    fetch("../../models/Duplex/json/dataModel.json").then(response => {
                        response.json().then(dataModelParams => {
                            dataModel.fromParams(dataModelParams);
                            sceneModel.fromParams(sceneModelParams);

13. Build the SceneModel and DataModel. The View will now contain a ViewObject for each SceneObject in the SceneModel.

                            dataModel.build();
                            sceneModel.build();
                            demoHelper.finished();
                        });
                    });
                });
            });
        }
    });