使用 React-Three-Fiber 在 React 中创建 3D 金属纹理盒子

react jsjavascript libraryfront end technology更新于 2025/11/19 12:28:17

在本文中，我们将学习如何使用 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>
   );
}