Skip to content
This repository has been archived by the owner on May 5, 2020. It is now read-only.

Latest commit

 

History

History
72 lines (46 loc) · 2.97 KB

README.md

File metadata and controls

72 lines (46 loc) · 2.97 KB
Raw

This repository and project has been archived, the code has been merged into our (better) project: https://github.com/cityjson/ninja

CityJSON viewer

CityJSON example

A simple web-viewer for CityJSON files: drag-and-drop a file, wait a few milliseconds, and you see it. That's it.

It has the following functions:

  • get attribute information of city objects
  • load multiple files at the same time
  • supporting of parent/children
  • hide/show complete file or single objects
  • shadow support for presentation
  • smoother controls
  • cleaned up code

You can access it online at https://tudelft3d.github.io/CityJSON-viewer/.

Not supported (yet)

  • geometry templates (nothing will be drawn)
  • textures and material
  • support world position of the files
  • choosing the colours, these are hard-coded for the CityJSON classes
  • offline support
  • enable editing and downloading of the files

Technical Background

This viewer uses the WebGL library Three.js. The following steps are done when a valid json file is uploaded:

  1. load JSON-file into the internal memory of the browser
  2. normalize all vertices
  3. for every CityObject in the JSON a Three.js-geometry is created.
  4. add the object to the viewer
  5. add an equivalent entry to the left-sided overview
  6. draw the scene

Contrary to version 1 of the CityJSON-viewer, now every City Object has its own geometry (before all objects belonged to one geometry). This allows an unique identification of the object (for getting the attribute information) and for display/hide mechanics. A drawback is a slightly longer loading time.

For the creation of a Three.js-geometry the polygons of the CityObject need to be triangulated. If this is not the case, the polygons are beforehand triangulated using the earcut-library.

For getting the attribute information of an object the raycaster functionality of the Three.js library is used. It allows to determine which object is in the front (and therefore is clicked on) and gets its unique ID. This ID can be used to look up the attribute information in the JSON-data.

Datasets

We provide a test dataset in the data folder. It is a part of the Delft in the Netherlands was automatically reconstructed with 3dfier.

Other datasets freely available on the CityJSON website.

Acknowledgements

The viewer was mostly developed through projects in the course Research Assignment in the Msc Geomatics at Delft University of Technology.