reactjs - How to rotate the globe in react-globe.gl in next js? - Stack Overflow

admin管理员组

文章数量:1355879

I'm using react-globe.gl (v2.33.2) in my Next.js (v14.2.18) project and trying to make the globe rotate continuously. Here's my current component

'use client';
import React, { useEffect, useRef, forwardRef } from 'react';
import dynamic from 'next/dynamic';

const Globe = dynamic(() => import('react-globe.gl'), { ssr: false });

const GlobeViewer = () => {
  const globeEl = forwardRef();

  useEffect(() => {
    if (globeEl.current) {
      const controls = globeEl.current.controls();
      if (controls) {
        controls.autoRotate = true;
        controls.autoRotateSpeed = 1;
        controls.enableZoom = false;
      }

      globeEl.current.pointOfView({
        lat: 23.5,
        lng: 0,
        altitude: 2.5,
      });
    }
  }, [])


  const pointsData = [
    {
      lat: 5.9496,
      lng: 80.5469,
      size: 2,
      color: 'red',
      label: 'Sri Lanka, Matara',
    }
  ];

  return (
    <div>
      <Globe
        ref={globeEl}
        height={400}
        width={400}
        backgroundColor={'rgba(0, 0, 0, 0)'}
        backgroundImageOpacity={0.5}
        showAtmosphere={true}
        showGlobe={true}
        globeImageUrl="//cdn.jsdelivr/npm/three-globe/example/img/earth-blue-marble.jpg"
        pointsData={pointsData}
        pointLat={(d) => d.lat}
        pointLng={(d) => d.lng}
        pointColor={(d) => d.color}
        pointAltitude={(d) => d.size}
        pointLabel={(d) => d.label}
      />
    </div>
  );
};

export default GlobeViewer;

However, this doesn't seem to work as expected. How can I properly enable automatic rotation for the globe? Any suggestions would be greatly appreciated!

本文标签： reactjsHow to rotate the globe in reactglobegl in next jsStack Overflow