資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何在 React 中使用 reactthree-fiber 建立圓柱體
在本文中，我們將瞭解如何使用 **react-three-fiber** 在 React 中建立基本的圓柱體形狀。Three.js 是一個跨瀏覽器的 JavaScript 庫和應用程式程式設計介面，用於使用 WebGL 在 Web 瀏覽器中建立和顯示動畫 3D 計算機圖形。
示例
首先下載 **react-three-fiber** 包 -
npm i --save @react-three/fiber three
**threejs** 和 **react-three/fiber** 將用於向網站新增 WebGL 渲染器。Three-fiber 將用於連線 **threejs** 和 **React**。
在 **App.js** 中新增以下程式碼行 -
import React, { useEffect, useRef } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import * as THREE from "three";
function Cylinder() {
const myref = useRef();
useFrame(() => (myref.current.rotation.x = myref.current.rotation.y += 0.01));
return (
<mesh ref={myref}>
<cylinderBufferGeometry attach="geometry" args={[2, 2, 2]} />
<meshBasicMaterial attach="material" color="hotpink" />
</mesh>
);
}
export default function App() {
return (
<Canvas>
<ambientLight />
<Cylinder />
</Canvas>
);
}解釋
在這裡，我們簡單地建立了圓柱體幾何體和用於著色的網格。始終使用單獨的函式來建立形狀，然後將其渲染到畫布中。**Cylinder** 函式接受 3 個引數：**頂部半徑、底部半徑和高度。**
**<mesh>** 用於建立 **threeJS** 物件，並在其中使用 **CylinderGeometry** 建立了一個盒子，用於定義大小、形狀和其他結構屬性。我們使用 **meshStandardMaterial** 來設計我們的幾何結構。
**<mesh>** 用於將結構和設計組合在一起。我們在其中建立了一個函式式元件，並在其中建立了一個引用。然後我們建立了一個 Frame，它需要更改網格物件或圓柱體的位置。然後我們將框架新增到引用中，並將引用傳遞給網格。
我們使用 **position** 引數來定位物件。**<AmbientLight>** 用於使顏色可見；在沒有它的情況下，**<Cylinder>** 將看起來完全是黑色的。
輸出
執行後，它將產生以下輸出 -
更新於： 2021-09-28
2K+ 瀏覽量
廣告