数据结构
网络
关系数据库管理系统
操作系统
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 次浏览
广告