如何使用 reactthree-fiber 在 React 中创建一个旋转的圆环

react jsjavascript libraryfront end technology更新于 2025/11/17 10:52:17

本文将介绍如何使用 React 中的 react-three-fiber 包创建一个旋转的圆环。Three.js 是一个跨浏览器的 JavaScript 库和应用程序编程接口 (API)，用于使用 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>
   );
}