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

What is CesiumJS Library?

CesiumJS is a free JavaScript library that lets JavaScript developers make 3D globes and 2D maps on a web browser, no plugins needed. This tool is made to give you top-notch performance, accuracy, visual appeal, and user-friendliness. It harnesses WebGL for fast graphics, works on any device, and is great for showing real-time data. Plus, it supports all major browsers, so you can run your app without any worries about compatibility. CesiumJS brings 3D elements like terrain, images, and 3D Tiles to you from the Cesium ion platform and other sources. You can freely access the API for any commercial or personal projects.

CesiumJS has a cool feature that lets you visualize changes that happen over time. Whether you’re watching how landscapes transform or following objects moving through space, this tool helps you make animations and simulations that show how things change in the real world. A big advantage of CesiumJS is how flexible it is. It can work with different data formats like GeoJSON, KML, and CZML, so you can smoothly use their existing datasets into their applications. Besides its main features, CesiumJS provides various extensions and plugins to enhance what it can do. In summary, CesiumJS is a flexible and robust tool that helps you craft impressive 3D maps right in your web browser.

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