使用 React-three-fiber 创建 3D 地球仪

react jsjavascript libraryfront end technology更新于 2025/11/16 22:36:17

在本文中，您将学习如何使用 React-threefiber 创建地球仪。我们将首先创建一个球体，然后在其上绘制一幅完整的地球地图。这是一个有趣的纹理加载器功能，我们可以利用它，将任何图像作为纹理包裹在球体上。那么，让我们开始吧!

示例

首先，下载重要的库 −

npm i --save @react-three/fiber three

此库 react-three/fiber 将用于向网站添加 WebGL 渲染器，并连接 threejs 和 React。

下载一张地球地图图片并将其放置在 “src” 文件夹中。我们将图片文件命名为 "world-map.gif"。

在 App.js 中添加以下代码行 −

import React, { useRef } from "react";
import { Canvas,useFrame,useLoader } from "@reactthree/fiber";
import * as THREE from "three";
import earthImg from './world-map.gif'
import "./App.css";

const Sphere=()=>{
   const base=new THREE.TextureLoader().load(earthImg)
   const ref=useRef()
   useFrame(() => (ref.current.rotation.x=ref.current.rotation.y += 0.01))
   <return(
      <mesh visible castShadow ref={ref}>
      <directionalLight intensity={0.5} />
      <sphereGeometry attach="geometry" args={[2, 32, 32]} />
      <meshBasicMaterial
         map={base}
         color="white"
      />
      </mesh>
   )
}
export default function App(){
   return (
      <Canvas>
         <ambientLight />
         <Sphere/>
      </Canvas>
   );
};