使用 react-three-fiber 在 React 中创建类似甜甜圈的 3D 结构

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

在本文中，我们将了解如何制作一个类似甜甜圈的 3D 图形。我们将使用 react-three-fiber 在网页中应用此方法。我们将使用此包创建一个类似甜甜圈的形状，它会不断移动，并且我们可以从内部看到它。

示例

首先，下载重要的库 −

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

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

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

import React, { useRef } from "react";
import { Canvas, useFrame } from "@react-three/fiber";
function Tourus() {

   const ref = useRef(null);
   useFrame(() => (ref.current.rotation.x = ref.current.rotation.y += 0.01));

   return (
      <mesh visible position={[0, 0, 0]} castShadow ref={ref}>
         <torusGeometry args={[10, 3, 16, 100]} />
         <meshStandardMaterial attach="material" color="lightblue" />
      </mesh>
   );
}

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

函数 Tourus 接受 4 个参数:内半径、管半径、决定内部圆度的径向段，以及决定外部圆度的管状段。