在本文中,我们将看到如何使用 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>对象。
然后,我们将图像作为“金属”变量导入。
然后,我们将该金属图像转换为纹理并将其存储在“base”常量中。
接下来,在meshBasicMaterial 中,我们使用“map”函数应用该纹理。
我们还为立方体添加了旋转,使其看起来更漂亮。我们使用useFramer添加旋转功能。
输出结果
在执行时,它将产生以下输出 -
<video "="" controls="" xx_src="https://www.nhooo.com/assets/questions/media/57033/880251-1632897549.mp4">您的浏览器不支持 HTML5 视频。