如何解决Next.js中react-globe.gl的globe控件不生效问题？

你的问题出在对react-globe.gl的controls属性误用：该属性仅接受布尔值（用于开启/关闭控件），不支持直接传入OrbitControls配置对象，因此你设置的autoRotate、enableZoom等参数完全未生效。

修改后的代码 #

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

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

export default function GlobeJS() {
  const globeRef = useRef(null);

  useEffect(() => {
    const globeInstance = globeRef.current;
    if (!globeInstance) return;

    // 获取底层OrbitControls实例
    const controls = globeInstance.controls();
    // 配置自动旋转
    controls.autoRotate = true;
    controls.autoRotateSpeed = 0.4;
    // 禁用缩放功能
    controls.enableZoom = false;
    // 更新控件状态使配置生效
    controls.update();
  }, []);

  return (
    <Globe
      ref={globeRef}
      width={size}
      height={size}
      hexPolygonsData={data.features}
      hexPolygonResolution={3}
      hexPolygonMargin={0.3}
      hexPolygonColor={() => "#ffffff"}
      backgroundColor="#000"
      atmosphereColor="#fff"
      enableControls={true} // 启用控件（默认值为true，可省略）
    />
  );
}

关键说明 #

• 使用useRef获取Globe组件实例，通过实例的controls()方法拿到底层THREE.OrbitControls对象
• 在useEffect中（组件挂载完成后）修改控件配置参数，确保Globe实例已初始化完成
• 调用controls.update()使新配置立即生效

内容的提问来源于stack exchange，提问作者nitlix