xeokit CityJSON Importer

---

Import and visualize 3D urban models from the CityJSON format

---

The xeokit SDK provides support for importing 3D urban models from CityJSON, a lightweight, user-friendly, and human-readable JSON-based file format designed for storing and sharing 3D city models. CityJSON simplifies the representation of urban objects such as buildings and trees, offering a more accessible alternative to formats like CityGML.

To load a CityJSON model into xeokit, use the loadCityJSON function. This function populates both a SceneModel for geometry and materials and a DataModel for semantic data.

Installation

npm install @xeokit/sdk
Copy

Usage

The following example demonstrates how to:

• Set up a Viewer with a WebGLRenderer and a Scene.
• Attach a CameraControl for interactive navigation.
• Load and render a CityJSON model using loadCityJSON.
• Handle potential errors using SDKError.

import { SDKError } from "@xeokit/sdk/core";
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 { loadCityJSON } from "@xeokit/sdk/cityjson";

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 this HTMLElement exists in the page
});

// Set the initial camera position
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" });

fetch("model.json").then(response => {
    response.json().then(fileData => {
        loadCityJSON({
            fileData,
            sceneModel,
            dataModel
        }).then(() => {
            sceneModel.build();
            dataModel.build();
        }).catch(err => {
            sceneModel.destroy();
            dataModel.destroy();
            console.error(`Error loading CityJSON: ${err}`);
        });
    }).catch(err => {
        console.error(`Error parsing JSON from fetch response: ${err}`);
    });
}).catch(err => {
    console.error(`Error fetching CityJSON file: ${err}`);
});
Copy