資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
安卓
Python
C 語言
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟
心理學
社會學
時尚研究
法律研究使用 React-Three-Fiber 在 React 中建立平面
在本文中，我們將瞭解如何在 React 中使用 React-Three-Fiber 建立平面。平面是 3D 渲染中廣泛使用的形狀。我們現在將建立一個 2D 平面，但你可以新增軌道控制元件來使其成為 3D。我們還將使用燈光和不同的顏色。讓我們開始吧。
示例
首先安裝以下軟體包 −
npm i --save @react-three/fiber three
threejs 和 react-three/fiber 用於將 webGL 渲染器新增到網站中，而 three-fiber 用於連線 threejs 和 React。
在 App.js 中新增以下程式碼行 −
import { Canvas } from "@react-three/fiber";
export default function App() {
return (
<Canvas>
<ambientLight />
<mesh>
<planeBufferGeometry attach="geometry" args={[25, 15]} />
<meshPhongMaterial attach="material" color="green" />
</mesh>
</Canvas>
);
}說明
我們使用了 −
meshPhongMaterial 新增顏色和樣式，
planeBufferGeometry 新增幾何圖形。它只接受一個包含平面寬度和高度的 "args" 自變數。
輸出
執行後，將產生以下輸出 −
更新於：2021 年 9 月 29 日
4K+ 次瀏覽
廣告