如何使用 reactthree-fiber 在 React 中创建圆柱体
react jsjavascript libraryfront end technology更新于 2025/11/19 0:44:17
本文将介绍如何使用 react-three-fiber 在 React 中创建一个基本的圆柱体形状。Three.js 是一个跨浏览器的 JavaScript 库和应用程序编程接口 (API)，用于使用 WebGL 在 Web 浏览器中创建和显示动画 3D 计算机图形。
示例
首先下载 react-three-fiber 包
npm i --save @react-three/fiber three
threejs 和 react-three/fiber 将用于向网站添加 WebGL 渲染器。将使用三芯光纤连接 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` 函数接受三个参数:`顶部半径`、`底部半径`和`高度`。`
`<mesh> 用于创建 `threeJS` 对象，并在其中使用 `CylinderGeometry` 创建了一个盒子，该盒子用于定义大小、形状和其他结构属性。我们使用 `meshStandardMaterial` 来设计几何结构。`
`<mesh> 用于将结构和设计结合起来。我们创建了一个功能组件，并在其中添加了一个引用。然后，我们创建了一个框架，用于改变网格对象或圆柱体的位置。接着，我们将框架添加到引用中，并赋予网格引用。
我们使用 position 参数来定位对象。<AmbientLight> 用于使颜色可见;如果没有环境光，<Cylinder> 将完全显示为黑色。
输出
执行时，它将产生以下输出 −
相关文章
有用资源
javascript 参考教程 - 该教程包含有关 javascript 的更多信息:https://www.cainiaomax.com/javascript/
