What is a 3D cube simulation?

A 3D cube simulation is an interactive graphics demo that renders and manipulates a three-dimensional cube in a web browser using WebGL and libraries like Three.js. It demonstrates fundamental 3D graphics concepts including geometry, materials, lighting, and camera perspectives.

How does 3D rotation work in a browser?

3D rotation in a browser is achieved through WebGL, which communicates with the GPU to render graphics. Libraries like Three.js simplify the process by providing scene graphs, cameras, and controls. Rotation is specified in radians, where a full rotation equals 2p (approximately 6.28 radians or 360�).

What are Euler angles?

Euler angles describe the orientation of an object in 3D space using three rotation values around the X, Y, and Z axes. While intuitive, they can suffer from gimbal lock � a loss of one degree of freedom when two rotation axes align. Quaternions are often used as an alternative to avoid this issue.

What is a rotation matrix?

A rotation matrix is a mathematical matrix used to perform rotations in 3D space. In Three.js, each object has a transformation matrix that combines its position, rotation, and scale. The right-hand coordinate system is used, with X pointing right, Y pointing up, and Z pointing towards the viewer.

Home▸Rendering & Computer Graphics▸3D Rotating Cube

🧪 3D Rotating Cube

Interactive 3D cube rendered with WebGL. Explore rotation matrices, quaternions, and perspective projection in your browser. A visual introduction to linear algebra and computer graphics fundamentals.

Rendering & Computer Graphics3DModerate60 FPS

3D Graphics: The Mathematics Behind the Cube

🏴 WebGL and the Rendering Pipeline

This simulator uses Three.js, a high-level wrapper around WebGL � the browser API that communicates directly with the GPU. Every frame passes through a pipeline: vertex shader (transforms each point in 3D), rasterisation (converts triangles to pixels), and fragment shader (applies lighting and colour to each pixel). A cube has 8 vertices and 12 triangles (2 per face � 6 faces).

📈 Rotation Matrices

3D rotation is performed by multiplying a vertex column vector by a 3×3 rotation matrix. Rotation around the Y-axis by angle θ maps (x, y, z) to (x cosθ + z sinθ, y, −x sinθ + z cosθ). Combining rotations requires multiplying matrices: R_total = R_Z R_Y R_X. Matrix multiplication is not commutative � order matters and produces different orientations.

📷 Perspective Projection

In a perspective camera, objects farther from the camera appear smaller. A vertex at position (x, y, z) is projected to screen coordinates roughly as (x/z, y/z) � dividing by the z-distance creates the perspective effect. The view frustum is a truncated pyramid: everything outside it is clipped. The frustum is defined by field-of-view (FOV), aspect ratio, near plane, and far plane.

🛠️ Quaternions and Gimbal Lock

Euler angles (three angle values for X, Y, Z axes) are intuitive but suffer from gimbal lock � when two axes align, you lose a degree of rotational freedom. Three.js internally uses quaternions (a 4-component number q = w + xi + yj + zk) which represent orientations without singularities. Quaternion slerp (spherical linear interpolation) gives smooth rotational animation.

Key Transformations & Formulas

Transform	Matrix / Formula	Effect
Rotation X	R_X(θ): [1,0,0 / 0,cosθ,−sinθ / 0,sinθ,cosθ]	Rotates around the X-axis (pitch)
Rotation Y	R_Y(θ): [cosθ,0,sinθ / 0,1,0 / −sinθ,0,cosθ]	Rotates around the Y-axis (yaw)
Rotation Z	R_Z(θ): [cosθ,−sinθ,0 / sinθ,cosθ,0 / 0,0,1]	Rotates around the Z-axis (roll)
Perspective divide	x' = f·x/z, y' = f·y/z	Smaller = further
Quaternion rotation	q = (cos½θ, sin½θ·&hatn)	Axis-angle, no gimbal lock
Quaternion composition	p·q (Hamilton product)	Combines two rotations
Normal vector	n⃗ = (v_B−v_A) × (v_C−v_A)	Perpendicular to triangle face
Dot product (lighting)	I = n⃗ · L⃗	Lambertian diffuse shading

Curriculum Links

Level	Subject	Topic Covered
GCSE Maths	Geometry	2D/3D coordinates; reflections; rotations on a grid
A-Level Maths	Core Pure / Further	Vectors; transformations; dot and cross product; matrices
A-Level CS	Computer Graphics	Rasterisation; GPU pipeline; coordinate systems
IB HL Maths	Vectors (Topic 3)	3D bearings; matrix transformations; determinants
AP CSP / CS	Data and Algorithms	Abstraction in rendering; coordinate geometry
University Year 1	Linear Algebra / CG	Homogeneous coordinates; view / projection matrices; quaternion algebra

Experiments to Try

Wireframe Analysis

Enable Wireframe and count the triangles on each geometry. A cube has 12, a sphere (32×32 segments) has ~2048. Notice how more triangles create a smoother silhouette.

Rotation vs. Spin Axis

Enable auto-rotation and drag to reorient the camera. Observe how the object still spins around its own Y-axis even as you change viewpoint � this is the difference between object space and world space.

Compare Geometries

Switch between dodecahedron (12 pentagonal faces) and icosahedron (20 triangular faces). Both have the same number of polygon faces as Platonic solids but completely different visual appearances.

Colour and Lighting

Change the colour and observe how the Phong lighting model shades each face. Darker edges indicate faces pointing away from the light source � this is the dot product of surface normal and light direction.

🔒 Unlock Premium Features

Unlock HD screenshot export, custom GLSL shader editor, animation recording, scene JSON export, and all 32 simulations with MySimulator Premium.

⚙ Under the hood

This simulation showcases 3D transformations using WebGL matrices, allowing users to manipulate a rotating cube in three dimensions. It provides an interactive learning experience for computer graphics concepts.

Rotating CubeWebGL Transformations

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install