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

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

解释

在这里，我们首先创建了一个球体并加载了一个纹理。然后我们将纹理包裹在球体上。

<mesh>用于制作threeJS 对象，在其中我们使用SphereGeometry制作了一个盒子，用于定义大小、形状和其他结构性事物。

meshBasicMaterial用于设计我们的几何结构。<mesh>用于将结构和设计结合在一起。我们创建了一个功能组件，我们在其中进行了引用。接下来，我们创建了一个框架，用于更改我们的网格对象或球体的位置。然后我们添加了frame to reference并引用了mesh。

Position 参数只是定位对象。<AmbientLight>用于使颜色可见。如果没有它，<Sphere>将看起来全黑。

输出结果

它将产生以下输出 -

<video "="" controls="" xx_src="https://www.nhooo.com/assets/questions/media/56949/395083-1632733715.mp4">您的浏览器不支持 HTML5 视频。