How We Create Black Hole in Dev with Three.js

Source: Dev.to

Modern web design increasingly relies on interactive 3D elements to engage users. One of the most visually striking effects is a procedural black hole—an animated object that simulates gravity, light bending, and particle motion in real time.

In this article we explain how our team developed a fully procedural black‑hole element for the web, using WebGPU, Three.js, and ray‑marching, and how it can be applied in interactive websites, WebAR experiences, and gaming projects.

Step‑by‑Step Creation Process

1. Defining the Core Components

• Accretion Disk – particles and dust forming a dynamic rotating disk.
• Core – fully absorbs light and acts as the central focal point.
• Gravitational Space Distortion – bends rays to simulate lensing and gravity.

Each component was developed individually and then combined into a single composition, optimized for real‑time rendering.

2. Base Geometry and Ray‑marching

The object is based on a simple cube; all rendering is handled via a fragment shader.

Ray‑marching workflow

• Cast rays from the camera to each pixel.
• Advance rays through the volume step by step.
• Compute pixel colors at every step.
• Apply procedural geometry and lighting.

This method gives precise control over particle distribution and light behavior.

3. Procedural Accretion Disk

The disk uses simplex noise for organic texture generation, simulating dust and particle movement.
To avoid common ray‑marching artifacts, we applied jitter, slightly offsetting rays at each step for smooth transitions.

4. Gravitational Light Distortion

During ray‑marching we mathematically bend rays to achieve:

• Disk distortion around the core.
• Realistic gravitational lensing.
• Space‑attraction effect.

Bloom and color grading add a glowing, high‑fidelity appearance.

5. Core Layer

The black core absorbs light fully and interacts seamlessly with the disk.
Rendering is split into layers: front disk → core → back disk, creating realistic depth.

6. Space Distortion Behind the Object

The environment behind the black hole is distorted using the bent rays, producing convincing gravitational lensing.

Technologies

• WebGPU → JavaScript → Three.js → GLSL
• Ray‑marching, jitter, bloom

The object is fully browser‑compatible and can be embedded in any Three.js scene.

Challenges

• Debugging ray‑marching – complex ray behavior required special visualization modes.
• Camera inside the object – needed seamless inner‑surface rendering to avoid visual glitches.

Capabilities

The black hole is fully procedural and configurable, with parameters such as:

• Disk density and particle structure
• Gravitational distortion intensity
• Color and bloom strength
• Core radius and rotation speed

Most notable feature: real‑time distortion of everything behind the object.

Where to Use

• Interactive / immersive web projects
• Games and WebAR / WebXR experiences
• Creative portfolios and landing pages
• Brand campaigns and digital installations

The solution is scalable and adaptable for a wide range of web and 3D projects.

Development Time

≈ 50 hours

Test it here:

Conclusion

This project demonstrates the potential of modern web graphics and WebGPU‑powered ray‑marching to create complex procedural effects. Our procedural black hole is a perfect example of interactive web animation, combining technical depth, performance, and visually striking design.

If you’re interested in immersive 3D elements in your projects, feel free to get in touch.

• More examples:
• Message: