Rotation animation

[beachstrider]

Is your feature request related to a problem? Please describe.
How to give a rotation animation to the globe?

Describe the solution you'd like
Maybe some props.

Describe alternatives you've considered
...

Additional context
...

[BangNguyen1992]

Hello @jasonmz, not sure how you want the rotation animation, but you can change the rotation speed or enable the rotation

    const globeEl = useRef()
    const [landPolygons, setLandPolygons] = useState([]);

    useEffect(() => {
        globeEl.current.controls().autoRotate = true;
        globeEl.current.controls().autoRotateSpeed = 1;
  
       // Or if you want to the globe to rotate to a specific point `pointOfView`, 7000 is the animation duration
      globeEl.current.pointOfView({ lat: 37, lng: -80, altitude: 0.5 }, 7000);
    }, []);

    return <Globe  ref={globeEl}  />

[beachstrider]

Hi @BangNguyen1992 thanks for your kind help. that works great!

I am wondering if you ever used this in nextjs (ssr) where you may have to import globe-gl dynamically.
The problem is if I import it using nextjs dynamic import, ref doesn't work at all, here is my implementation:

'use client'

import { forwardRef, useLayoutEffect, useRef } from 'react'
import { GlobeProps } from 'react-globe.gl'

import dynamic from 'next/dynamic'

import placesData from './placesData.json'

const _Globe = dynamic(() => import('react-globe.gl').then((mod) => mod.default), {
  ssr: false
})

const Globe = forwardRef((props: GlobeProps, ref: any) => <_Globe {...props} ref={ref} />)

export const CitiesGlobe = () => {
  const globeEl = useRef<any>(null)
  const places: any = placesData

  useLayoutEffect(() => {
    if (globeEl.current) {
      globeEl.current.pointOfView({ lat: 20, lng: -16.6, altitude: 1.7 }, 0)
      globeEl.current.controls().autoRotate = true
      globeEl.current.controls().enabled = false
    }
  }, [])

  const handleVisibilityChange = () => {
    if (globeEl.current) {
      globeEl.current.controls().autoRotate = !document.hidden
    }
  }

  document.addEventListener('visibilitychange', handleVisibilityChange)

  return (
    <Globe
      ref={globeEl}
      width={520}
      height={520}
      globeImageUrl="//unpkg.com/three-globe/example/img/earth-night.jpg"
      backgroundColor="rgba(0,0,0,0)"
      labelsData={places}
      labelColor={() => 'rgba(255, 165, 0, 0.75)'}
      labelLat={(d: any) => d.properties.latitude}
      labelLng={(d: any) => d.properties.longitude}
      labelText={(d: any) => d.properties.name}
      labelSize={(d: any) => Math.sqrt(d.properties.pop_max) * 4e-4}
      labelDotRadius={(d: any) => Math.sqrt(d.properties.pop_max) * 4e-4}
      labelResolution={2}
      objectRotation={{ x: 50, y: 50, z: 1 }}
    />
  )
}

Thanks in advance!

[BangNguyen1992]

Hello @jasonmz, I haven't tried with Nextjs yet, but if you look around the resolved issues, there were some discussions about that such as here
#90