Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

gatsby-plugin-cesium

A Gatsby plugin to add support for CesiumJS.

Install

npm install --save gatsby-plugin-cesium cesium

How to use

Edit gatsby-config.js

module.exports = {
  plugins: ['gatsby-plugin-cesium'],
};

Notable differences from the official webpack integration guide of Cesium

  • All of the Cesium libraries can be imported and used with the following syntax:

    import Cesium from 'cesium';
    import 'cesium/Source/Widgets/widgets.css';
    import React from 'react';
    
    class CesiumContainer extends React.Component {
      componentDidMount() {
        const viewer = new Cesium.Viewer('cesiumContainer');
      }
    
      render() {
        return <div id="cesiumContainer" />;
      }
    }
  • Individual modules can be imported using the following syntax:

    import Color from 'cesium/Source/Core/Color';
    
    const color = Color.fromRandom();
  • glTF model loading is supported out of the box:

    import CesiumGroundModelURL from '../data/models/CesiumGround.gltf';
    
    const model = viewer.scene.primitives.add(
      Cesium.Model.fromGltf({
        url: CesiumGroundModelURL,
      }),
    );
© 2023 Gatsby, Inc.