xeokit glTF Importer and Exporter

---

Import and export models in the industry-standard glTF model file format.

---

The xeokit SDK enables the import and export of 3D models as glTF (GL Transmission Format), a widely used format for runtime asset delivery of 3D scenes and models.

glTF is a compact and efficient format designed for fast loading and rendering in applications and web browsers. It stores geometry, materials, textures, animations, and scene hierarchy. Open and royalty-free, it has become the go-to format for 3D content distribution and exchange.

To import a glTF model into xeokit, use the GLTFLoader class, which loads the file into a SceneModel. The function also provides the option to load a basic data model into a DataModel, to describe the hierarchy of the nodes in the glTF scene.

Installation

Install the xeokit SDK by running:

npm install @xeokit/sdk
Copy

Usage

The following example demonstrates how to create a Viewer with a WebGLRenderer and a Scene that holds model geometry and materials.

The example also creates a single View to render the model to a canvas element on the page, and attaches a CameraControl to control the camera using mouse and touch input.

Within the Scene, a SceneModel is created to hold the model. Then, the GLTFLoader class is used to load a binary glTF (GLB) file into the SceneModel.

The SDKError class is used to handle any errors during this process.

import {SDKError} from "@xeokit/sdk/core";
import {Scene} from "@xeokit/sdk/scene";
import {Data} from "@xeokit/sdk/data";
import {WebGLRenderer} from "@xeokit/sdk/webglrenderer";
import {Viewer} from "@xeokit/sdk/viewer";
import {CameraControl} from "@xeokit/sdk/cameracontrol";
import {GLTFLoader} from "@xeokit/sdk/gltf";

const scene = new Scene();
const data = new Data();

const renderer = new WebGLRenderer({});

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

const view = viewer.createView({
    id: "myView",
    elementId: "myCanvas" // << Ensure that this HTMLElement exists in the page
});

view.camera.eye = [1841982.93, 10.03, -5173286.74];
view.camera.look = [1842009.49, 9.68, -5173295.85];
view.camera.up = [0.0, 1.0, 0.0];

new CameraControl(view, {});

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

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

const glTFLoader = new GLTFLoader();

fetch("model.glb").then(response => {

    response.arrayBuffer().then(fileData => {

       glTFLoader.load({
           fileData,
           sceneModel,
           dataModel
       }).then(() => {

           sceneModel.build();

       }).catch(err => {
           sceneModel.destroy();
           dataModel.destroy();
           console.error(`Error loading glTF data: ${err}`);
       });

   }).catch(err => {
       console.error(`Error creating ArrayBuffer from fetch response: ${err}`);
   });

}).catch(err => {
   console.error(`Error fetching glTF file: ${err}`);
});
Copy