Package Exports

cityjson-threejs-loader
cityjson-threejs-loader/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (cityjson-threejs-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

CityJSON three.js loader

A loader for CityJSON files in three.js.

Installation

Use in your project

yarn install git+https://github.com/cityjson/cityjson-threejs-loader.git

Development

Clone this repository
Run yarn install
Go nuts!

Run examples

Run yarn run dev.
Visit http://localhost:9080/example/dev-bundle/index.html
Drag 'n' drop any file to visualise it.

Use

You need to select one of the availables parsers (recommended is CityJSONWorkerParser) and use it with CityJSONLoader.

import { CityJSONLoader, CityJSONWorkerParser } from 'cityjson-threejs-loader'

// Initialise your scene here

const parser = CityJSONWorkerParser();

const loader = CityJSONLoader( parser );

loader.load( cityjsonData );

scene.add( loader.scene );

Raycasting the scene

The added scene objects contain functions to retrieve information related to the original city model when raycasting:

// Initialise raycaster

const intersections = raycaster.intersectObject( loader.scene );

if ( intersection ) {

    // Gain the 3D object that was hit by the closest ray
    const object = intersection[ 0 ].object;

    // Check if this is a city object
    if ( object.isCityObject ) {

        const data = object.resolveIntersectionInfo( intersection[ 0 ], cityjsonData )

        const objectId = data.objectId; // This is the objectId of the city object hit by the ray

    }

}

Visualization options

The scene objects have specialised materials to handle aspects of how the respective geometries are handled. For example:

// Traverse the scene for objects
scene.traverse( obj = > {

    // Check if this has a material and if this is a city object material
    if ( obj.material && obj.material.isCityObjectsMaterial ) {

        obj.material.showSemantics = false; // This will disable coloring per semantic surface

    }

} );

Highlighting objects

City object materials can be used to highlight a specific object:

// Assuming cityjsonData contains the citymodel and we want to highlight the selectObjectId
const objectIndex = Object.keys( cityjsonData.CityObjects ).indexOf( selectedObjectId )

// Traverse the scene for objects
scene.traverse( obj = > {

    // Check if this has a material and if this is a city object material
    if ( obj.material && obj.material.isCityObjectsMaterial ) {

        // Set the highlighted object index to what was found before
        obj.highlightedObject = {

            objectIndex: objectIndex

        };

    }

} );