学习threejs，超炫银河黑洞效果模拟

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

---

---

一、🍀前言

本文详细介绍如何基于threejs在三维场景中实现超炫银河黑洞效果模拟，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️THREE.EffectComposer 后期处理

THREE.EffectComposer 用于在three.js中实现后期处理效果。该类管理了产生最终视觉效果的后期处理过程链。 后期处理过程根据它们添加/插入的顺序来执行，最后一个过程会被自动渲染到屏幕上。

1.1.1 ☘️代码示例

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
// 初始化 composer
const composer = new EffectComposer(renderer);
// 创建 RenderPass 并添加到 composer
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);
// 添加其他后期处理通道（如模糊）
// composer.addPass(blurPass);
// 在动画循环中渲染
function animate() {composer.render();requestAnimationFrame(animate);
}

1.1.2 ☘️构造函数

EffectComposer( renderer : WebGLRenderer, renderTarget : WebGLRenderTarget )
renderer – 用于渲染场景的渲染器。
renderTarget – （可选）一个预先配置的渲染目标，内部由 EffectComposer 使用。

1.1.3 ☘️属性

.passes : Array
一个用于表示后期处理过程链（包含顺序）的数组。

渲染通道：
BloomPass   该通道会使得明亮区域参入较暗的区域。模拟相机照到过多亮光的情形
DotScreenPass   将一层黑点贴到代表原始图片的屏幕上
FilmPass    通过扫描线和失真模拟电视屏幕
MaskPass    在当前图片上贴一层掩膜，后续通道只会影响被贴的区域
RenderPass  该通道在指定的场景和相机的基础上渲染出一个新的场景
SavePass    执行该通道时，它会将当前渲染步骤的结果复制一份，方便后面使用。这个通道实际应用中作用不大；
ShaderPass  使用该通道你可以传入一个自定义的着色器，用来生成高级的、自定义的后期处理通道
TexturePass 该通道可以将效果组合器的当前状态保存为一个纹理，然后可以在其他EffectCoposer对象中将该纹理作为输入参数

.readBuffer : WebGLRenderTarget
内部读缓冲区的引用。过程一般从该缓冲区读取先前的渲染结果。

.renderer : WebGLRenderer
内部渲染器的引用。

.renderToScreen : Boolean
最终过程是否被渲染到屏幕（默认帧缓冲区）。

.writeBuffer : WebGLRenderTarget
内部写缓冲区的引用。过程常将它们的渲染结果写入该缓冲区。

1.1.4 ☘️方法

.addPass ( pass : Pass ) : undefined
pass – 将被添加到过程链的过程

将传入的过程添加到过程链。

.dispose () : undefined
释放此实例分配的 GPU 相关资源。每当您的应用程序不再使用此实例时调用此方法。

.insertPass ( pass : Pass, index : Integer ) : undefined
pass – 将被插入到过程链的过程。

index – 定义过程链中过程应插入的位置。

将传入的过程插入到过程链中所给定的索引处。

.isLastEnabledPass ( passIndex : Integer ) : Boolean
passIndex – 被用于检查的过程

如果给定索引的过程在过程链中是最后一个启用的过程，则返回true。 由EffectComposer所使用，来决定哪一个过程应当被渲染到屏幕上。

.removePass ( pass : Pass ) : undefined
pass – 要从传递链中删除的传递。

从传递链中删除给定的传递。

.render ( deltaTime : Float ) : undefined
deltaTime – 增量时间值。

执行所有启用的后期处理过程，来产生最终的帧，

.reset ( renderTarget : WebGLRenderTarget ) : undefined
renderTarget – （可选）一个预先配置的渲染目标，内部由 EffectComposer 使用。

重置所有EffectComposer的内部状态。

.setPixelRatio ( pixelRatio : Float ) : undefined
pixelRatio – 设备像素比

设置设备的像素比。该值通常被用于HiDPI设备，以阻止模糊的输出。 因此，该方法语义类似于WebGLRenderer.setPixelRatio()。

.setSize ( width : Integer, height : Integer ) : undefined
width – EffectComposer的宽度。
height – EffectComposer的高度。

考虑设备像素比，重新设置内部渲染缓冲和过程的大小为(width, height)。 因此，该方法语义类似于WebGLRenderer.setSize()。

.swapBuffers () : undefined
交换内部的读/写缓冲。

1.2 ☘️THREE.RenderPass

THREE.RenderPass用于将场景渲染到中间缓冲区，为后续的后期处理效果（如模糊、色调调整等）提供基础。

1.2.1 ☘️构造函数

RenderPass(scene, camera, overrideMaterial, clearColor, clearAlpha)

• scene THREE.Scene 要渲染的 Three.js 场景对象。
• camera THREE.Camera 场景对应的相机（如 PerspectiveCamera）。
• overrideMaterial THREE.Material (可选) 覆盖场景中所有物体的材质（默认 null）。
• clearColor THREE.Color (可选) 渲染前清除画布的颜色（默认不主动清除）。
• clearAlpha number (可选) 清除画布的透明度（默认 0）。

1.2.2 ☘️属性

.enabled：boolean
是否启用此通道（默认 true）。设为 false 可跳过渲染。

.clear：boolean
渲染前是否清除画布（默认 true）。若需叠加多个 RenderPass，可设为 false。

.needsSwap：boolean
是否需要在渲染后交换缓冲区（通常保持默认 false）。

1.2.3 ☘️方法

.setSize(width, height)
调整通道的渲染尺寸（通常由 EffectComposer 自动调用）。
width: 画布宽度（像素）。
height: 画布高度（像素）。

1.3 ☘️THREE.UnrealBloomPass

THREE.UnrealBloomPass是 是 Three.js 中用于实现 虚幻引擎风格泛光效果（Bloom） 的后期处理通道。它通过模拟光线散射和光晕效果，增强场景中高光区域的视觉表现。

1.3.1 ☘️构造函数

THREE.UnrealBloomPass(
new THREE.Vector2(width, height), // 渲染目标尺寸（通常与画布一致）
strength, // 泛光强度 (默认 1)
radius, // 泛光半径 (默认 0)
threshold // 泛光阈值 (默认 0)
)

