Next.js 14 中使用 Three.js 创建地球仪：如何解决 \

2024-03-18 12:34:30

在 Next.js 14 中使用 Three.js 创建地球仪：解决 “ReferenceError: document is not defined” 问题

问题：

在 Next.js 14 中使用 Three.js 构建地球仪时，开发人员可能会遇到“ReferenceError: document is not defined”错误。这是由于在 Three.js 初始化时无法访问 Document 对象所致。

解决方法：

解决此问题需要两步：

1. 检测 Window 对象

在组件 useEffect 中检测 window 对象，确保 Three.js 仅在浏览器环境中初始化。

2. 添加 Canvas 元素

将 canvas 元素添加到 DOM 中，使 Three.js 能够渲染其内容。

示例代码：

const ThreeScene = () => {
  const [issPosition, setIssPosition] = useState<ISSPosition>();
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (typeof window !== "undefined") {
      containerRef.current?.appendChild(renderer.domElement);
    }
  }, []);

步骤详解：

步骤 1：检测 Window 对象

useEffect(() => {
  if (typeof window !== "undefined") {
    // 在此处初始化 Three.js 代码
  }
}, []);

这将确保 Three.js 仅在浏览器环境中初始化，而不是在服务器端。

步骤 2：添加 Canvas 元素

containerRef.current?.appendChild(renderer.domElement);

这将 canvas 元素附加到 containerRef 中，该引用指向一个 HTML div 元素。

总结：

通过在 useEffect 中检测 window 对象并在 Three.js 初始化后将 canvas 元素附加到 DOM 中，可以解决“ReferenceError: document is not defined”错误。通过遵循这些步骤，开发人员可以在 Next.js 14 中使用 Three.js 构建身临其境的 3D 地球仪。