資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會研究
時尚研究
法律研究使用 react-three-fiber 在 React 中建立 3D 立方體
在這篇文章中，我們將學習如何使用第三方包 **react-three-fiber** 在 React 中使用 **Three.js**。**Three.js** 是一個跨瀏覽器的 JavaScript 庫和應用程式程式設計介面，用於使用 WebGL 在 Web 瀏覽器中建立和顯示動畫 3D 計算機圖形。
示例
首先，安裝 **react-three-fiber** 包：
npm i --save @react-three/fiber three
**threejs** 和 **react-three/fiber** 將用於向網站新增 WebGL 渲染器。
在 **App.js** 中新增以下程式碼：
import React, { useRef, useState } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
function Box(props) {
const mesh = useRef();
useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01));
return (
<mesh {...props} ref={mesh}>
<boxGeometry args={[3, 3, 3]} />
<meshStandardMaterial color={"orange"} />
</mesh>
);
}
export default function App() {
return (
<Canvas>
<ambientLight />
<Box position={[0, 0, 0]} />
</Canvas>
);
}解釋
**<mesh>** 用於建立一個 **threeJS** 物件，在其中，我們使用 **boxGeometry** 建立了一個盒子，它用於定義大小、形狀和結構。
我們使用 **meshStandardMaterial** 來設計我們的幾何結構。
<mesh> 用於將結構和設計組合在一起。我們建立了一個函式元件，在其中建立了一個引用。
然後我們建立了一個 Frame，它需要更改 mesh 物件或立方體的位置。接下來，我們將 frame 新增到引用並將其引用到 mesh。
我們使用 **position** 引數來定位物件。
**<AmbientLight>** 用於使顏色可見；如果沒有它，**<Box>** 將看起來完全是黑色。
輸出
它將產生以下輸出：
更新於：2021年9月28日
2K+ 瀏覽量
廣告