Integrating three-globe with react-three-fiber

[manhtuongta1996]

👋 hi everyone,
I am trying to learn more about how to use the library three-globe with react-three-fiber

I was able to successfully add the globe to the ThreeJS scene using a useEffect hook:

import React, { useEffect } from "react";
import { useThree } from "react-three-fiber";
import ThreeGlobe from "three-globe";

const MyGlobe = new ThreeGlobe()
  .globeImageUrl("//unpkg.com/three-globe/example/img/earth-blue-marble.jpg")
  .bumpImageUrl("//unpkg.com/three-globe/example/img/earth-topology.png");

const Globe = (props) => {
  const { scene } = useThree();
  // This reference will give us direct access to the mesh

  useEffect(() => {
    scene.add(myGlobe);
  }, []);

  return null;
};

export default Globe;

However ideally I would be able to render the MyGlobe as a component instead so it can be controlled using react-three-fiber utilities such as useFrame as shown in the example:

import ReactDOM from 'react-dom'
import React, { useRef, useState } from 'react'
import { Canvas, useFrame } from 'react-three-fiber'

function Box(props) {
  // This reference will give us direct access to the mesh
  const mesh = useRef()

  // Set up state for the hovered and active state
  const [hovered, setHover] = useState(false)
  const [active, setActive] = useState(false)

  // Rotate mesh every frame, this is outside of React without overhead
  useFrame(() => {
    mesh.current.rotation.x = mesh.current.rotation.y += 0.01
  })

  return (
    <mesh
      {...props}
      ref={mesh}
      scale={active ? [1.5, 1.5, 1.5] : [1, 1, 1]}
      onClick={(event) => setActive(!active)}
      onPointerOver={(event) => setHover(true)}
      onPointerOut={(event) => setHover(false)}>
      <boxBufferGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
    </mesh>
  )
}

ReactDOM.render(
  <Canvas>
    <ambientLight />
    <pointLight position={[10, 10, 10]} />
    <Box position={[-1.2, 0, 0]} />
    <Box position={[1.2, 0, 0]} />
  </Canvas>,
  document.getElementById('root')
)

What is the best way to do it? Thanks for your help

[CodyJasonBennett]

Have you seen https://docs.pmnd.rs/react-three-fiber/api/objects#using-3rd-party-objects-declaratively ?

You can extend the globe and use it as a native element.

import React, { useRef, useLayoutEffect } from 'react'
import { extend } from 'react-three-fiber'
import ThreeGlobe from 'three-globe'

extend({ ThreeGlobe })

const Globe = (props) => {
  // This reference will give us direct access to the ThreeGlobe class
  const globeRef = useRef()

  // An effect that runs after three.js elements are created but before render
  useLayoutEffect(() => {
    // Configure the globe
    globeRef.current.globeImageUrl('//unpkg.com/three-globe/example/img/earth-blue-marble.jpg')
    globeRef.current.bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png')
  }, [])

  // This is a ThreeGlobe object but represented in JSX.
  // Any valid properties of that class are valid props
  return <threeGlobe {...props} ref={globeRef} />
}

[manhtuongta1996]

That's exactly what I need, sorry I missed that extend part of the doc, only started learning react-three-fiber yesterday.
You're a life saver !! Thank you !

[rohanbhangui]

@manhtuongta1996 do have a question: How would you get this to work with something like react router dom. My particular case, I have a globe on one page, I navigate away and then come back and things like arcsData don't get rerendered. Only when i hard refresh does it load back in. Any ideas?

[IlirBajrami]

Getting window is not defined when i extend({ThreeGlobe}) in Nextjs.

error - ReferenceError: window is not defined
    at file:///Users/ilirbajrami/Desktop/edis-global/node_modules/three-conic-polygon-geometry/dist/three-conic-polygon-geometry.mjs:389:13
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25) {
  page: '/servers'
}

I tried:

if (typeof window !== "undefined") {
  extend({ ThreeGlobe });
}

but it's not working.
Any solution would be appreciated.

[IlirBajrami]

Ok, i fixed it by dynamically importing my Globe.tsx component into the page where i want to display. In case anyone has the same issue, you can dynamically import components in Nextjs. https://nextjs.org/docs/advanced-features/dynamic-import

[emre-turan]

Thank you for providing the solution, however, I am experiencing some performance issues while using it. During the initial load, the globe is rendering very slowly. Could you please suggest any ways to improve its performance?