new THREE.Vector2(width, height)
渲染目标的分辨率，通常与画布尺寸一致（如 new THREE.Vector2(window.innerWidth, window.innerHeight)）。
strength（强度）
控制泛光效果的强度（亮度）。值越大，泛光越明显。
范围：0（无效果）到 3（强烈）。
radius（半径）
控制泛光的扩散半径。值越大，光晕范围越广。
范围：0（无扩散）到 1（较大扩散）。
threshold（阈值）
仅对亮度高于此值的像素应用泛光。值越低，更多区域会被处理。
范围：0（所有像素）到 1（仅最亮像素）。

1.3.2 ☘️使用示例

// 初始化
const composer = new THREE.EffectComposer(renderer);
const renderPass = new THREE.RenderPass(scene, camera);
const bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight),1.2, 0.2, 0.8
);// 添加通道
composer.addPass(renderPass);
composer.addPass(bloomPass);// 渲染
function animate() {requestAnimationFrame(animate);composer.render();
}

1.3.3 ☘️方法

.setSize(width, height)
调整通道的渲染尺寸（通常由 EffectComposer 自动调用）。
width: 画布宽度（像素）。
height: 画布高度（像素）。

.render(renderer, writeBuffer, readBuffer, deltaTime, maskActive)
内部方法，通常由 EffectComposer 自动调用，无需手动执行。

二、🍀超炫银河黑洞效果模拟

1. ☘️实现思路

