How to fix the ignorance of globe controls in Globe.gl in Next.JS?

Question

I'm using react-globe.gl to create a globe object for my next.js website. Everything works well apart from the manually set controls.

Here's my code for the component:

import dynamic from "next/dynamic";
const Globe = dynamic(import("react-globe.gl"), { ssr: false });

let size = 1250;
import data from "./Globe-data";

export default function GlobeJS(){

    return (
        <Globe
            width={size}
            height={size}
            hexPolygonsData={data.features}
            hexPolygonResolution={3}
            hexPolygonMargin={0.3}
            hexPolygonColor={() => "#ffffff"}
            backgroundColor="#000"
            atmosphereColor="#fff"

            controls = {{
                autoRotate: true,
                autoRotateSpeed: 0.4,
                enableZoom: false
            }}
        />
    )

}

The Globe by itself looks fine, however, it does not spin and zooming is still enabled, showing that the controls have been ignored. What have I done wrong here? All sources show that this code is supposed to work. Many thanks!

Answer 1

If I am understanding correctly, controls() is a method for globeEl.current as it returns an instance of Three.js's OrbitControls, Now, all autoRotate, autoRotateSpeed, and enableZoom are properties of globeEl.current.controls().

So, what you can do is to use useRef() and useEffect() to deal with this. I am using React.js if the code below helps.

import React from 'react'
import Globe from 'react-globe.gl'
import continents from '../../public/custom.geo.json'
import earthImg from '../../public/earth.jpeg'
import { useEffect, useRef } from 'react'


function About() {
  const globeEl = useRef()

  useEffect(() => {
    // Auto-rotate
    globeEl.current.controls().autoRotate = true;
    globeEl.current.controls().autoRotateSpeed = 1;
    globeEl.current.controls().enableZoom = false;
    globeEl.current.pointOfView({
      lat: 23.5,
      lng: 0,
      altitude: 2.5,
    })
  }, [])

  return (
    <div id='about'>
      <div className="hero">
        <div className="hero--text">
          <h1>From Concept to Creation</h1>
          <h4>Bridging the Gap Between Imagination and Reality</h4>
          <div className="hero--description">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. <br></br>Voluptates reprehenderit totam delectus neque error ex numquam, sint dolorum! Aperiam, ipsum?
          </div>
        </div>

        <div className="hero--globe">
          <Globe
            ref={globeEl}
            globeImageUrl={earthImg}
            // backgroundImageUrl="//unpkg.com/three-globe/example/img/night-sky.png"
            backgroundColor='rgba(0,0,0,0)'
            width={1150}
            height={1150}
            hexPolygonsData={continents.features}
            hexPolygonMargin={0.7}
            hexPolygonColor={() => 'rgba(255, 255, 255, 1)'}

          />

        </div>
      </div>
    </div>
  )
}

export default About