Three.js Clipping Planes: Constructing a Plane Object

This article provides a practical guide on how to construct and implement the THREE.Plane mathematical object for geometry clipping in Three.js. You will learn how to define a clipping plane using normal vectors and constants, apply it to 3D materials, and configure the WebGL renderer to enable precise visual slicing of your 3D models.

Understanding the THREE.Plane Object

In Three.js, a mathematical plane is defined using the THREE.Plane class. Unlike standard geometry meshes, this object has no visual representation by default; it is a purely mathematical construct defined by a normal vector and a constant.

The mathematical equation representing the plane is: ax + by + cz + d = 0

• Normal Vector (a, b, c): A normalized THREE.Vector3 pointing perpendicular to the plane’s surface. This vector dictates which side of the plane will be clipped (rendered) and which side will be kept. Geometries on the negative side of the normal are kept, while geometries on the positive side (where the normal points) are clipped/discarded.
• Constant (d): A scalar value representing the distance from the origin (0, 0, 0) to the plane along the normal vector.

Constructing a Clipping Plane

To create a plane that cuts horizontally through the Y-axis, you define a normal pointing upward and set the distance from the origin:

import * as THREE from 'three';

// Define a normal vector pointing straight up along the Y-axis
const normal = new THREE.Vector3(0, -1, 0); 

// Define the distance from the origin (e.g., 0.5 units)
const constant = 0.5;

// Construct the mathematical plane
const localPlane = new THREE.Plane(normal, constant);

In this setup, any geometry positioned above y = 0.5 will be clipped and rendered invisible.

Applying the Plane to a Material

To make a plane clip your geometry, you must assign it to the clippingPlanes property of the material used by your mesh. The clippingPlanes property accepts an array of THREE.Plane objects, allowing you to clip a single mesh using multiple angles simultaneously.

const material = new THREE.MeshStandardMaterial({
    color: 0x00ff00,
    side: THREE.DoubleSide, // Recommended to see the inside of clipped meshes
    clippingPlanes: [ localPlane ],
    clipShadows: true // Enables shadows to be clipped accordingly
});

const geometry = new THREE.BoxGeometry(1, 1, 1);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

Enabling Clipping in the Renderer

By default, Three.js does not calculate clipping planes because it requires extra GPU resources. You must explicitly instruct your WebGLRenderer to respect local clipping planes:

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Enable local clipping planes
renderer.localClippingEnabled = true;

Visualizing the Clipping Plane

Because THREE.Plane is purely mathematical, it is difficult to debug without a visual aid. Three.js provides a helper class called THREE.PlaneHelper to render a representation of your clipping plane in the scene:

// Create a helper (plane, size, color)
const helper = new THREE.PlaneHelper(localPlane, 2, 0xff0000);
scene.add(helper);