gatsby-plugin-cesium

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,
    }),
  );