Interactive 3D Surface Plot

This post embeds a live 3D surface plot rendered with Three.js. The surface is the classic saddle function z = x² − y², color-mapped by altitude.

Controls

• Left-click + drag — rotate
• Scroll / pinch — zoom
• Right-click + drag — pan

How It Works

The surface is generated by sampling the function z = x² − y² over a uniform grid of points. Each vertex is colored according to its z-value using a gradient from blue (low) to red (high).

const z = x * x - y * y;
const color = heightToColor(z, minZ, maxZ);

The mesh uses BufferGeometry with interleaved position and color attributes, and a MeshPhongMaterial with vertexColors: true for the altitude shading.

Three.js OrbitControls handle the mouse/touch interaction. The renderer is hooked to a ResizeObserver so the canvas always fills its container.