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 −