資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究使用 React-Three-Fiber 在 React 中建立 3D 金屬紋理盒子
在本文中，我們將瞭解如何使用 React-Three-Fiber 包在 React JS 中製作一個金屬紋理立方體盒子。首先，我們將下載一張金屬照片，然後將其應用於立方體的所有表面。立方體是基本形狀，但我們可以透過在其表面包裹影像使其看起來更具吸引力。所以，讓我們開始吧。
示例
首先下載並安裝以下包：
npm i --save @react-three/fiber three
**threejs** 和 **react-three/fiber** 將用於向網站新增 WebGL 渲染器，而 **three-fiber** 將用於連線 **threejs** 和 React。
現在讓我們下載一個金屬影像並將其放入 **“src”** 資料夾中。我擁有此影像，並將其命名為 **"download2.jpg"**：
接下來，在 **App.js** 中插入以下程式碼行：
import React, { useRef } from "react";
import { Canvas, useFrame, useLoader } from "@reactthree/fiber";
import * as THREE from "three";
import metal from "./download2.jpg";
import "./App.css";
function Box(props) {
const mesh = useRef();
useFrame(() => (mesh.current.rotation.x =
mesh.current.rotation.y += 0.01));
const base = new THREE.TextureLoader().load(metal);
return (
<mesh {...props} ref={mesh}>
<boxGeometry args={[3, 3, 3]} />
<meshBasicMaterial attach="material" color={"lightblue"} map={base} />
</mesh>
);
}
export default function App() {
return (
<Canvas>
<ambientLight />
<Box />
</Canvas>
);
}解釋
在這裡，我們建立了一個 **<Box>** 物件。
然後，我們將我們的影像作為 **“metal”** 變數匯入。
然後，我們將該金屬影像轉換為 **紋理** 並將其儲存在 **“base”** 常量中。
接下來，在 **meshBasicMaterial** 內部，我們使用 **“map”** 函式應用該紋理。
我們還為我們的立方體添加了旋轉使其看起來更美觀。我們使用 **useFramer** 新增旋轉功能。
輸出
執行後，它將產生以下輸出：
更新於： 2021年9月29日
949 次瀏覽
廣告