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

在本文中，我们将了解如何在 React 中使用 React-Three-Fiber 创建平面。平面是 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>
   );
}

说明

我们使用了 −

  • meshPhongMaterial 添加颜色和样式，

  • planeBufferGeometry 添加几何图形。它只接受一个包含平面宽度和高度的 "args" 自变量。

输出

执行后，将产生以下输出 −

更新于：2021 年 9 月 29 日

4K+ 次浏览

开启你的职业生涯

完成课程获得认证

开始
广告