How to Render Double-Sided Planes in Three.js

By default, Three.js optimizes rendering performance by only drawing the front-facing side of 3D objects, a technique known as back-face culling. This article explains how to bypass this default behavior for flat planes by configuring the side property of a Three.js material, allowing your textures and colors to be visible from both the front and back of a 2D surface.

Understanding the Side Property

In Three.js, every material inherits from the base Material class, which contains a property called side. This property determines which faces of your geometry will be rendered by the WebGL renderer.

The side property accepts three constant values: * THREE.FrontSide: Renders only the front-facing polygons (default behavior). * THREE.BackSide: Renders only the back-facing polygons. * THREE.DoubleSide: Renders both the front and back faces.

When rendering flat 2D shapes like PlaneGeometry or ShapeGeometry, viewing them from behind will make them completely invisible unless you change this property to THREE.DoubleSide.

Code Implementation

To enable double-sided rendering, you must pass the side property inside the material’s constructor options, or set it directly on an existing material instance.

Here is a practical example using MeshBasicMaterial:

import * as THREE from 'three';

// 1. Create the plane geometry
const geometry = new THREE.PlaneGeometry(5, 5);

// 2. Create the material and set 'side' to THREE.DoubleSide
const material = new THREE.MeshBasicMaterial({
    color: 0x00ff00,
    side: THREE.DoubleSide
});

// 3. Combine them into a mesh and add to the scene
const plane = new THREE.Mesh(geometry, material);
scene.add(plane);

Alternatively, you can update the property on an existing material at runtime:

material.side = THREE.DoubleSide;
material.needsUpdate = true; // Required if changing the side property after the initial render

Performance Considerations

While THREE.DoubleSide is highly useful, it should be used selectively. Enabling double-sided rendering disables back-face culling for that specific mesh. This forces the GPU to render twice as many polygons because it must draw both the front and back faces, even if one side is obscured or facing away from the camera.

For optimal performance, only apply THREE.DoubleSide to flat surfaces that the camera is guaranteed to see from both sides, such as leaves, flags, or pieces of paper.