<< User Guide

Viewing glTF using GLTFLoader

How to load an IFC model from glTF (.glb) format directly into a xeokit web viewer.
Click on the preview below to run the example. Scroll down to learn how it's made.

Click to load
Placeholder image

Viewing glTF using GLTFLoader


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>Viewing glTF using GLTFLoader</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.

1. Import the SDK from a bundle built for these examples.

import * as xeokit from "../../js/xeokit-demo-bundle.js";

2. Create a helper that sets up the Scene , Data, Viewer, and WebGLRenderer used by this demo.

import {DemoHelper} from "../../js/DemoHelper.js";
const demoHelper = new DemoHelper({});
demoHelper.init().then(({
                          scene,
                          data,
                          viewer,
                          view,
                          renderer
                        }) => {

3. Arrange the View 's Camera within our +Z "up" coordinate system

  view.camera.eye = [1841982.9384371885, 10.031355126263318, -5173286.744630201];
  view.camera.look = [1842009.4968455553, 9.685518291306686, -5173295.851503017];
  view.camera.up = [0.011650847910481935, 0.9999241456889114, -0.003995073374452514];

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

  const sceneModelResult = scene.createModel({
    id: "demoModel"
  });
  if (!sceneModelResult.ok) {
    throw new Error(`Error creating SceneModel: ${sceneModelResult.error}`);
  }

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

  const dataModelResult = data.createModel({
    id: "demoModel"
  });
  if (dataModelResult.ok === false) {
    throw new Error(`Error creating SceneModel: ${dataModelResult.message}`);
  }
  const sceneModel = sceneModelResult.value;
  const dataModel = dataModelResult.value;

6. Use GLTFLoader to load a glTF model into our SceneModel and DataModel

  const gltfLoader = new xeokit.formats.gltf.GLTFLoader();
  fetch("../../models/MAP/gltf/model.glb").then(response => {
    response
      .arrayBuffer()
      .then(fileData => {
        gltfLoader.load({
          fileData,
          sceneModel,
          dataModel
        }).then(() => {

7. The Scene and SceneModel will now contain a SceneObject for each displayable object in our model. The Data and DataModel will contain a DataObject for each IFC element in the model. Each SceneObject will have a corresponding DataObject with the same ID, to attach semantic meaning. The View will contain a ViewObject corresponding to each SceneObject, through which the appearance of the object can be controlled in the View.

          demoHelper.finished();
        }).catch(message => {
          console.error(`Error loading glTF: ${message}`);
        });
      });
  });
});