experiments with three-dimensional graphics and access to the fourth dimension
Every time I come across something new in graphics development, I ask myself: “Is it possible to do something cooler?” Creating 3D scenes in the browser is a fascinating, but already familiar task. We are used to working with cubes, spheres and other objects in 3D space. But what if you go beyond it? What if we introduce the fourth dimension into the game? It was this thought that led me to create an interactive hypercube using Three.js.
Why hypercube?
You may be familiar with the idea hypercubeor tesseract – a four-dimensional analogue of a regular cube. Unlike a simple cube, a tesseract contains additional “depth” – a dimension that is difficult to visualize in the real world, but with the help of mathematics and graphics it can be shown in projection into three-dimensional space. It would seem that the task is clear, but how to approach it? In this article I want to tell you how to make an interactive visualization of a hypercube that rotates, changes color and even adapts to the user's actions.
Intrigue: how will we ever draw an object with four dimensions in three-dimensional space? The answer, as always, is simple and complex at the same time – projections. But first things first.
Beginning: the cube as an entry point
The first thing we'll start with is creating a simple cube. If you have already worked with Three.jsthen this will not be something new for you. We will create a scene, a camera, set up a render and add a cube that will dynamically rotate.
Here's the code that draws a standard cube:
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Создание куба с рёбрами
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.LineBasicMaterial({ color: 0x00ff00 });
const edges = new THREE.EdgesGeometry(geometry);
const line = new THREE.LineSegments(edges, material);
scene.add(line);
camera.position.z = 5;
Here we have created a regular three-dimensional cube with green edges and a camera that is located a short distance from the object. This is a basic level, but already interactive. I added the ability to change the color of the cube using the color input:
<input type="color" id="colorPicker" value="#00ff00" />But what about the fourth dimension?
This is where the fun begins. How can you even display an object in four-dimensional space on the screen?
Theory in action
Imagine how you project a three-dimensional cube onto a two-dimensional surface (for example, a piece of paper). We see its shadows and projections, and from these two-dimensional projections we can reconstruct a three-dimensional object. It’s the same with a tesseract – we can show its “shadow” by projecting it onto a three-dimensional space accessible to our perception.
To do this you need to use projection of 4D coordinates onto 3Dso that the edges and vertices of the hypercube can be displayed. First we need to describe the vertices of the hypercube:
const vertices = [
new THREE.Vector4(-1, -1, -1, -1),
new THREE.Vector4(1, -1, -1, -1),
new THREE.Vector4(1, 1, -1, -1),
new THREE.Vector4(-1, 1, -1, -1),
new THREE.Vector4(-1, -1, 1, -1),
new THREE.Vector4(1, -1, 1, -1),
new THREE.Vector4(1, 1, 1, -1),
new THREE.Vector4(-1, 1, 1, -1),
new THREE.Vector4(-1, -1, -1, 1),
new THREE.Vector4(1, -1, -1, 1),
new THREE.Vector4(1, 1, -1, 1),
new THREE.Vector4(-1, 1, -1, 1),
new THREE.Vector4(-1, -1, 1, 1),
new THREE.Vector4(1, -1, 1, 1),
new THREE.Vector4(1, 1, 1, 1),
new THREE.Vector4(-1, 1, 1, 1)
];
But for a tesseract it is not enough just to draw these vertices. We must connect them with edges:
const edges = [
[0, 1], [1, 2], [2, 3], [3, 0],
[4, 5], [5, 6], [6, 7], [7, 4],
[0, 4], [1, 5], [2, 6], [3, 7],
[8, 9], [9, 10], [10, 11], [11, 8],
[12, 13], [13, 14], [14, 15], [15, 12],
[8, 12], [9, 13], [10, 14], [11, 15],
[0, 8], [1, 9], [2, 10], [3, 11],
[4, 12], [5, 13], [6, 14], [7, 15]
];
Each edge connects two vertices – this is the basis for constructing the tesseract frame.
Problem: Rendering and Perception
One of the biggest problems with visualizing multidimensional objects is that our brains are unable to “see” the fourth dimension. But this is where rotations and animation come to the rescue. We can show a hypercube in different projections, rotating it along different axes, which creates the illusion of an additional dimension.
Function to create hypercube edges using BufferGeometry:
function createTesseractEdges() {
const edges = [];
for (const [start, end] of edgeIndices) {
edges.push(vertices[start], vertices[end]);
}
const geometry = new THREE.BufferGeometry().setFromPoints(edges);
return geometry;
}
When the user selects a tesseract instead of a regular cube, we simply change the geometry of the object:
shapeSelector.addEventListener('change', (event) => {
currentShape = event.target.value;
if (currentShape === "cube") {
line.geometry = new THREE.EdgesGeometry(new THREE.BoxGeometry(1, 1, 1));
} else if (currentShape === "tesseract") {
line.geometry = createTesseractEdges();
}
});
Controlling rotation and color
The cube or tesseract rotates automatically, but we can also control the rotation speed using the slider:
const rotationSpeedSlider = document.getElementById('rotationSpeed');
rotationSpeedSlider.addEventListener('input', (event) => {
rotationSpeed = parseFloat(event.target.value);
});
This makes the object more interactive: users can both change the rotation speed and stop the object with a mouse click.
What's next?
After working on the tesseract, I realized that boundaries, in fact, do not exist. Multidimensional objects can be visualizedif you can correctly “project” them onto our usual three dimensions. The next step will be to visualize the pentoract (a five-dimensional hypercube), and perhaps objects with even higher dimensions.
If you want to repeat this experiment or modify it to suit your needs, the code is available on my GitHuband, of course, I will be glad to see your questions and suggestions.
Bottom line
This little project is a great example of how, using simple tools like Three.js You can visualize complex mathematical objects and create interactive applications that go beyond the usual 3D space. Hypercubes and multidimensional figures cease to be abstractions and turn into visual and understandable structures that can be studied, rotated and customized. This not only expands the boundaries of our imagination, but also opens the way to a deeper understanding of mathematical and physical concepts that previously seemed out of reach.
