Putting the Globe component inside a react-three-fiber Canvas

[jo185128]

Hi, I wanted to reach out to try and get access to react-three-fiber Canvas while using Globe.gl. Right now I am returning a globe with certain properties, but I want to put all of that inside a Canvas so that I could more easily access scene properties, add to the scene, and use react-three-fiber and react-three-drei:

Heres what I got:

import React, { useCallback, useEffect, useRef, useState } from "react";
import Globe from "react-globe.gl";
import BlackMap from "../assets/map1.jpg";
import { getOrderData } from "../WebSocket.js"
import HEX_DATA from "../assets/countries_hex_data.json";
import * as d3 from "d3";
import * as THREE from 'three';

export default function ReactGlobe() {
  const globeRef = useRef()
  const [orderData, setOrderData] = useState([]);
  const ORDER_UPDATE_INTERVAL = 2000

// What i was using to access and update scene
//   if (globeRef.current !== undefined) {
//    const scene = globeRef.current.scene();
//    console.log(scene);
//
//     // Lighting
//     let AmbientLight = scene.children[1];
//     let DirectionalLight = scene.children[2];
//     AmbientLight.intensity = 0;
//     DirectionalLight.intensity = 500;
//     DirectionalLight.color = {
//         b: 0,
//         g: 0,
//         isColor: true,
//         r: 1
//     };
//   }

  const extractLatLong = (data) => {
    const extractData = data.map(item => ({
      lat: item.latitude,
      lng: item.longitude
    }));
    return extractData;
  }
  useEffect(() => {
    setInterval(() => {
      let newDataJSON = getOrderData();
      let newData = extractLatLong(newDataJSON);
      setOrderData(newData)
    }, ORDER_UPDATE_INTERVAL);
    return () => clearInterval(interval);
  }, []);

  useEffect(() => {
    globeRef.current.controls().autoRotate = true;
    globeRef.current.controls().enableZoom = false;
  }, []);

  return (

        <Globe
          // ENVIRONMENT
          backgroundColor="#D3D3D3"
          atmosphereColor={'white'}
          width={innerWidth}
          height={innerHeight}
          ref={globeRef}
              />
  );
};

I want to wrap this component in a Canvas, or have a much better way of accessing and editing the scene

[vasturiano]

@jo185128 you should consume from the lower level component: https://github.com/vasturiano/three-globe

[jo185128]

To better explain what I am trying is to change scene elements to make our visual design look similar to the GitHub globe:

[jo185128]

To better explain what I am trying is to change scene elements to make our visual design look similar to the GitHub globe:

I have tried to change the directional light but cant get it to render the updates i make. How would you recommend changing the lighting, shading, and geometry to better resemble this globe?

[jo185128]

I made a work around fix here. Still working on the design though

[MichaelBonnet]

Hey @jo185128, did you ever figure out how to get the globe inside a canvas? I'm trying to do the same thing so I can render other elements over the canvas in a React app, but having trouble. Your codesandbox link doesn't seem to include a canvas.