数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 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+ 浏览量
广告