Three.js WebGLRenderer Global Clipping Planes

This article provides a straightforward guide on how to enable and utilize global clipping planes using the WebGLRenderer in Three.js. You will learn how to define a mathematical clipping plane, apply it globally to affect all rendered objects in your scene, and dynamically adjust the plane to create real-time cross-section effects.

Understanding Global Clipping

In Three.js, clipping planes are used to cut away portions of 3D geometry, revealing their internal structures. Unlike local clipping planes—which are applied to specific materials—global clipping planes are applied directly to the WebGLRenderer and affect every object in the scene simultaneously.

Step-by-Step Implementation

Step 1: Create a Clipping Plane

First, define a clipping plane using the THREE.Plane class. This requires a normal vector (pointing in the direction of the visible side of the plane) and a constant distance value from the origin.

import * as THREE from 'three';

// Create a plane that cuts horizontally (facing downwards) at y = 1
const globalPlane = new THREE.Plane(new THREE.Vector3(0, -1, 0), 1);

Step 2: Assign the Plane to the Renderer

To apply this plane globally, assign it to the clippingPlanes property of your WebGLRenderer. This property expects an array, meaning you can apply multiple global clipping planes at once.

// Initialize the renderer
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Enable global clipping by passing the plane in an array
renderer.clippingPlanes = [ globalPlane ];

Once assigned, any geometry positioned on the opposite side of the plane’s normal vector will be clipped (hidden) during the render pass.

Step 3: Animating the Clipping Plane (Optional)

To create a dynamic scanning or transition effect, you can update the constant property of the plane inside your animation loop.

function animate() {
    requestAnimationFrame(animate);

    // Dynamically move the clipping plane up and down
    const time = Date.now() * 0.001;
    globalPlane.constant = Math.sin(time) * 2;

    renderer.render(scene, camera);
}

animate();

Key Difference: Global vs. Local Clipping