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

  • Z时代
  • 2024-01-10
  • 分类：综合

在本文中，我们将了解如何使用 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>
   );
}

解释

我们用过 -

  • meshPhongMaterial添加颜色和样式，

  • planeBufferGeometry添加几何图形。它只需要一个包含平面宽度和高度的参数“args”。

输出结果

在执行时，它将产生以下输出 -

以上是 使用 React-Three-Fiber 在 React 中创建平面 的全部内容， 来源链接： utcz.com/z/363156.html

回到顶部