https://github.com/kripod/gatsby-plugin-cesium

A Gatsby plugin to add support for CesiumJS
https://github.com/kripod/gatsby-plugin-cesium

cesium gatsby gatsby-plugin

Last synced: 9 days ago
JSON representation

A Gatsby plugin to add support for CesiumJS

• Host: GitHub
• URL: https://github.com/kripod/gatsby-plugin-cesium
• Owner: kripod
• License: mit
• Created: 2018-06-22T19:42:06.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-07-12T19:52:21.000Z (over 6 years ago)
• Last Synced: 2024-12-20T07:27:14.234Z (about 1 month ago)
• Topics: cesium, gatsby, gatsby-plugin
• Language: JavaScript
• Size: 42 KB
• Stars: 3
• Watchers: 4
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# gatsby-plugin-cesium

A [Gatsby][] plugin to add support for [CesiumJS][].

[gatsby]: https://www.gatsbyjs.org/

[cesiumjs]: https://cesiumjs.org/

## Install

`npm install --save gatsby-plugin-cesium cesium`

## How to use

Edit `gatsby-config.js`

```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:

  ```jsx

  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 
;

    }

  }

  ```


- Individual modules can be imported using the following syntax:

  ```js

  import Color from 'cesium/Source/Core/Color';

  const color = Color.fromRandom();

  ```

- glTF model loading is supported out of the box:

  ```js

  import CesiumGroundModelURL from '../data/models/CesiumGround.gltf';

  const model = viewer.scene.primitives.add(

    Cesium.Model.fromGltf({

      url: CesiumGroundModelURL,

    }),

  );

  ```

[official webpack integration guide of cesium]: https://cesiumjs.org/tutorials/cesium-and-webpack/