如何在 React 中使用 reactthree-fiber 创建圆柱体

在本文中，我们将了解如何使用 **react-three-fiber** 在 React 中创建基本的圆柱体形状。Three.js 是一个跨浏览器的 JavaScript 库和应用程序编程接口，用于使用 WebGL 在 Web 浏览器中创建和显示动画 3D 计算机图形。

示例

首先下载 **react-three-fiber** 包 -

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

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

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

import React, { useEffect, useRef } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
import * as THREE from "three";
function Cylinder() {
   const myref = useRef();

   useFrame(() => (myref.current.rotation.x = myref.current.rotation.y += 0.01));

   return (
      <mesh ref={myref}>
         <cylinderBufferGeometry attach="geometry" args={[2, 2, 2]} />
         <meshBasicMaterial attach="material" color="hotpink" />
      </mesh>
   );
}

export default function App() {
   return (
      <Canvas>
         <ambientLight />
         <Cylinder />
      </Canvas>
   );
}

解释

在这里，我们简单地创建了圆柱体几何体和用于着色的网格。始终使用单独的函数来创建形状，然后将其渲染到画布中。**Cylinder** 函数接受 3 个参数：**顶部半径、底部半径和高度。**

**<mesh>** 用于创建 **threeJS** 对象，并在其中使用 **CylinderGeometry** 创建了一个盒子，用于定义大小、形状和其他结构属性。我们使用 **meshStandardMaterial** 来设计我们的几何结构。

**<mesh>** 用于将结构和设计组合在一起。我们在其中创建了一个函数式组件，并在其中创建了一个引用。然后我们创建了一个 Frame，它需要更改网格对象或圆柱体的位置。然后我们将框架添加到引用中，并将引用传递给网格。

我们使用 **position** 参数来定位对象。**<AmbientLight>** 用于使颜色可见；在没有它的情况下，**<Cylinder>** 将看起来完全是黑色的。

输出

执行后，它将产生以下输出 -

更新于： 2021-09-28

2K+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

开始学习
广告