Create a Flat Surface in Three.js Using PlaneGeometry

In Three.js, creating a flat surface or 2D plane is a fundamental task often used for grounds, walls, or backgrounds. This guide provides a straightforward, step-by-step walkthrough on how to use PlaneGeometry combined with a material and a mesh to render a simple flat surface in a Three.js scene, including the necessary code to get it up and running.

Step 1: Define the Plane Geometry

The PlaneGeometry class generates a flat, two-dimensional rectangle. It accepts parameters for width and height.

const width = 10;
const height = 10;
const geometry = new THREE.PlaneGeometry(width, height);

Step 2: Create a Material

To make the flat surface visible, you must pair the geometry with a material. By default, Three.js renders materials as single-sided (only visible from the front). If you want the plane to be visible from both sides, set side to THREE.DoubleSide.

const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00, 
    side: THREE.DoubleSide
});

Step 3: Combine Geometry and Material into a Mesh

A Mesh is the object that represents the actual 3D model in your scene. Pass the geometry and material created in the previous steps into the mesh constructor.

const plane = new THREE.Mesh(geometry, material);

Step 4: Rotate the Plane (Optional)

By default, a plane is created standing vertically facing the camera (aligned with the XY plane). If you want to use it as a flat floor or ground surface, you must rotate it 90 degrees (or \(\pi / 2\) radians) along the X-axis.

plane.rotation.x = -Math.PI / 2;

Step 5: Add the Mesh to the Scene

Finally, add the newly created plane mesh to your Three.js scene so it can be rendered.

scene.add(plane);

Complete Implementation Example

Here is how the complete code looks when put together:

import * as THREE from 'three';

// 1. Create the scene
const scene = new THREE.Scene();

// 2. Create the Plane Geometry (width, height)
const geometry = new THREE.PlaneGeometry(5, 5);

// 3. Create a Material (DoubleSide allows it to be seen from the back)
const material = new THREE.MeshBasicMaterial({ color: 0x3f51b5, side: THREE.DoubleSide });

// 4. Create the Mesh
const plane = new THREE.Mesh(geometry, material);

// 5. Rotate the plane to make it horizontal (like a floor)
plane.rotation.x = -Math.PI / 2;

// 6. Add to the scene
scene.add(plane);