XGF - xeokit Graphics Format

---

Import and export SceneModels as xeokit's native binary XGF format

---

This package allows us to import and export xeokit SceneModels as xeokit Geometry Format (XGF), xeokit's compact binary-encoded runtime asset delivery format for SceneModel data.

To import a XGF model into xeokit, use the loadXGF function, which will load the file into a SceneModel. To export a XGF model, use the saveXGF function, which will save a SceneModel to XGF.

Installation

npm install @xeokit/sdk
Copy

Usage

In the example below, we will create a Viewer with a WebGLRenderer and a Scene, which holds model geometry and materials.

On our Viewer, we will create a single View to render it to a canvas element on the page. We will also attach a CameraControl to our View, allowing us to control its camera with mouse and touch input.

Within the Scene, we will create a SceneModel to hold a model. We will then use loadXGF to load a XGF file into our SceneModel.

• Run this example

import {Scene} from "@xeokit/sdk/scene";
import {WebGLRenderer} from "@xeokit/sdk/webglrenderer";
import {Viewer} from "@xeokit/sdk/viewer";
import {CameraControl} from "@xeokit/sdk/cameracontrol";
import {loadXGF, saveXGF} from "@xeokit/sdk/xgf";

const scene = new Scene();

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"
});

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

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

        loadXGF({
            fileData,
            sceneModel
        }).then(() => {

             sceneModel.build();

        }).catch(err => {

             sceneModel.destroy();

             console.error(`Error loading XGF: ${err}`);
        });

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

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

Using saveXGF to export the SceneModel back to XGF:

const arrayBuffer = saveXGF({
    sceneModel
});
Copy