Demo - ScenegraphLayer using GLTF loader and LocalForage

GLTFSceneGraph.js

import React, { useEffect, useState } from "react";
import DeckGL from "@deck.gl/react";
import { ScenegraphLayer } from "@deck.gl/mesh-layers";
import { registerLoaders } from "@loaders.gl/core";
import { GLTFLoader } from "@loaders.gl/gltf";
import { load } from "@loaders.gl/core";
import localforage from "localforage";

// Register the proper loader for scenegraph.gltf
registerLoaders(GLTFLoader);

const GLB = () => {
  const [layerObj, setLayerObj] = useState(null);
  const fetchData = async () => {
    await load(
      "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxAnimated/glTF-Binary/BoxAnimated.glb",
      GLTFLoader,
      {
        gltf: {
          postProcess: true,
          normalize: true,
        },
      }
    )
      .then((response) => {
        console.log(response, "Save to LocalForage.....");
        // localforage.setItem("test-demo", response);
        localforage.setItem(
          "test-demo",
          JSON.stringify(response),
          async function (value, err) {
            //declare function as async
            // console.log(value); // "testValue" value should show in console
          }
        );
        return response;
      })
      .then((res) => {
        // console.log(res, "RES");
        const layer = new ScenegraphLayer({
          id: "ScenegraphLayer",
          data:
            "https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart-stations.json",
          _animations: {
            "*": { speed: 5 },
          },
          _lighting: "pbr",
          getOrientation: (d) => [0, Math.random() * 180, 90],
          getPosition: (d) => d.coordinates,
          scenegraph: res,
          sizeScale: 500,
          pickable: true,
        });
        return layer;
      })
      .then((layer) => {
        // console.log(layer, "LAYER");
        setLayerObj(layer);
        return layer;
      });
  };
  // glb loader
  useEffect(() => {
    const fetchGlbData = async () => {
      try {
        await localforage
          .getItem("test-demo")
          .then((data) => {
            if (JSON.parse(data)) {
              console.log(JSON.parse(data), "fetch from localforage...");
              const cacheLayer = new ScenegraphLayer({
                id: "ScenegraphLayer",
                data:
                  "https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart-stations.json",
                _animations: {
                  "*": { speed: 5 },
                },
                _lighting: "pbr",
                getOrientation: (d) => [0, Math.random() * 180, 90],
                getPosition: (d) => d.coordinates,
                scenegraph: JSON.parse(data),
                sizeScale: 500,
                pickable: true,
              });
              return cacheLayer;
            } else {
              // No cache saved, need to fetch obj from file.
              (async () => {
                const result = await fetchData();
                return false;
              })();
            }
          })
          .then((res) => {
            console.log(res, "LAYER FROM CACHE OBJ");
            if (res) {
              setLayerObj(res);
            }
          });
        // This code runs once the value has been loaded
        // from the offline store.
      } catch (err) {
        // This code runs if there were any errors.
        console.log(err);
      }
    };

    fetchGlbData();
  }, [setLayerObj]);

  const initialViewState = {
    longitude: -122.4,
    latitude: 37.74,
    zoom: 11,
    maxZoom: 20,
    pitch: 30,
    bearing: 0,
  };

  return (
    <div>
      <DeckGL
        mapStyle='https://basemaps.cartocdn.com/gl/positron-gl-style/style.json'
        initialViewState={initialViewState}
        layers={[layerObj]}
        getTooltip={({ object }) =>
          object && `${object.name}\n${object.address}`
        }
      />
    </div>
  );
};

export default GLB;