使用 react-three-fiber 在 React 中创建 3D 立方体

在这篇文章中，我们将学习如何使用第三方包 **react-three-fiber** 在 React 中使用 **Three.js**。**Three.js** 是一个跨浏览器的 JavaScript 库和应用程序编程接口，用于使用 WebGL 在 Web 浏览器中创建和显示动画 3D 计算机图形。

示例

首先，安装 **react-three-fiber** 包：

npm i --save @react-three/fiber three

**threejs** 和 **react-three/fiber** 将用于向网站添加 WebGL 渲染器。

在 **App.js** 中添加以下代码：

import React, { useRef, useState } from "react";
import { Canvas, useFrame } from "@react-three/fiber";

function Box(props) {
   const mesh = useRef();
   useFrame(() => (mesh.current.rotation.x = mesh.current.rotation.y += 0.01));
   return (
      <mesh {...props} ref={mesh}>
         <boxGeometry args={[3, 3, 3]} />
         <meshStandardMaterial color={"orange"} />
      </mesh>
   );
}
export default function App() {
   return (
      <Canvas>
         <ambientLight />
         <Box position={[0, 0, 0]} />
      </Canvas>
   );
}

解释

  • **<mesh>** 用于创建一个 **threeJS** 对象，在其中，我们使用 **boxGeometry** 创建了一个盒子，它用于定义大小、形状和结构。

  • 我们使用 **meshStandardMaterial** 来设计我们的几何结构。

  • <mesh> 用于将结构和设计组合在一起。我们创建了一个函数组件，在其中创建了一个引用。

  • 然后我们创建了一个 Frame，它需要更改 mesh 对象或立方体的位置。接下来，我们将 frame 添加到引用并将其引用到 mesh。

  • 我们使用 **position** 参数来定位对象。

  • **<AmbientLight>** 用于使颜色可见；如果没有它，**<Box>** 将看起来完全是黑色。

输出

它将产生以下输出：

更新于：2021年9月28日

2K+ 浏览量

开启你的 职业生涯

完成课程获得认证

开始学习
广告