使用 React-three-fiber 创建 3D Globe

Z时代
2024-01-10
分类：综合

在本文中，您将学习如何使用 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>
   );
};