使用 React-Three-Fiber 在 React 中创建平面

react jsjavascript libraryfront end technology更新于 2025/11/19 9:16:17

在本文中，我们将了解如何使用 React-Three-Fiber 在 React 中创建平面。平面是 3D 渲染中广泛使用的形状。我们现在将创建一个 2D 平面，但您可以在其中添加轨道控件以使其成为 3D 平面。我们还将使用光照和不同的颜色。让我们开始吧。

示例

首先安装以下软件包 −

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

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

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

import { Canvas } from "@react-three/fiber";

export default function App() {
   return (
      <Canvas>
         <ambientLight />
         <mesh>
            <planeBufferGeometry attach="geometry" args={[25, 15]} />
            <meshPhongMaterial attach="material" color="green" />
         </mesh>
      </Canvas>
   );
}