通过EffectComposer后期处理组合器，RenderPass、UnrealBloomPass（泛光）后期处理通道，以及自定义shader着色器实现银河黑洞效果。具体代码参考代码样例。可以直接运行。

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<style>body {margin: 0;overflow: hidden;background-color: #000003;color: #fff;font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;}canvas {display: block;width: 100%;height: 100%;}#info {position: absolute;top: 15px;width: 100%;text-align: center;color: rgba(255, 255, 255, 0.9);font-size: 18px;letter-spacing: 0.5px;pointer-events: none;z-index: 100;text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);transition: opacity 1.5s ease-in-out 1s;}.ui-panel {position: absolute;background-color: rgba(25, 30, 50, 0.5);backdrop-filter: blur(10px) saturate(180%);-webkit-backdrop-filter: blur(10px) saturate(180%);padding: 12px 15px;border-radius: 10px;border: 1px solid rgba(255, 255, 255, 0.1);color: rgba(220, 220, 255, 0.9);font-size: 14px;user-select: none;z-index: 50;opacity: 0.8;transition: opacity 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, bottom 0.3s ease;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);box-sizing: border-box;display: flex;flex-direction: column;gap: 8px;}.ui-panel:hover {opacity: 1;background-color: rgba(35, 40, 60, 0.6);box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);}#controls {bottom: 20px;right: 20px;align-items: flex-start;}.control-item {cursor: pointer;padding: 5px;display: flex;align-items: center;gap: 6px;width: 100%;transition: color 0.2s ease;}.control-item:hover {color: #fff;}#theme-changer {bottom: 20px;left: 20px;display: flex;flex-direction: column;gap: 8px;}#theme-changer h4 {margin: 0 0 5px 0;font-weight: 500;font-size: 13px;color: rgba(200, 200, 230, 0.8);text-align: center;border-bottom: 1px solid rgba(255, 255, 255, 0.1);padding-bottom: 5px;}#theme-buttons {display: flex;gap: 8px;flex-wrap: wrap;justify-content: center;}.theme-button {padding: 6px 12px;border: 1px solid rgba(255, 255, 255, 0.2);border-radius: 6px;background-color: rgba(255, 255, 255, 0.1);color: rgba(220, 220, 255, 0.85);cursor: pointer;font-size: 12px;transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;text-align: center;}.theme-button:hover {background-color: rgba(255, 255, 255, 0.2);border-color: rgba(255, 255, 255, 0.4);}.theme-button.active {background-color: rgba(120, 120, 255, 0.3);border-color: rgba(150, 150, 255, 0.6);color: #fff;font-weight: 500;transform: scale(1.02);}.theme-button:active {transform: scale(0.98);}.ui-icon {width: 1em;height: 1em;stroke: currentColor;stroke-width: 2;fill: none;stroke-linecap: round;stroke-linejoin: round;}@media (max-width: 640px) {.ui-panel {padding: 10px 12px;}#controls {bottom: 105px;right: 15px;max-width: calc(50% - 25px);min-width: 140px;}#theme-changer {bottom: 15px;left: 15px;max-width: calc(50% - 25px);min-width: 130px;}#theme-buttons {justify-content: flex-start;}.theme-button {padding: 5px 10px;font-size: 11px;}#info {font-size: 16px;}#info span {font-size: 12px;}}@media (max-width: 380px) {#controls {bottom: auto;top: 15px;right: 15px;left: auto;max-width: calc(100% - 30px);}#theme-changer {bottom: 15px;left: 15px;right: 15px;max-width: none;width: calc(100% - 30px);}#theme-buttons {justify-content: center;}}
</style>
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="info">Galactic Black Hole<br><span style="font-size: 14px; opacity: 0.8;">Click core or button for Disk Echo. Drag to rotate.</span>
</div><div id="controls" class="ui-panel"><div id="autoRotateToggle" class="control-item" title="Toggle automatic rotation"></div><div id="triggerEffectButton" class="control-item" title="Trigger Disk Echo"></div>
</div><div id="theme-changer" class="ui-panel"><h4>Color Theme</h4><div id="theme-buttons"><button class="theme-button active" data-theme="inferno">Inferno</button><button class="theme-button" data-theme="ruby">Ruby</button><button class="theme-button" data-theme="plasma">Plasma</button><button class="theme-button" data-theme="void">Void</button></div>
</div>
<script type="module">import * as THREE from "https://esm.sh/three";import {OrbitControls} from 'https://esm.sh/three/examples/jsm/controls/OrbitControls.js';import {EffectComposer} from 'https://esm.sh/three/examples/jsm/postprocessing/EffectComposer.js';import {RenderPass} from 'https://esm.sh/three/examples/jsm/postprocessing/RenderPass.js';import {UnrealBloomPass} from 'https://esm.sh/three/examples/jsm/postprocessing/UnrealBloomPass.js';const BLACK_HOLE_EVENT_HORIZON_RADIUS = 1.0;const DISK_INNER_RADIUS = BLACK_HOLE_EVENT_HORIZON_RADIUS + 0.15;const DISK_OUTER_RADIUS = 5.5;const LENSING_SPHERE_RADIUS = BLACK_HOLE_EVENT_HORIZON_RADIUS + 0.07;const GLOW_RADIUS_FACTOR = 1.07;const PHOTON_SPHERE_RADIUS = BLACK_HOLE_EVENT_HORIZON_RADIUS * 1.5;const scene = new THREE.Scene();scene.fog = new THREE.FogExp2(0x000004, 0.085);const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 2000);const renderer = new THREE.WebGLRenderer({antialias: true,powerPreference: "high-performance"});renderer.setSize(window.innerWidth, window.innerHeight);renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));renderer.outputColorSpace = THREE.SRGBColorSpace;renderer.toneMapping = THREE.ACESFilmicToneMapping;renderer.toneMappingExposure = 0.95;document.body.appendChild(renderer.domElement);const composer = new EffectComposer(renderer);const renderPass = new RenderPass(scene, camera);composer.addPass(renderPass);const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight),0.7,0.7,0.75);composer.addPass(bloomPass);const controls = new OrbitControls(camera, renderer.domElement);controls.enableDamping = true;controls.dampingFactor = 0.04;controls.rotateSpeed = 0.6;controls.autoRotate = false;controls.autoRotateSpeed = 0.12;controls.target.set(0, 0, 0);controls.minDistance = 2.5;controls.maxDistance = 100;controls.enablePan = false;let autoRotateEnabled = false;const autoRotateToggle = document.getElementById('autoRotateToggle');const rotateIconSVG = `<svg class="ui-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M23 4v6h-6"></path><path d="M1 20v-6h6"></path><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path></svg>`;function updateAutoRotateText() {autoRotateToggle.innerHTML = rotateIconSVG + `<span>Auto-Rotate: ${autoRotateEnabled ? "ON" : "OFF"}</span>`;}updateAutoRotateText();autoRotateToggle.addEventListener('click', () => {autoRotateEnabled = !autoRotateEnabled;controls.autoRotate = autoRotateEnabled;updateAutoRotateText();});const triggerEffectButton = document.getElementById('triggerEffectButton');const effectIconSVG = `<svg class="ui-icon" viewBox="0 0 24 24" style="stroke-width:1.5;" xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="2"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="8"/></svg>`;triggerEffectButton.innerHTML = effectIconSVG + `<span>Disk Echo</span>`;triggerEffectButton.addEventListener('click', () => {triggerDiskEcho();});const starGeometry = new THREE.BufferGeometry();const starCount = 45000;const starPositions = new Float32Array(starCount * 3);const starColors = new Float32Array(starCount * 3);const starSizes = new Float32Array(starCount);const starAlphas = new Float32Array(starCount);const starFieldRadius = 1200;const baseColor = new THREE.Color(0xffffff);const blueColor = new THREE.Color(0xaaddff);const yellowColor = new THREE.Color(0xffffaa);const redColor = new THREE.Color(0xffcccc);for (let i = 0; i < starCount; i++) {const i3 = i * 3;const goldenRatio = (1 + Math.sqrt(5)) / 2;const theta = 2 * Math.PI * i / goldenRatio;const phi = Math.acos(1 - 2 * (i + 0.5) / starCount);const radius = Math.cbrt(Math.random()) * starFieldRadius;starPositions[i3] = radius * Math.sin(phi) * Math.cos(theta);starPositions[i3 + 1] = radius * Math.sin(phi) * Math.sin(theta);starPositions[i3 + 2] = radius * Math.cos(phi);const starColor = baseColor.clone();const colorType = Math.random();let colorIntensity = Math.random() * 0.4 + 0.6;if (colorType < 0.5) {starColor.lerp(blueColor, Math.random() * 0.3);} else if (colorType < 0.85) {starColor.lerp(yellowColor, Math.random() * 0.2);colorIntensity *= 0.9;} else {starColor.lerp(redColor, Math.random() * 0.15);colorIntensity *= 0.8;}starColor.multiplyScalar(colorIntensity);starColors[i3] = starColor.r;starColors[i3 + 1] = starColor.g;starColors[i3 + 2] = starColor.b;const sizeVariation = Math.random();if (sizeVariation > 0.997) {starSizes[i] = THREE.MathUtils.randFloat(1.5, 2.2);} else if (sizeVariation > 0.98) {starSizes[i] = THREE.MathUtils.randFloat(0.8, 1.5);} else {starSizes[i] = THREE.MathUtils.randFloat(0.3, 0.8);}const distFactor = Math.min(1.0, radius / starFieldRadius);starSizes[i] *= (1.0 - distFactor * 0.3);starAlphas[i] = Math.random() * 0.5 + 0.5;}starGeometry.setAttribute('position', new THREE.BufferAttribute(starPositions, 3));starGeometry.setAttribute('color', new THREE.BufferAttribute(starColors, 3));starGeometry.setAttribute('size', new THREE.BufferAttribute(starSizes, 1));starGeometry.setAttribute('alpha', new THREE.BufferAttribute(starAlphas, 1));const starMaterial = new THREE.ShaderMaterial({uniforms: {uTime: {value: 0.0},uDiskEchoActive: {value: 0.0},uDiskEchoIntensity: {value: 0.0}},vertexShader: `attribute float size;attribute float alpha;varying vec3 vColor;varying float vAlpha;uniform float uDiskEchoActive;uniform float uDiskEchoIntensity;void main() {vColor = color;vAlpha = alpha;vec3 adjustedPosition = position;if (uDiskEchoActive > 0.0) {float distFromCenter = length(position);float pushFactor = uDiskEchoIntensity * 0.025 * smoothstep(50.0, 300.0, distFromCenter);adjustedPosition = position * (1.0 + pushFactor);}vec4 mvPosition = modelViewMatrix * vec4(adjustedPosition, 1.0);gl_PointSize = size * (350.0 / -mvPosition.z) * (1.0 + uDiskEchoIntensity * 0.35);gl_Position = projectionMatrix * mvPosition;}`,fragmentShader: `uniform float uTime;uniform float uDiskEchoIntensity;varying vec3 vColor;varying float vAlpha;void main() {float r = length(gl_PointCoord - vec2(0.5, 0.5));float baseAlpha = 1.0 - smoothstep(0.45, 0.5, r);if (baseAlpha < 0.01) discard;float twinkleSpeed = vAlpha * 1.5 + 0.5 + uDiskEchoIntensity * 4.0;float twinkleRange = 0.15 + uDiskEchoIntensity * 0.4;float twinkle = sin(uTime * twinkleSpeed + vAlpha * 10.0) * twinkleRange + 0.9;vec3 finalColor = vColor * twinkle * (1.0 + uDiskEchoIntensity * 0.9);gl_FragColor = vec4(finalColor, baseAlpha * vAlpha * (1.0 + uDiskEchoIntensity * 0.45));}`,blending: THREE.AdditiveBlending,depthWrite: false,transparent: true,vertexColors: true});const stars = new THREE.Points(starGeometry, starMaterial);scene.add(stars);const blackHoleGeometry = new THREE.SphereGeometry(BLACK_HOLE_EVENT_HORIZON_RADIUS, 64, 32);const blackHoleMaterial = new THREE.MeshBasicMaterial({color: 0x000000});const blackHole = new THREE.Mesh(blackHoleGeometry, blackHoleMaterial);blackHole.renderOrder = 0;scene.add(blackHole);const themes = {inferno: {diskHot: new THREE.Color(0xffffff),diskMid: new THREE.Color(0xffaa33),diskEdge: new THREE.Color(0xcc331a),diskDeep: new THREE.Color(0x661a00),lensing: new THREE.Color(0xffcc66),glow: new THREE.Color(0xff8833),photonSphere: new THREE.Color(0xffbb44),primaryWave: new THREE.Color(0xffaa33),secondaryWave: new THREE.Color(0xff5500),tertiaryWave: new THREE.Color(0xffdd22)},ruby: {diskHot: new THREE.Color(0xFFE4E1),diskMid: new THREE.Color(0xE0115F),diskEdge: new THREE.Color(0x8B0000),diskDeep: new THREE.Color(0x550000),lensing: new THREE.Color(0xFF6347),glow: new THREE.Color(0xFF4500),photonSphere: new THREE.Color(0xFF7F50),primaryWave: new THREE.Color(0xFF4500),secondaryWave: new THREE.Color(0xE0115F),tertiaryWave: new THREE.Color(0xFF6347)},plasma: {diskHot: new THREE.Color(0xffffff),diskMid: new THREE.Color(0x66ff66),diskEdge: new THREE.Color(0x00cc4d),diskDeep: new THREE.Color(0x006626),lensing: new THREE.Color(0x99ff99),glow: new THREE.Color(0x66ff99),photonSphere: new THREE.Color(0x88ffaa),primaryWave: new THREE.Color(0x66ff99),secondaryWave: new THREE.Color(0x22ffaa),tertiaryWave: new THREE.Color(0xaaffcc)},void: {diskHot: new THREE.Color(0xffffff),diskMid: new THREE.Color(0x87cefa),diskEdge: new THREE.Color(0x1e90ff),diskDeep: new THREE.Color(0x00008b),lensing: new THREE.Color(0xb0e0e6),glow: new THREE.Color(0xadd8e6),photonSphere: new THREE.Color(0x99ccff),primaryWave: new THREE.Color(0xadd8e6),secondaryWave: new THREE.Color(0x1e90ff),tertiaryWave: new THREE.Color(0xb0e0e6)}};let currentThemeName = 'inferno';let currentTheme = themes[currentThemeName];const diskGeometry = new THREE.RingGeometry(DISK_INNER_RADIUS, DISK_OUTER_RADIUS, 128, 64);const diskMaterial = new THREE.ShaderMaterial({uniforms: {uTime: {value: 0},uColorHot: {value: new THREE.Color().copy(currentTheme.diskHot)},uColorMid: {value: new THREE.Color().copy(currentTheme.diskMid)},uColorEdge: {value: new THREE.Color().copy(currentTheme.diskEdge)},uColorDeep: {value: new THREE.Color().copy(currentTheme.diskDeep)},uCameraPosition: {value: camera.position},uRippleActive: {value: 0.0},uRippleStartTime: {value: 0.0},uRippleDuration: {value: 2.8},uPrimaryWaveColor: {value: new THREE.Color(currentTheme.primaryWave)},uSecondaryWaveColor: {value: new THREE.Color(currentTheme.secondaryWave)},uTertiaryWaveColor: {value: new THREE.Color(currentTheme.tertiaryWave)},uRippleMaxRadius: {value: DISK_OUTER_RADIUS},uRippleThickness: {value: DISK_OUTER_RADIUS * 0.12},uRippleIntensity: {value: 0.0},uRippleDistortionStrength: {value: 0.0}},vertexShader: `varying vec2 vUv;varying vec3 vPosition;varying float vRadius;uniform float uRippleDistortionStrength;uniform float uTime;void main() {vUv = uv;vPosition = position;vRadius = length(position.xy);vec3 adjustedPosition = position;if (uRippleDistortionStrength > 0.0) {float angle = atan(position.y, position.x);float distortionAmount = sin(angle * 10.0 + uTime * 7.0 + vRadius * 2.0) * 0.08 * uRippleDistortionStrength;adjustedPosition.z += distortionAmount;}gl_Position = projectionMatrix * modelViewMatrix * vec4(adjustedPosition, 1.0);}`,fragmentShader: `uniform float uTime;uniform vec3 uColorHot;uniform vec3 uColorMid;uniform vec3 uColorEdge;uniform vec3 uColorDeep;uniform vec3 uCameraPosition;varying vec2 vUv;varying vec3 vPosition;varying float vRadius;uniform float uRippleActive;uniform float uRippleStartTime;uniform float uRippleDuration;uniform vec3 uPrimaryWaveColor;uniform vec3 uSecondaryWaveColor;uniform vec3 uTertiaryWaveColor;uniform float uRippleMaxRadius;uniform float uRippleThickness;uniform float uRippleIntensity;float rand(vec2 n){return fract(sin(dot(n,vec2(12.9898,4.1414)))*43758.5453);}float noise(vec2 p){vec2 ip=floor(p);vec2 u=fract(p);u=u*u*(3.0-2.0*u);float res=mix(mix(rand(ip),rand(ip+vec2(1.0,0.0)),u.x),mix(rand(ip+vec2(0.0,1.0)),rand(ip+vec2(1.0,1.0)),u.x),u.y);return res*res;}float fbm(vec2 p, float timeOffset, float freq, int octaves) {float total=0.0;float amplitude=0.65;float persistence=0.5;for(int i=0;i<octaves;i++){float timeScale=0.6+0.12*float(i);float noiseVal = noise(p*freq+vec2(timeOffset*timeScale*0.45,timeOffset*timeScale*0.3));total+=amplitude*noiseVal;vec2 warpOffset=vec2(noiseVal*0.18,-noiseVal*0.12);p+=warpOffset*amplitude*0.5;freq*=2.0;amplitude*=persistence;}return total;}float vortexPattern(float dist, float angle, float time){float spiralStrength=5.8;float timeScale=0.6;float angleOffset=dist*0.28;float spiral=sin(angle*2.3+angleOffset+dist*spiralStrength-time*timeScale);return smoothstep(-0.38,0.68,spiral)*0.32;}float calculateRippleIntensity(float dist, float rippleProgress, float currentRippleRadius, float thickness, float speedFactor) {if (rippleProgress <= 0.0 || rippleProgress >= 1.0) return 0.0;float distToRippleCenter = abs(dist - currentRippleRadius);float halfThickness = thickness * 0.5 * mix(1.0, 0.25, rippleProgress);float waveEnergyFactor = pow(1.0 - rippleProgress, 0.8 * speedFactor);float waveShape = smoothstep(halfThickness, halfThickness - (thickness * 0.25), distToRippleCenter);float angle = atan(vPosition.y, vPosition.x);float angleMod = sin(angle * 10.0 + rippleProgress * 15.0) * 0.15 + 0.9;return waveShape * waveEnergyFactor * angleMod;}void main(){float dist = vRadius;float innerEdge = ${DISK_INNER_RADIUS.toFixed(2)};float outerEdge = ${DISK_OUTER_RADIUS.toFixed(2)};float normalizedPos = clamp((dist - innerEdge) / (outerEdge - innerEdge), 0.0, 1.0);float angle = atan(vPosition.y, vPosition.x);float orbitalVelocity = 1.0 / sqrt(max(dist, 0.1));float dopplerFactor = 0.0; float beamingFactor = 1.0;if (length(uCameraPosition) > 0.01) {vec3 tangentialDirection = normalize(vec3(-vPosition.y, vPosition.x, 0.0));vec3 toCamera = normalize(uCameraPosition - vPosition);dopplerFactor = dot(toCamera, tangentialDirection) * orbitalVelocity * 0.3;beamingFactor = 1.0 + dopplerFactor * 0.4;beamingFactor = clamp(beamingFactor, 0.5, 2.0);}float rotationSpeedFactor = 4.8/(pow(dist,1.6)+1.1);float rotatedAngle = angle-uTime*rotationSpeedFactor*0.52;vec2 baseCoord = vec2(dist*1.9, rotatedAngle*3.6);float evolvingTime = uTime*0.17;float noiseValueFast = fbm(baseCoord, evolvingTime * 1.2, 2.2, 6);float noiseValueSlow = fbm(baseCoord * 0.6, evolvingTime * 0.5, 1.5, 4);float noiseValue = noiseValueFast * 0.7 + noiseValueSlow * 0.4;float vortexValue = vortexPattern(dist, angle, uTime);float finalPattern = noiseValue*0.8 + vortexValue*1.1;float temperature = orbitalVelocity * (1.0 + finalPattern * 0.3);temperature = clamp(temperature, 0.0, 2.0);vec3 colorInner = mix(uColorHot, uColorMid, smoothstep(0.0, 0.40, normalizedPos) * (1.0 - temperature * 0.3));vec3 colorOuterBlend = mix(uColorMid, uColorEdge, smoothstep(0.40, 0.80, normalizedPos));vec3 colorDeepBlend = mix(uColorEdge, uColorDeep, smoothstep(0.80, 1.0, normalizedPos));vec3 color = mix(colorInner, colorOuterBlend, smoothstep(0.40, 0.80, normalizedPos));color = mix(color, colorDeepBlend, smoothstep(0.80, 1.0, normalizedPos));float redshiftFactor = dopplerFactor * 0.15;vec3 redshift = vec3(1.0 + redshiftFactor, 1.0, 1.0 - redshiftFactor);color *= redshift;float patternBrightness = (finalPattern+0.5)*1.15;patternBrightness += pow(max(0.0,finalPattern-0.5),1.3)*0.6;float radialBrightness = pow(1.0-smoothstep(0.0,0.8,normalizedPos),1.9)*3.0+0.25;float finalBrightness = patternBrightness*radialBrightness*beamingFactor;float combinedRippleIntensity = 0.0;vec3 rippleColorContribution = vec3(0.0);if (uRippleActive > 0.5) {float rippleTime = uTime - uRippleStartTime;float rippleProgress = clamp(rippleTime / uRippleDuration, 0.0, 1.0);float primarySpeed = 1.0;float primaryRadius = mix(innerEdge, uRippleMaxRadius, rippleProgress * primarySpeed);float primaryIntensity = calculateRippleIntensity(dist, rippleProgress, primaryRadius, uRippleThickness, primarySpeed);float secondarySpeed = 0.75;float secondaryProgress = max(0.0, rippleProgress - 0.1) * secondarySpeed;float secondaryRadius = mix(innerEdge, uRippleMaxRadius * 0.85, secondaryProgress);float secondaryIntensity = calculateRippleIntensity(dist, secondaryProgress, secondaryRadius, uRippleThickness * 0.8, secondarySpeed) * 0.8;float tertiarySpeed = 0.5;float tertiaryProgress = max(0.0, rippleProgress - 0.2) * tertiarySpeed;float tertiaryRadius = mix(innerEdge, uRippleMaxRadius * 0.7, tertiaryProgress);float tertiaryIntensity = calculateRippleIntensity(dist, tertiaryProgress, tertiaryRadius, uRippleThickness * 0.6, tertiarySpeed) * 0.6;combinedRippleIntensity = primaryIntensity + secondaryIntensity + tertiaryIntensity;rippleColorContribution = uPrimaryWaveColor * primaryIntensity +uSecondaryWaveColor * secondaryIntensity +uTertiaryWaveColor * tertiaryIntensity;float sparkleNoiseVal = rand(vUv * vec2(300.0, 500.0) + uTime * vec2(20.0 + primaryIntensity * 10.0, 30.0 + primaryIntensity * 15.0) );float sparkleThreshold = 0.985 - primaryIntensity * 0.03;if (primaryIntensity > 0.02 && sparkleNoiseVal > sparkleThreshold) {float sparkleBrightness = pow((sparkleNoiseVal - sparkleThreshold) / (1.0 - sparkleThreshold), 2.0);rippleColorContribution += mix(uPrimaryWaveColor, vec3(1.0), 0.6) * primaryIntensity * sparkleBrightness * 10.0 * uRippleIntensity;}float afterglowPulse = sin(rippleProgress * 15.0) * 0.5 + 0.5;float afterglowIntensity = smoothstep(0.0, 0.3, rippleProgress) * (1.0 - rippleProgress) * 0.4 * afterglowPulse;combinedRippleIntensity += afterglowIntensity * smoothstep(innerEdge, innerEdge + 1.5, dist);}float rippleBoost = combinedRippleIntensity * 9.0 * uRippleIntensity;color *= (finalBrightness + rippleBoost);if (combinedRippleIntensity * uRippleIntensity > 0.01) {float shimmerEffect = sin(angle * 20.0 + uTime * 10.0 + dist * 5.0) * 0.15 + 0.9;vec3 currentRippleColors = rippleColorContribution * shimmerEffect;color = mix(color, currentRippleColors * 1.8, min(1.0, combinedRippleIntensity * uRippleIntensity * 1.5));}float hotBoost = smoothstep(3.0, 5.0, finalBrightness + rippleBoost) * smoothstep(0.0, 0.1, normalizedPos);color = mix(color, vec3(1.0, 1.0, 1.0), hotBoost * 0.45);float innerAlpha = smoothstep(0.0, 0.06, normalizedPos);float outerAlpha = 1.0 - smoothstep(0.85, 1.0, normalizedPos);float noiseAlphaFactor = clamp(finalPattern * 0.35 + 0.75, 0.65, 1.0);float alpha = innerAlpha * outerAlpha * noiseAlphaFactor;float rippleAlphaBoost = combinedRippleIntensity * 0.9 * uRippleIntensity;color = clamp(color, 0.0, 8.0);gl_FragColor = vec4(color, clamp(alpha + rippleAlphaBoost, 0.0, 1.0));}`,transparent: true,side: THREE.DoubleSide,depthWrite: false,blending: THREE.AdditiveBlending});const accretionDisk = new THREE.Mesh(diskGeometry, diskMaterial);accretionDisk.rotation.x = Math.PI / 2.6;accretionDisk.renderOrder = 1;scene.add(accretionDisk);const photonSphereGeometry = new THREE.SphereGeometry(PHOTON_SPHERE_RADIUS, 64, 32);const photonSphereMaterial = new THREE.ShaderMaterial({uniforms: {uTime: {value: 0},uColor: {value: new THREE.Color().copy(currentTheme.photonSphere)},uDiskEchoActive: {value: 0.0},uDiskEchoIntensity: {value: 0.0}},vertexShader: `varying vec3 vNormal;varying vec3 vViewPosition;void main() {vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);vViewPosition = -mvPosition.xyz;vNormal = normalize(normalMatrix * normal);gl_Position = projectionMatrix * mvPosition;}`,fragmentShader: `uniform float uTime;uniform vec3 uColor;uniform float uDiskEchoActive;uniform float uDiskEchoIntensity;varying vec3 vNormal;varying vec3 vViewPosition;void main() {vec3 viewDir = normalize(vViewPosition);float fresnel = pow(1.0 - abs(dot(viewDir, vNormal)), 3.0);float pulseRate = 2.0 + uDiskEchoIntensity * 8.0;float pulseDepth = 0.1 + uDiskEchoIntensity * 0.5;float pulse = sin(uTime * pulseRate) * pulseDepth + 0.9;float alpha = fresnel * (0.3 + uDiskEchoIntensity * 0.6) * pulse;vec3 finalColor = uColor;if (uDiskEchoActive > 0.5) {float colorPulse = sin(uTime * 4.0 + dot(vNormal, vec3(1.0)) * 5.0) * 0.5 + 0.5;finalColor = mix(finalColor, finalColor * vec3(1.4, 1.2, 0.8), colorPulse * uDiskEchoIntensity * 1.2);finalColor *= (1.0 + uDiskEchoIntensity * 0.7);}gl_FragColor = vec4(finalColor, alpha);}`,transparent: true,side: THREE.FrontSide,depthWrite: false,blending: THREE.AdditiveBlending});const photonSphere = new THREE.Mesh(photonSphereGeometry, photonSphereMaterial);photonSphere.renderOrder = 4;scene.add(photonSphere);const lensingGeometry = new THREE.SphereGeometry(LENSING_SPHERE_RADIUS, 64, 32);const lensingMaterial = new THREE.ShaderMaterial({uniforms: {uTime: {value: 0},uLensingColor: {value: new THREE.Color().copy(currentTheme.lensing)},uDiskEchoActive: {value: 0.0},uDiskEchoIntensity: {value: 0.0}},vertexShader: `varying vec3 vNormal;varying vec3 vViewPosition;void main() {vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);vViewPosition = -mvPosition.xyz;vNormal = normalize(normalMatrix * normal);gl_Position = projectionMatrix * mvPosition;}`,fragmentShader: `uniform float uTime;uniform vec3 uLensingColor;uniform float uDiskEchoActive;uniform float uDiskEchoIntensity;varying vec3 vNormal;varying vec3 vViewPosition;float fresnel(vec3 d,vec3 n,float p){return pow(1.0-abs(dot(normalize(d),n)),p);}float rand(vec2 n){return fract(sin(dot(n,vec2(12.9898,4.1414)))*43758.5453);}float noise(vec2 p){vec2 ip=floor(p);vec2 u=fract(p);u=u*u*(3.0-2.0*u);float res=mix(mix(rand(ip),rand(ip+vec2(1.0,0.0)),u.x),mix(rand(ip+vec2(0.0,1.0)),rand(ip+vec2(1.0,1.0)),u.x),u.y);return res*res;}void main(){vec3 viewDir=normalize(vViewPosition);float fresnelPower = 5.2 - uDiskEchoIntensity * 1.5;float fF=fresnel(viewDir,vNormal,fresnelPower);float pulseSpeed = 0.55 + uDiskEchoIntensity * 3.0;float pulseDepth = 0.12 + uDiskEchoIntensity * 0.4;float p=(sin(uTime*pulseSpeed+length(vViewPosition)*0.12)*pulseDepth+0.95);float noiseScale = 7.0 + uDiskEchoIntensity * 5.0;float noiseSpeed = 0.35 + uDiskEchoIntensity * 1.2;vec2 nC=vNormal.xy*noiseScale+uTime*noiseSpeed;float nV=noise(nC)*(0.12 + uDiskEchoIntensity * 0.15);vec3 dN=normalize(vNormal+vec3(nV,nV*0.6,0.0));float alphaBase = 0.68 + uDiskEchoIntensity * 0.5;float a=fF*alphaBase*p;float edgePower = 8.5 - uDiskEchoIntensity * 3.5;a+=pow(1.0-abs(dot(viewDir,dN)),edgePower)*(0.38 + uDiskEchoIntensity * 0.6);vec3 finalColor = uLensingColor;if (uDiskEchoActive > 0.5) {float colorShift = dot(viewDir, vNormal) * 0.5 + 0.5;finalColor = mix(finalColor, finalColor * vec3(1.3, 1.1, 0.9), colorShift * uDiskEchoIntensity);finalColor *= (1.0 + uDiskEchoIntensity * 0.4);}gl_FragColor=vec4(finalColor, clamp(a,0.0,1.0)*0.90);}`,transparent: true,side: THREE.FrontSide,depthWrite: false,blending: THREE.AdditiveBlending});const lensingEffectSphere = new THREE.Mesh(lensingGeometry, lensingMaterial);lensingEffectSphere.scale.multiplyScalar(1.62);lensingEffectSphere.renderOrder = 2;scene.add(lensingEffectSphere);const glowGeometry = new THREE.SphereGeometry(BLACK_HOLE_EVENT_HORIZON_RADIUS, 64, 32);const glowMaterial = new THREE.ShaderMaterial({uniforms: {uTime: {value: 0},uGlowColor: {value: new THREE.Color().copy(currentTheme.glow)},uDiskEchoActive: {value: 0.0},uDiskEchoIntensity: {value: 0.0},uDiskEchoColor: {value: new THREE.Color().copy(currentTheme.primaryWave)}},vertexShader: `varying vec3 vNormal;varying vec3 vViewPosition;void main() {vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);vViewPosition = -mvPosition.xyz;vNormal = normalize(normalMatrix * normal);gl_Position = projectionMatrix * mvPosition;}`,fragmentShader: `uniform float uTime;uniform vec3 uGlowColor;uniform float uDiskEchoActive;uniform float uDiskEchoIntensity;uniform vec3 uDiskEchoColor;varying vec3 vNormal;varying vec3 vViewPosition;float rand(vec2 n){return fract(sin(dot(n,vec2(12.9898,4.1414)))*43758.5453);}float noise(vec2 p){vec2 ip=floor(p);vec2 u=fract(p);u=u*u*(3.0-2.0*u);float res=mix(mix(rand(ip),rand(ip+vec2(1.0,0.0)),u.x),mix(rand(ip+vec2(0.0,1.0)),rand(ip+vec2(1.0,1.0)),u.x),u.y);return res*res;}void main(){float glowPower = 2.6 - uDiskEchoIntensity * 1.2;float i=pow(0.68-dot(vNormal,normalize(vViewPosition)), glowPower);float pulseSpeed = 0.7 + uDiskEchoIntensity * 7.0;float pulseDepth = 0.18 + uDiskEchoIntensity * 0.5;float p=sin(uTime*pulseSpeed+vNormal.y*1.8)*pulseDepth+0.88;float noiseScale = 9.0 + uDiskEchoIntensity * 8.0;float noiseSpeed = 1.8 + uDiskEchoIntensity * 6.0;float f=noise(vNormal.xz*noiseScale+uTime*noiseSpeed)*(0.35 + uDiskEchoIntensity * 0.25)+0.75;float fI=clamp(i*p*f,0.0,1.0)*(0.92 + uDiskEchoIntensity * 0.5);vec3 finalColor = uGlowColor;if (uDiskEchoActive > 0.5) {float flarePattern = noise(vNormal.xy * 15.0 + uTime * 3.0) * noise(vNormal.yz * 12.0 + uTime * 2.0);float flarePulse = sin(uTime * 8.0 + flarePattern * 10.0) * 0.5 + 0.5;vec3 flareColor = mix(uGlowColor, uDiskEchoColor, flarePulse);finalColor = mix(uGlowColor, flareColor * 1.8, uDiskEchoIntensity * flarePulse * 1.2);finalColor *= (1.0 + uDiskEchoIntensity * 0.8);}gl_FragColor=vec4(finalColor, fI);}`,transparent: true,side: THREE.BackSide,blending: THREE.AdditiveBlending,depthWrite: false});const glowEffect = new THREE.Mesh(glowGeometry, glowMaterial);glowEffect.scale.multiplyScalar(GLOW_RADIUS_FACTOR * 1.16);glowEffect.renderOrder = 3;scene.add(glowEffect);let lastRippleTime = -Infinity;const RIPPLE_COOLDOWN = 0.5;let diskEchoIntensity = 0.0;let diskEchoActive = false;let diskEchoStartTime = 0;const DISK_ECHO_DURATION = 2.8;function triggerDiskEcho() {const currentTime = clock.getElapsedTime();if (currentTime - lastRippleTime < RIPPLE_COOLDOWN) {return;}lastRippleTime = currentTime;diskEchoStartTime = currentTime;diskEchoActive = true;diskMaterial.uniforms.uRippleActive.value = 1.0;diskMaterial.uniforms.uRippleStartTime.value = currentTime;diskMaterial.uniforms.uPrimaryWaveColor.value.copy(themes[currentThemeName].primaryWave).multiplyScalar(3.0);diskMaterial.uniforms.uSecondaryWaveColor.value.copy(themes[currentThemeName].secondaryWave).multiplyScalar(2.7);diskMaterial.uniforms.uTertiaryWaveColor.value.copy(themes[currentThemeName].tertiaryWave).multiplyScalar(2.4);glowMaterial.uniforms.uDiskEchoColor.value.copy(themes[currentThemeName].primaryWave).multiplyScalar(1.8);bloomPass.strength = 1.3;bloomPass.threshold = 0.60;}const raycaster = new THREE.Raycaster();const pointer = new THREE.Vector2();function onPointerDown(event) {if (event.target.closest('.ui-panel')) return;if (event.isPrimary === false && event.pointerType !== 'touch') return;let x, y;if (event.touches && event.touches.length > 0) {x = event.touches[0].clientX;y = event.touches[0].clientY;} else {x = event.clientX;y = event.clientY;}pointer.x = (x / window.innerWidth) * 2 - 1;pointer.y = -(y / window.innerHeight) * 2 + 1;raycaster.setFromCamera(pointer, camera);const intersects = raycaster.intersectObject(blackHole, false);if (intersects.length > 0) triggerDiskEcho();}renderer.domElement.addEventListener('pointerdown', onPointerDown, false);const themeButtonsContainer = document.getElementById('theme-buttons');themeButtonsContainer.addEventListener('click', (event) => {const button = event.target.closest('.theme-button');if (button) {const themeName = button.dataset.theme;if (themes[themeName] && themeName !== currentThemeName) {currentThemeName = themeName;currentTheme = themes[currentThemeName];diskMaterial.uniforms.uColorHot.value.copy(currentTheme.diskHot);diskMaterial.uniforms.uColorMid.value.copy(currentTheme.diskMid);diskMaterial.uniforms.uColorEdge.value.copy(currentTheme.diskEdge);diskMaterial.uniforms.uColorDeep.value.copy(currentTheme.diskDeep);lensingMaterial.uniforms.uLensingColor.value.copy(currentTheme.lensing);glowMaterial.uniforms.uGlowColor.value.copy(currentTheme.glow);photonSphereMaterial.uniforms.uColor.value.copy(currentTheme.photonSphere);diskMaterial.uniforms.uPrimaryWaveColor.value.copy(currentTheme.primaryWave).multiplyScalar(3.0);diskMaterial.uniforms.uSecondaryWaveColor.value.copy(currentTheme.secondaryWave).multiplyScalar(2.7);diskMaterial.uniforms.uTertiaryWaveColor.value.copy(currentTheme.tertiaryWave).multiplyScalar(2.4);glowMaterial.uniforms.uDiskEchoColor.value.copy(currentTheme.primaryWave).multiplyScalar(1.8);themeButtonsContainer.querySelectorAll('.theme-button').forEach(btn => btn.classList.remove('active'));button.classList.add('active');}}});setTimeout(() => {const info = document.getElementById('info');if (info) info.style.opacity = '0';}, 7000);let resizeTimeout;window.addEventListener('resize', () => {clearTimeout(resizeTimeout);resizeTimeout = setTimeout(() => {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);composer.setSize(window.innerWidth, window.innerHeight);bloomPass.resolution.set(window.innerWidth, window.innerHeight);renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));}, 150);});const clock = new THREE.Clock();function animate() {requestAnimationFrame(animate);const elapsedTime = clock.getElapsedTime();const deltaTime = clock.getDelta();diskMaterial.uniforms.uTime.value = elapsedTime;lensingMaterial.uniforms.uTime.value = elapsedTime;glowMaterial.uniforms.uTime.value = elapsedTime;starMaterial.uniforms.uTime.value = elapsedTime;photonSphereMaterial.uniforms.uTime.value = elapsedTime;diskMaterial.uniforms.uCameraPosition.value.copy(camera.position);if (diskEchoActive) {const timeSinceEchoStart = elapsedTime - diskEchoStartTime;const normalizedTime = timeSinceEchoStart / DISK_ECHO_DURATION;let intensityVal;if (normalizedTime < 0.07) {intensityVal = normalizedTime / 0.07;} else {const t = (normalizedTime - 0.07) / (1.0 - 0.07);intensityVal = Math.pow(1.0 - t, 1.8);intensityVal += Math.sin(t * Math.PI) * 0.35 * Math.pow(1.0 - t, 0.5);}diskEchoIntensity = Math.max(0.0, Math.min(1.0, intensityVal));const pulseFactor = Math.sin(elapsedTime * 15.0) * 0.15 + 1.0;diskEchoIntensity *= pulseFactor;diskEchoIntensity = Math.min(1.2, diskEchoIntensity);let distortionStrengthFactor = 0.0;if (normalizedTime < 0.4) {distortionStrengthFactor = Math.sin((normalizedTime / 0.4) * Math.PI);}diskMaterial.uniforms.uRippleDistortionStrength.value = distortionStrengthFactor * diskEchoIntensity * 2.0;if (timeSinceEchoStart >= DISK_ECHO_DURATION) {diskEchoActive = false;diskEchoIntensity = 0.0;diskMaterial.uniforms.uRippleActive.value = 0.0;diskMaterial.uniforms.uRippleDistortionStrength.value = 0.0;bloomPass.strength = 0.7;bloomPass.threshold = 0.75;}diskMaterial.uniforms.uRippleIntensity.value = diskEchoIntensity;starMaterial.uniforms.uDiskEchoActive.value = diskEchoActive ? 1.0 : 0.0;starMaterial.uniforms.uDiskEchoIntensity.value = diskEchoIntensity;photonSphereMaterial.uniforms.uDiskEchoActive.value = diskEchoActive ? 1.0 : 0.0;photonSphereMaterial.uniforms.uDiskEchoIntensity.value = diskEchoIntensity;lensingMaterial.uniforms.uDiskEchoActive.value = diskEchoActive ? 1.0 : 0.0;lensingMaterial.uniforms.uDiskEchoIntensity.value = diskEchoIntensity;glowMaterial.uniforms.uDiskEchoActive.value = diskEchoActive ? 1.0 : 0.0;glowMaterial.uniforms.uDiskEchoIntensity.value = diskEchoIntensity;}controls.update();stars.rotation.y += deltaTime * 0.004;stars.rotation.x += deltaTime * 0.0015;composer.render(deltaTime);}function initialCameraAnimation() {const startPosition = new THREE.Vector3(0, 15, 18);const endPosition = new THREE.Vector3(0, 5, 8);const duration = 4500;const startTime = Date.now();camera.position.copy(startPosition);controls.enabled = false;function updateCamera() {const elapsed = Date.now() - startTime;if (elapsed < duration) {const progress = elapsed / duration;const t = 1 - Math.pow(1 - progress, 5);camera.position.lerpVectors(startPosition, endPosition, t);controls.target.set(0, 0, 0);requestAnimationFrame(updateCamera);} else {camera.position.copy(endPosition);controls.target.set(0, 0, 0);controls.enabled = true;}}updateCamera();}window.onload = () => {initialCameraAnimation();animate();}
</script>
</body>
</html>

效果如下

参考：Three.js 银河黑洞模拟