数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法学研究如何在 React 中使用 reactthree-fiber 创建一个环
在这篇文章中，我们将学习如何在 React 中使用 **react-three-fiber** 包创建一个旋转的环。**Three.js** 是一个跨浏览器的 JavaScript 库和应用程序编程接口，用于使用 WebGL 在 Web 浏览器中创建和显示动画 3D 计算机图形。
示例
首先，下载必要的库：
npm i --save @react-three/fiber three
**threejs** 和 **react-three/fiber** 将用于向网站添加 WebGL 渲染器。
在 **index.css** 中添加以下代码：
* {
box-sizing: border-box;
}
html,body,#root{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}此默认样式将使 Canvas 与父元素匹配。
在 **App.js** 中添加以下代码：
import React, { useRef } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
function Ring() {
const ref = useRef(null);
useFrame(() => (ref.current.rotation.x = ref.current.rotation.y += 0.01));
return (
<mesh
visible
position={[0, 0, 0]}
rotation={[0, 0, 0]}
castShadow
ref={ref}>
<ringBufferGeometry args={[1, 4, 32]} />
<meshBasicMaterial attach="material" color="hotpink" />
</mesh>
);
}
export default function App() {
return (
<Canvas>
<ambientLight />
<Ring />
</Canvas>
);
}解释
Ring 函数接受 3 个参数：**内半径**、**外半径** 和第三个参数 **theta 分段**，它决定环的圆度。
**<mesh>** 用于创建 **threeJS** 对象，在其中我们使用 **RingGeometry** 创建了一个环，用于定义大小、形状和其他结构性元素。
我们使用 **meshStandardMaterial** 来设计我们的几何结构。
**<mesh>** 用于将结构和设计组合在一起。我们创建了一个函数式组件，在其中创建了一个引用。然后我们创建了一个 Frame，用于更改 mesh 对象或环的位置。
然后我们将 frame 添加到引用中，并将引用赋给 mesh。
我们使用 position 参数来简单地定位对象。
<AmbientLight> 用于使颜色可见；如果没有它，<Ring> 将看起来完全是黑色。
输出
它将产生以下输出：
更新于：2021年9月28日
1K+ 次浏览
广告