# Creating a Plane in React using React-Three-Fiber

In this article, we will see how to create a plane in React using React-Three-Fiber. Planes are widely used shapes in 3D rendering. We will create a 2D plane for now, but you can add orbital controls in it to make it 3D. We will also use lighting and different colors. Let's get started.

## Example

First install the following package −

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

threejs and react-three/fiber will be used to add webGL renderer to the website and three-fiber will be used to connect threejs and React.

Add the following lines of code in 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>
);
}

## Explanation

We have used −

• meshPhongMaterial to add color and style,

• planeBufferGeometry to add the geometry. It takes only one argument "args" that contains the width and height of the plane.

## Output

On execution, it will produce the following output −