資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學使用React-three-fiber建立3D地球
在本文中，您將學習如何使用react-three-fiber建立一個地球。我們將首先建立一個球體，然後將整個地球地圖對映到上面。這是一個有趣的紋理載入器特性，我們可以用它將任何影像作為紋理包裹在球體上。那麼，讓我們開始吧！
示例
首先，下載重要的庫：
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，用於更改mesh物件或球體的位置。然後我們將frame新增到引用中，並將引用賦給mesh。
Position引數只是定位物件。**<AmbientLight>**用於使顏色可見。如果沒有它，**<Sphere>** 將看起來全黑。
輸出
它將產生以下輸出：
更新於：2021年9月27日
2K+ 瀏覽量
廣告