Package Exports

react-cesium-fiber

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-cesium-fiber) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-cesium-fiber

react-three-fiber is a React renderer for CesiumJs on the web.

👨🏻‍💻Work in Progress🛠

A few notes

Greatly inspired by the amazing react-three-fiber package and this mind-blowing video of Sophie Alpert.
Based on the work of the Cesium team and the CesiumJS library.
react-cesium-fiber is a very young project. If you are looking for something more production-ready, you can have a look at resium (even if I think that react-cesium-fiber conception is way easier to maintain.)

Get started

1. Create your react app and add basic cesium configuration.

You can follow craco-cesium really nice tutorial. But note that you don't need to add resium.

2. Add `react-cesium-fiber` with your favorite provider.

npm install react-cesium-fiber

yarn add react-cesium-fiber

3. Add a Viewer in your app

import React from "react";
import { Viewer } from "react-cesium-fiber";

const App = () => <Viewer />;

4. Add more components in your Viewer

import React from "react";
import { Color } from "cesium";
import { Viewer } from "react-cesium-fiber";

const App = () => (
  <Viewer>
    <entity>
      <cartesian3
        attach="position"
        constructFrom="fromDegrees"
        args={[-114.0, 30.0, 300000.0]}
      />
      <boxGraphics attach="box" material={Color.RED}>
        <cartesian3 attach="dimensions" args={[400000.0, 300000.0, 500000.0]} />
      </boxGraphics>
    </entity>
  </Viewer>
);

Note that you don't need to import entity, cartesian3 or boxGraphics. That's the magic of the react-reconciler.