資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究如何在 React 中使用 reactthree-fiber 建立一個環
在這篇文章中，我們將學習如何在 React 中使用 **react-three-fiber** 包建立一個旋轉的環。**Three.js** 是一個跨瀏覽器的 JavaScript 庫和應用程式程式設計介面，用於使用 WebGL 在 Web 瀏覽器中建立和顯示動畫 3D 計算機圖形。
示例
首先，下載必要的庫：
npm i --save @react-three/fiber three
**threejs** 和 **react-three/fiber** 將用於向網站新增 WebGL 渲染器。
在 **index.css** 中新增以下程式碼：
* {
box-sizing: border-box;
}
html,body,#root{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}此預設樣式將使 Canvas 與父元素匹配。
在 **App.js** 中新增以下程式碼：
import React, { useRef } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
function Ring() {
const ref = useRef(null);
useFrame(() => (ref.current.rotation.x = ref.current.rotation.y += 0.01));
return (
<mesh
visible
position={[0, 0, 0]}
rotation={[0, 0, 0]}
castShadow
ref={ref}>
<ringBufferGeometry args={[1, 4, 32]} />
<meshBasicMaterial attach="material" color="hotpink" />
</mesh>
);
}
export default function App() {
return (
<Canvas>
<ambientLight />
<Ring />
</Canvas>
);
}解釋
Ring 函式接受 3 個引數：**內半徑**、**外半徑** 和第三個引數 **theta 分段**，它決定環的圓度。
**<mesh>** 用於建立 **threeJS** 物件，在其中我們使用 **RingGeometry** 建立了一個環，用於定義大小、形狀和其他結構性元素。
我們使用 **meshStandardMaterial** 來設計我們的幾何結構。
**<mesh>** 用於將結構和設計組合在一起。我們建立了一個函式式元件，在其中建立了一個引用。然後我們建立了一個 Frame，用於更改 mesh 物件或環的位置。
然後我們將 frame 新增到引用中，並將引用賦給 mesh。
我們使用 position 引數來簡單地定位物件。
<AmbientLight> 用於使顏色可見；如果沒有它，<Ring> 將看起來完全是黑色。
輸出
它將產生以下輸出：
更新於：2021年9月28日
1K+ 次瀏覽
廣告