xeokit CityJSON Importer

Import and visualize 3D urban models in the CityJSON format

The xeokit SDK supports importing 3D urban models from CityJSON — a lightweight, human-readable JSON format that simplifies storage and sharing of 3D city models.

Compared to formats like CityGML, CityJSON provides a more accessible and developer-friendly way to represent urban features such as buildings, roads, vegetation, and more.

How it Works

Use the CityJSONLoader class to load CityJSON data into:

• a SceneModel for rendering geometry
• a DataModel for managing associated semantic information

Architecture Overview

classDiagram
    direction LR
    class SceneModel {
        id
        objects
        createObject()
        build()
        destroy()
    }
    class DataModel {
        id
        objects
        propertySets
        createObject()
        createRelationship()
        createPropertySet()
        build()
        destroy()
    }
    class ModelLoadParams {
        <<parameter>>
        fileData
        sceneModel
        dataModel
    }
    class CityJSONLoader {
        load()
    }
    ModelLoadParams "0" --> "1" SceneModel
    ModelLoadParams "0" --> "1" DataModel
    CityJSONLoader --> ModelLoadParams

Installation

npm install @xeokit/sdk
Copy

Usage Example

This example demonstrates how to:

• Set up a Viewer, Scene, and WebGLRenderer
• Attach a CameraControl for interaction
• Load a CityJSON model using CityJSONLoader
• Handle loading and error scenarios

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 { CityJSONLoader } 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
});

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 cityJSONLoader = new CityJSONLoader();

fetch("model.json")
    .then(response => response.json())
    .then(fileData => {
        cityJSONLoader.load({
            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 fetching or parsing CityJSON: ${err}`);
    });
Copy