Creating a Plane in React using React-Three-Fiber

React JSJavascript LibraryFront End Technology

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.


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 (
         <ambientLight />
            <planeBufferGeometry attach="geometry" args={[25, 15]} />
            <meshPhongMaterial attach="material" color="green" />


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.


On execution, it will produce the following output −

Updated on 29-Sep-2021 08:03:09