xeokit glTF Importer

---

Import models from the industry standard glTF model file format

---

The xeokit SDK allows us to import 3D models from glTF (GL Transmission Format), a file format that is a runtime asset delivery format for 3D scenes and models.

glTF is a compact and efficient format for 3D content, allowing fast loading and rendering in apps and web browsers. It stores geometry, materials, textures, animations, and scene hierarchy, and is open and royalty-free, making it a popular choice for 3D content distribution and exchange.

To import a glTF model into xeokit, use the loadGLTF function, which will load the file into a SceneModel and a DataModel.

Installation

npm install @xeokit/gltf
Copy

Usage

In the example below, we'll import a glTF file into a SceneModel and a DataModel. The @xeokit/core!SDKError class is used to handle errors that may occur during the process:

import {Data} from "@xeokit/data";
import {Scene} from "@xeokit/scene";
import {loadGLTF} from "@xeokit/gltf";

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

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

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

if (dataModel instanceof SDKError) {
     console.error(dataModel.message);

} else if (sceneModel instanceof SDKError) {
     console.error(dataModel.message);

} else {

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

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

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

                 dataModel.build();
                 sceneModel.build();

             }).catch(error=>{

                 dataModel.destroy();
                 sceneModel.destroy();

                 console.log(error.message);
             });
        });
    });
}
Copy