資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究使用 react-three-fiber 在 React 中建立 3D 甜甜圈狀結構
在本文中，我們將看到如何製作一個類似甜甜圈的 3D 圖形。我們將使用 react-three-fiber 將其應用到網頁中。我們將使用這個包製作一個甜甜圈狀的圖形，它將保持運動，我們將從其內部看到它。
示例
首先，下載重要的庫 −
npm i --save @react-three/fiber three
threejs 和 react-three/fiber 將用於向網站新增 webGL 渲染器。Three-fiber 將用於連線 threejs 和 React。
在 App.js 中新增以下程式碼行 −
import React, { useRef } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
function Tourus() {
const ref = useRef(null);
useFrame(() => (ref.current.rotation.x = ref.current.rotation.y += 0.01));
return (
<mesh visible position={[0, 0, 0]} castShadow ref={ref}>
<torusGeometry args={[10, 3, 16, 100]} />
<meshStandardMaterial attach="material" color="lightblue" />
</mesh>
);
}
export default function App() {
return (
<Canvas>
<ambientLight />
<Tourus />
</Canvas>
);
}Tourus 函式有 4 個引數：內半徑、管半徑、徑向分段（決定內部部分的圓度）和管狀分段（決定外部部分的圓度）。
輸出
這是相機的 3D 檢視，相機位於甜甜圈的內半徑之間。
它正在旋轉，這是一個剪輯，因為它正在旋轉。
更新於： 2021 年 9 月 28 日
513 次瀏覽
廣告