CesiumJS is a powerful open-source library designed for creating interactive 3D geospatial visualizations directly in the browser. It enables developers to build rich, immersive experiences such as dynamic globes, satellite maps, terrain rendering, and spatial annotations—without requiring any plugins or native installations.

The core of CesiumJS relies on WebGL, allowing it to run efficietnly within modern web browsers. Whether you're building a simple map interface or a complex simulation like urban planning systems or aerospace trajectory tracking, Cesium provides the tools needed to deliver high-quality 3D visual content.

• Official Website: https://cesium.com/platform/cesiumjs
• GitHub Repository: https://github.com/CesiumGS/cesium
• Documentation: https://cesium.com/learn/cesiumjs-learn

Project Setup

This guide uses a Vue 3 project scaffolded with Vite. While focused on Vue 3, the principles apply to other frameworks like React or Angular.

Install Cesium

Run the following command in your project root:

npm install cesium

Add Plugin Support

Cesium includes numerous static assets like shaders, textures, and Web Workers. To simplify configuration, use vite-plugin-cesium to automate asset handling.

npm install vite-plugin-cesium -D

Configure Vite

Update your vite.config.js (or .ts) file to include the plugin:

import { defineConfig } from 'vite';
import vue from '@vue/vite-plugin-vue';
import cesium from 'vite-plugin-cesium';

export default defineConfig({
  plugins: [
    vue(),
    cesium()
  ]
});

With this setup, all Cesium assets are automatically copied during build and correctyl referenced—no manual file copying required.

Integrate into a Vue Component

Create a basic component that renders a 3D globe.

In the template, define a container div with an id, and set its dimensions. Initialize the Cesium viewer only after the DOM element has been rendered, which can be achieved using the onMounted lifecycle hook in Vue 3.

<template>
  <div>
    <div id="globeContainer" ref="globeRef"></div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import * as Cesium from 'cesium';

onMounted(() => {
  const viewer = new Cesium.Viewer('globeContainer');
});
</script>

<style scoped>
#globeContainer {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

The Viewer constructor initializes a full-featured scene manager responsible for handling camera controls, time navigation, layer selection, and user interactions. The first argument specifies the target DOM element.

Remove Attribution Banner

By default, a credit banner appears at the bottom of the screen. To remove it or customize the attribution, obtain a free Access Token from Cesium Ion:

👉 https://ion.cesium.com/signin/tokens

After signing up and logging in, copy your token and assign it globally:

onMounted(() => {
  Cesium.Ion.defaultAccessToken = 'YOUR_TOKEN_HERE';
  const viewer = new Cesium.Viewer('globeContainer');
  // Hide credit display
  viewer._cesiumWidget._creditContainer.style.display = 'none';
});

Hide UI Controls

To minimize distractions and keep only the globe visible, disable unnecessary UI elements by passing options to the Viewer constructor:

onMounted(() => {
  Cesium.Ion.defaultAccessToken = 'YOUR_TOKEN_HERE';
  const viewer = new Cesium.Viewer('globeContainer', {
    animation: false,
    timeline: false,
    fullscreenButton: false,
    baseLayerPicker: false,
    geocoder: false,
    homeButton: false,
    navigationHelpButton: false,
    sceneModePicker: false
  });
  viewer._cesiumWidget._creditContainer.style.display = 'none';
});

This results in a clean, distraction-free 3D globe experience.