1. Products
  2.   3D
  3.   JavaScript
  4.   CesiumJS
 
  

JavaScript Library to create 3D globes and 2D maps

An Open Source JavaScript API that allows creating 3D globes and 2D shapes in a web browser without a plugin

CesiumJS is an open-source lightweight JavaScript library that allows JavaScript developers to create 3D globes and 2D maps in a web browser without a plugin. The API is designed to deliver the best possible performance, precision, visual quality, and ease of use. It uses WebGL for hardware-accelerated graphics, and is cross-platform, and tuned for dynamic-data visualization. Furthermore, the API allows cross-browser support and you can use your application in any browser.

Another standout feature of CesiumJS is its support for time-dynamic visualization. Whether you're visualizing changes in terrain over time or tracking the movement of objects in space, the library makes it easy to create animations and simulations that accurately reflect the dynamic nature of the world around us. One of the key strengths of CesiumJS is its flexibility. With support for a variety of data formats, including GeoJSON, KML, and CZML, developers can easily integrate their existing datasets into their applications.

CesiumJS streams 3D content such as terrain, imagery, and 3D Tiles from the commercial Cesium ion platform and other content sources. The API is free to use and you can use it for both commercial and non-commercial use. In addition to its core library, CesiumJS also offers a range of extensions and plugins that further extend its capabilities. Overall, CesiumJS is a powerful and versatile tool for creating 3D geospatial visualizations in the browser. With its flexible architecture, robust performance, and extensive feature set, it has quickly become a favorite among developers looking to push the boundaries of what's possible on the web.

Previous Next

Getting Started with Zen-3d

The easiest way to install CesiumJS is using npm. Please use the following command for a smooth installation.

Install CesiumJS via NPM

npm install cesium

You can download the compiled shared library from the GitHub repository.

Install CesiumJS via GitHub

git clone --depth=1 https://github.com/CesiumGS/cesium.git

Create 3D Tiles using JavaScript API

The open source library CesiumJS allows the developers to create 3D Tiles in JavaScript. Using the API, you can stream, style, and interact with 3D buildings, photogrammetry, and point clouds using the 3D Tiles open specification. Moreover, it allows developers to import and render 3D models (e.g., glTF) within the scene for enhanced visualization. The following example shows how to define a tileset with a URL pointing to the location of the 3D Tiles dataset. 

How to Define a Tileset, Apply Styling and Customizations via JavaScript API?

var tileset = new Cesium.Cesium3DTileset({
    url: 'path/to/3d-tiles/tileset.json'
});
viewer.scene.primitives.add(tileset);
// Apply Color and Customization
tileset.style = new Cesium.Cesium3DTileStyle({
    color: {
        conditions: [
            ['${height} >= 100', 'rgba(255, 0, 0, 1.0)'],
            ['${height} < 100', 'rgba(0, 255, 0, 1.0)']
        ]
    },
    heightOffset: 10,
    scale: 2.0
});

Vectors and geometry in CesiumJS

The open source library CesiumJS allows JavaScript to manipulate vectors and geometry in application. Using the API, you can Load KML, GeoJSON, and CZML, or use the API to draw a wide variety of features and geometry. The following example shows how Software developers can draw 3D models at specified positions on the globe.

How to Draw 3D Models at Specified Positions on the Globe inside JavaScript Apps?

var model = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883),
    model: {
        uri: 'path/to/3dmodel.gltf'
    }
});

3D, 2D, and 2.5D Columbus in Free JavaScript API

The API also allows multiple views at the same time. You can view your data in 3D, 2D, and 2.5D columbus view and switch between three different map modes at runtime. If you want two views to be synced across time, you can create a shared clock object that both views share.

 English