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

---

---

一、🍀前言

本文详细介绍如何基于threejs在三维场景中使用EffectComposer后期处理组合器（采用RenderPass、UnrealBloomPass、FilmPass渲染通道），实现交互式 3D blob，亲测可用。希望能帮助到您。一起学习，加油！加油！

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

UnrealBloomPass 是 Three.js 中实现高质量泛光效果的后期处理通道，通过模拟类似 Unreal Engine 的泛光效果，为场景中的明亮区域添加柔和的光晕，提升视觉表现力。

1.3.1 ☘️构造函数

new UnrealBloomPass(resolution, strength, radius, threshold)

• resolution (Vector2): 泛光效果应用的场景分辨率，需与画布尺寸一致。
  示例：new THREE.Vector2(window.innerWidth, window.innerHeight)
• strength (Number): 泛光强度，默认值 1.0。值越大，光晕越明显。
• radius (Number): 模糊半径，默认值 0.4。值越大，光晕扩散范围越广。
• threshold (Number): 泛光阈值，默认值 0.85。仅对亮度高于此值的区域生效。

1.3.2 ☘️方法

• renderToScreen: 是否直接渲染到屏幕，默认为 false（需通过 EffectComposer 管理）。
• clearColor: 设置背景清除颜色，默认为透明。

1.4 ☘️THREE.FilmPass

THREE.FilmPass是 Three.js 后期处理模块中的一个特效通道，用于模拟电影胶片效果（如扫描线、颗粒噪声和画面抖动）。适用于复古风格或科幻场景的视觉增强。

1.4.1 ☘️构造函数

FilmPass(
noiseIntensity, // 噪声强度
scanlinesIntensity,// 扫描线强度
scanlinesCount, // 扫描线数量
grayscale // 是否转为灰度
)

1.4.2 ☘️属性

.enabled：boolean
是否启用此通道（默认 true）。设为 false 可临时禁用效果。

.uniforms：object
着色器 uniforms 对象，可直接修改参数（动态调整效果）：

filmPass.uniforms.nIntensity.value = 0.8; // 调整噪声强度
filmPass.uniforms.sIntensity.value = 0.5; // 调整扫描线强度
filmPass.uniforms.sCount.value = 1024;    // 调整扫描线密度
filmPass.uniforms.grayscale.value = 1;    // 启用灰度（1 是，0 否）

1.4.3 ☘️方法

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

二、🍀使用EffectComposer后期处理组合器（采用RenderPass、UnrealBloomPass、FilmPass渲染通道），实现交互式 3D blob

1. ☘️实现思路

本例子使用EffectComposer后期处理组合器（采用RenderPass、UnrealBloomPass、FilmPass渲染通道）、THREE.Points点对象等，实现交互式 3D blob。具体代码参考下面代码样例。

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head><script src="https://cdn.tailwindcss.com"></script><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>交互式 3D blob</title><style>body {margin: 0;overflow: hidden;font-family: 'Inter', sans-serif;}canvas {display: block;width: 100vw;height: 100vh;}::-webkit-scrollbar {width: 8px;}::-webkit-scrollbar-track {background: rgba(255, 255, 255, 0.1);border-radius: 10px;}::-webkit-scrollbar-thumb {background: rgba(255, 255, 255, 0.3);border-radius: 10px;}::-webkit-scrollbar-thumb:hover {background: rgba(255, 255, 255, 0.5);}select {background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23DDDDDD%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");background-repeat: no-repeat;background-position: right 0.75rem top 50%;background-size: 0.65em auto;-webkit-appearance: none;-moz-appearance: none;appearance: none;}</style>
</head>
<body>
<div id="ui-container" class="fixed top-5 right-5 z-50 bg-gray-900/70 backdrop-blur-md p-6 rounded-xl shadow-2xl border border-gray-700/50 transition-all duration-300 ease-in-out w-72"><h3 class="text-lg font-semibold text-gray-100 mb-5 tracking-wide uppercase">Dithering Controls</h3><div class="mb-5"><label for="dither-pattern" class="block text-sm font-medium text-gray-300 mb-2">Dither Pattern</label><select id="dither-pattern" class="w-full bg-gray-800/80 border border-gray-700 text-gray-200 text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block p-2.5 placeholder-gray-400 shadow-sm appearance-none"><option value="0">Bayer Matrix (8x8)</option><option value="1">Halftone Dots</option><option value="2">Line Pattern</option><option value="3">Noise Dithering</option><option value="4">No Dithering</option></select></div><div class="mb-3"><label for="dither-scale" class="block text-sm font-medium text-gray-300 mb-2">Dither Scale</label><select id="dither-scale" class="w-full bg-gray-800/80 border border-gray-700 text-gray-200 text-sm rounded-lg focus:ring-indigo-500 focus:border-indigo-500 block p-2.5 placeholder-gray-400 shadow-sm appearance-none"><option value="1.0">Fine</option><option value="1.5" selected>Medium</option><option value="2.5">Coarse</option><option value="3.5">Very Coarse</option></select></div>
</div>
</body>
<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";import { FilmPass } from "https://esm.sh/three/examples/jsm/postprocessing/FilmPass.js";const DITHER_MOTION_SPEED = 2.0;const DITHER_MOTION_AMPLITUDE = 1.5;const BLOB_BASE_RADIUS = 2.0;const BLOB_NOISE_FREQUENCY_VERTEX = 0.75;const BLOB_NOISE_AMPLITUDE_VERTEX = 0.65;const BLOB_NOISE_SPEED_VERTEX = 0.08;const PARTICLE_COUNT = 1200;const STAR_COUNT = 3000;const scene = new THREE.Scene();scene.background = new THREE.Color(0x000000);scene.fog = new THREE.FogExp2(0x000000, 0.025);const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.set(0, 0, 5.0);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;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.45, 0.55, 0.75);composer.addPass(bloomPass);const filmPass = new FilmPass(0.20, 0.15, 648, false);composer.addPass(filmPass);const controls = new OrbitControls(camera, renderer.domElement);controls.enableDamping = true;controls.dampingFactor = 0.04;controls.rotateSpeed = 0.20;controls.minDistance = 2.0;controls.maxDistance = 12;controls.enablePan = false;controls.autoRotate = false;const ambientLight = new THREE.AmbientLight(0x606070, 0.6);scene.add(ambientLight);const pointLight1 = new THREE.PointLight(0xffddaa, 0.9, 60);pointLight1.position.set(5, 5, 5);scene.add(pointLight1);const pointLight2 = new THREE.PointLight(0xaaccff, 0.6, 60);pointLight2.position.set(-5, -3, -4);scene.add(pointLight2);const pointLight3 = new THREE.PointLight(0xff8844, 0.75, 60);pointLight3.position.set(0, -5, 3);scene.add(pointLight3);const starGeometry = new THREE.BufferGeometry();const starPositions = [];const starColors = [];const starSizes = [];for (let i = 0; i < STAR_COUNT; i++) {const x = THREE.MathUtils.randFloatSpread(200);const y = THREE.MathUtils.randFloatSpread(200);const z = THREE.MathUtils.randFloatSpread(200);starPositions.push(x, y, z);const color = new THREE.Color();color.setHSL(THREE.MathUtils.randFloat(0.5, 0.7), 0.2, THREE.MathUtils.randFloat(0.3, 0.6));starColors.push(color.r, color.g, color.b);starSizes.push(THREE.MathUtils.randFloat(0.5, 1.5));}starGeometry.setAttribute('position', new THREE.Float32BufferAttribute(starPositions, 3));starGeometry.setAttribute('color', new THREE.Float32BufferAttribute(starColors, 3));starGeometry.setAttribute('size', new THREE.Float32BufferAttribute(starSizes, 1));const starMaterial = new THREE.ShaderMaterial({uniforms: {uTime: { value: 0.0 },},vertexShader: `uniform float uTime;attribute float size;varying vec3 vColor;varying float vAlpha;void main() {vColor = color;vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);gl_PointSize = size * (100.0 / -mvPosition.z) * (sin(position.x * 0.1 + uTime * 0.3) * 0.2 + 0.8);vAlpha = clamp(1.0 - (-mvPosition.z / 150.0), 0.1, 0.8);gl_Position = projectionMatrix * mvPosition;}`,fragmentShader: `uniform float uTime;varying vec3 vColor;varying float vAlpha;void main() {float dist = length(gl_PointCoord - vec2(0.5));if (dist > 0.5) discard;gl_FragColor = vec4(vColor, vAlpha * (0.6 + 0.4 * sin(uTime * 2.0 + gl_FragCoord.x * 0.5)));}`,transparent: true,blending: THREE.AdditiveBlending,depthWrite: false,vertexColors: true});const stars = new THREE.Points(starGeometry, starMaterial);scene.add(stars);const ditherPatternsFunction = `const float bayerMatrix[64] = float[64](0.0/64.0, 32.0/64.0,  8.0/64.0, 40.0/64.0,  2.0/64.0, 34.0/64.0, 10.0/64.0, 42.0/64.0,48.0/64.0, 16.0/64.0, 56.0/64.0, 24.0/64.0, 50.0/64.0, 18.0/64.0, 58.0/64.0, 26.0/64.0,12.0/64.0, 44.0/64.0,  4.0/64.0, 36.0/64.0, 14.0/64.0, 46.0/64.0,  6.0/64.0, 38.0/64.0,60.0/64.0, 28.0/64.0, 52.0/64.0, 20.0/64.0, 62.0/64.0, 30.0/64.0, 54.0/64.0, 22.0/64.0,3.0/64.0, 35.0/64.0, 11.0/64.0, 43.0/64.0,  1.0/64.0, 33.0/64.0,  9.0/64.0, 41.0/64.0,51.0/64.0, 19.0/64.0, 59.0/64.0, 27.0/64.0, 49.0/64.0, 17.0/64.0, 57.0/64.0, 25.0/64.0,15.0/64.0, 47.0/64.0,  7.0/64.0, 39.0/64.0, 13.0/64.0, 45.0/64.0,  5.0/64.0, 37.0/64.0,63.0/64.0, 31.0/64.0, 55.0/64.0, 23.0/64.0, 61.0/64.0, 29.0/64.0, 53.0/64.0, 21.0/64.0);float getBayerValue(vec2 coord) {int x = int(mod(coord.x, 8.0));int y = int(mod(coord.y, 8.0));return bayerMatrix[y * 8 + x];}float getHalftoneValue(vec2 coord, float time) {vec2 c = vec2(0.5);coord = mod(coord * 0.1 + vec2(sin(time*0.1)*0.02, cos(time*0.1)*0.02), 1.0);float d = distance(coord, c);return smoothstep(0.28, 0.29, d);}float getLinePatternValue(vec2 coord, float time) {float lw = 0.35 + sin(time*0.15)*0.1;float p1 = mod(coord.x*0.15+sin(coord.y*0.04+time*0.08)*0.6,1.0);float p2 = mod(coord.y*0.15+cos(coord.x*0.04+time*0.12)*0.6,1.0);return max(smoothstep(0.0,lw,p1)*smoothstep(1.0,1.0-lw,p1), smoothstep(0.0,lw,p2)*smoothstep(1.0,1.0-lw,p2));}float getNoiseDitheringValue(vec2 coord, float time) {return fract(sin(dot(coord + time * 0.05, vec2(12.9898, 78.233))) * 43758.5453);}vec3 ditherMonochrome(vec3 color, vec2 baseScreenPos, float colorLevels, float time,float motionSpeed, float motionAmplitude, int patternType) {float luminance = dot(color, vec3(0.299, 0.587, 0.114));luminance = pow(luminance, 1.2);luminance = (luminance - 0.5) * 6.0 + 0.5;luminance = clamp(luminance, 0.0, 1.0);vec2 ditherScreenPos = baseScreenPos;ditherScreenPos.x += sin(time * motionSpeed * 0.75 + baseScreenPos.y * 0.08) * motionAmplitude;ditherScreenPos.y += cos(time * motionSpeed * 0.55 + baseScreenPos.x * 0.08) * motionAmplitude;float threshold = 0.5;if (patternType == 0) {threshold = getBayerValue(ditherScreenPos);} else if (patternType == 1) {threshold = getHalftoneValue(ditherScreenPos, time);} else if (patternType == 2) {threshold = getLinePatternValue(ditherScreenPos, time);} else if (patternType == 3) {threshold = getNoiseDitheringValue(ditherScreenPos, time);} else if (patternType == 4) {threshold = 0.5;}float ditheredValue = (luminance < threshold) ? 0.0 : 1.0;return vec3(ditheredValue);}
`;const glslRandFunction = `float rand(vec3 co){ return fract(sin(dot(co, vec3(12.9898,78.233,53.543))) * 43758.5453); }float snoise(vec3 p) {vec3 ip = floor(p); vec3 fp = fract(p); fp = fp*fp*(3.0-2.0*fp);float v000=rand(ip+vec3(0,0,0)); float v100=rand(ip+vec3(1,0,0)); float v010=rand(ip+vec3(0,1,0)); float v110=rand(ip+vec3(1,1,0));float v001=rand(ip+vec3(0,0,1)); float v101=rand(ip+vec3(1,0,1)); float v011=rand(ip+vec3(0,1,1)); float v111=rand(ip+vec3(1,1,1));return mix(mix(mix(v000,v100,fp.x),mix(v010,v110,fp.x),fp.y), mix(mix(v001,v101,fp.x),mix(v011,v111,fp.x),fp.y),fp.z);}
`;const blobMaterial = new THREE.ShaderMaterial({uniforms: {uTime: { value: 0 },ditherScale: { value: 1.5 },colorLevels: { value: 2.0 },uDitherMotionSpeed: { value: DITHER_MOTION_SPEED },uDitherMotionAmplitude: { value: DITHER_MOTION_AMPLITUDE },uBaseColor: { value: new THREE.Color(0xffffff) },uFresnelPower: { value: 2.5 },uVertexNoiseFrequency: { value: BLOB_NOISE_FREQUENCY_VERTEX },uVertexNoiseAmplitude: { value: BLOB_NOISE_AMPLITUDE_VERTEX },uVertexNoiseSpeed: { value: BLOB_NOISE_SPEED_VERTEX },uSurfaceNoiseFrequency: { value: 2.8 },uSurfaceNoiseAmplitude: { value: 0.22 },uDitherPattern: { value: 0 },uCoreBrightness: { value: 0.2 }},vertexShader: `uniform float uTime;uniform float uVertexNoiseFrequency;uniform float uVertexNoiseAmplitude;uniform float uVertexNoiseSpeed;varying vec3 vNormal;varying vec3 vViewPosition;varying vec3 vWorldPosition;${glslRandFunction}void main() {vec3 pos = position;float displacement = snoise(pos * uVertexNoiseFrequency + uTime * uVertexNoiseSpeed) * uVertexNoiseAmplitude;displacement += snoise(pos * uVertexNoiseFrequency * 2.2 + uTime * uVertexNoiseSpeed * 1.4) * (uVertexNoiseAmplitude * 0.45);pos += normal * displacement;vec3 offset = vec3(0.01, 0.01, 0.01);float ddx_noise_orig = snoise((position + offset.xyy) * uVertexNoiseFrequency + uTime * uVertexNoiseSpeed) * uVertexNoiseAmplitude;ddx_noise_orig += snoise((position + offset.xyy) * uVertexNoiseFrequency * 2.2 + uTime * uVertexNoiseSpeed * 1.4) * (uVertexNoiseAmplitude * 0.45);vec3 p_ddx = (position + offset.xyy) + normal * ddx_noise_orig;float ddy_noise_orig = snoise((position + offset.yxy) * uVertexNoiseFrequency + uTime * uVertexNoiseSpeed) * uVertexNoiseAmplitude;ddy_noise_orig += snoise((position + offset.yxy) * uVertexNoiseFrequency * 2.2 + uTime * uVertexNoiseSpeed * 1.4) * (uVertexNoiseAmplitude * 0.45);vec3 p_ddy = (position + offset.yxy) + normal * ddy_noise_orig;vec3 tangent = normalize(p_ddx - pos);vec3 bitangent = normalize(p_ddy - pos);vec3 displacedNormal = normalize(cross(tangent, bitangent));if (length(displacedNormal) < 0.1) { displacedNormal = normal; }vNormal = normalize(normalMatrix * displacedNormal);vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0);vViewPosition = -mvPosition.xyz;vWorldPosition = (modelMatrix * vec4(pos, 1.0)).xyz;gl_Position = projectionMatrix * mvPosition;}`,fragmentShader: `uniform float uTime;uniform float ditherScale;uniform float colorLevels;uniform float uDitherMotionSpeed;uniform float uDitherMotionAmplitude;uniform vec3 uBaseColor;uniform float uFresnelPower;uniform float uSurfaceNoiseFrequency;uniform float uSurfaceNoiseAmplitude;uniform int uDitherPattern;uniform float uCoreBrightness;varying vec3 vNormal;varying vec3 vViewPosition;varying vec3 vWorldPosition;${ditherPatternsFunction}${glslRandFunction}void main() {vec3 normal = normalize(vNormal);vec3 viewDir = normalize(vViewPosition);float fresnel = pow(1.0 - abs(dot(viewDir, normal)), uFresnelPower);fresnel = smoothstep(0.0, 1.0, fresnel) * 0.6 + 0.4;float rim = pow(1.0 - abs(dot(viewDir, normal)), 10.0);fresnel += rim * 0.25;float surfaceNoise1 = snoise(vWorldPosition * uSurfaceNoiseFrequency + vec3(uTime * 0.1, uTime * 0.06, uTime * 0.08));float surfaceNoise2 = snoise(vWorldPosition * uSurfaceNoiseFrequency * 2.7 + vec3(uTime * 0.15, uTime * 0.1, uTime * -0.04)) * 0.45;float surfaceNoise = (surfaceNoise1 + surfaceNoise2) * 0.5 + 0.5;surfaceNoise = surfaceNoise * uSurfaceNoiseAmplitude + (1.0 - uSurfaceNoiseAmplitude * 0.6);float coreGlow = pow(max(0.0, dot(viewDir, normal)), 2.0) * uCoreBrightness;float intensity = (fresnel + coreGlow) * surfaceNoise;intensity = clamp(intensity, 0.02, 1.0);vec3 finalColor = uBaseColor * intensity;vec2 screenPos = gl_FragCoord.xy / ditherScale;vec3 ditheredOutput = ditherMonochrome(finalColor, screenPos, colorLevels, uTime, uDitherMotionSpeed, uDitherMotionAmplitude, uDitherPattern);gl_FragColor = vec4(ditheredOutput, 1.0);}`,});const blobGeometry = new THREE.SphereGeometry(BLOB_BASE_RADIUS, 128, 128);const morphingBlob = new THREE.Mesh(blobGeometry, blobMaterial);scene.add(morphingBlob);const particleGeometry = new THREE.BufferGeometry();const particlePositions = new Float32Array(PARTICLE_COUNT * 3);const particleSizes = new Float32Array(PARTICLE_COUNT);const particleSpeeds = new Float32Array(PARTICLE_COUNT);for (let i = 0; i < PARTICLE_COUNT; i++) {const radius = BLOB_BASE_RADIUS * 2.5 + Math.random() * BLOB_BASE_RADIUS * 4;const theta = Math.random() * Math.PI * 2;const phi = Math.acos(2 * Math.random() - 1);particlePositions[i * 3] = radius * Math.sin(phi) * Math.cos(theta);particlePositions[i * 3 + 1] = radius * Math.sin(phi) * Math.sin(theta);particlePositions[i * 3 + 2] = radius * Math.cos(phi);particleSizes[i] = Math.random() * 0.06 + 0.015;particleSpeeds[i] = Math.random() * 0.2 + 0.1;}particleGeometry.setAttribute('position', new THREE.BufferAttribute(particlePositions, 3));particleGeometry.setAttribute('size', new THREE.BufferAttribute(particleSizes, 1));particleGeometry.setAttribute('speed', new THREE.BufferAttribute(particleSpeeds, 1));const particleMaterial = new THREE.ShaderMaterial({uniforms: {uTime: { value: 0 },uColor: { value: new THREE.Color(0xddddff) },uBlobBaseRadius: { value: BLOB_BASE_RADIUS }},vertexShader: `uniform float uTime;uniform float uBlobBaseRadius;attribute float size;attribute float speed;varying float vDistance;varying float vParticleAlpha;void main() {vec3 pos = position;float waveX = sin(uTime * (speed * 0.8) + position.y * 0.15) * 0.12;float waveY = cos(uTime * (speed * 1.0) + position.z * 0.20) * 0.12;float waveZ = sin(uTime * (speed * 0.9) + position.x * 0.18) * 0.12;pos += vec3(waveX, waveY, waveZ);vec4 mvPosition = modelViewMatrix * vec4(pos, 1.0);vDistance = length(mvPosition.xyz);gl_PointSize = size * (400.0 / -mvPosition.z);vParticleAlpha = smoothstep(uBlobBaseRadius * 6.0, uBlobBaseRadius * 2.0, vDistance);gl_Position = projectionMatrix * mvPosition;}`,fragmentShader: `uniform float uTime;uniform vec3 uColor;varying float vDistance;varying float vParticleAlpha;void main() {float dist = length(gl_PointCoord - vec2(0.5));if (dist > 0.5) discard;float pulse = 0.4 + 0.6 * abs(sin(uTime * (1.0 + mod(vDistance, 1.0) * 0.5) + vDistance * 0.2));float finalAlpha = (1.0 - dist * 2.0) * pulse * vParticleAlpha;finalAlpha = clamp(finalAlpha, 0.0, 0.5);gl_FragColor = vec4(uColor, finalAlpha * 0.4);}`,transparent: true,blending: THREE.AdditiveBlending,depthWrite: false});const particleSystem = new THREE.Points(particleGeometry, particleMaterial);scene.add(particleSystem);const ditherPatternSelect = document.getElementById('dither-pattern');const ditherScaleSelect = document.getElementById('dither-scale');const uiContainer = document.getElementById('ui-container');ditherPatternSelect.addEventListener('change', (e) => {blobMaterial.uniforms.uDitherPattern.value = parseInt(e.target.value);});ditherScaleSelect.addEventListener('change', (e) => {blobMaterial.uniforms.ditherScale.value = parseFloat(e.target.value);});let uiTimeout;const uiAutoHideDelay = 3000;const resetUITimeout = () => {clearTimeout(uiTimeout);uiContainer.classList.remove('opacity-0', 'translate-x-12');uiContainer.classList.add('opacity-100', 'translate-x-0');uiTimeout = setTimeout(() => {uiContainer.classList.remove('opacity-100', 'translate-x-0');uiContainer.classList.add('opacity-0', 'translate-x-12');}, uiAutoHideDelay);};document.addEventListener('mousemove', resetUITimeout);document.addEventListener('click', resetUITimeout);document.addEventListener('touchstart', resetUITimeout);resetUITimeout();window.addEventListener('resize', () => {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);composer.setSize(window.innerWidth, window.innerHeight);renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));bloomPass.resolution.set(window.innerWidth, window.innerHeight);});camera.lookAt(scene.position);const clock = new THREE.Clock();function animate() {requestAnimationFrame(animate);const elapsedTime = clock.getElapsedTime();blobMaterial.uniforms.uTime.value = elapsedTime;particleMaterial.uniforms.uTime.value = elapsedTime;starMaterial.uniforms.uTime.value = elapsedTime;morphingBlob.rotation.x += 0.0004;morphingBlob.rotation.y += 0.0007;pointLight1.position.x = Math.sin(elapsedTime * 0.32) * 6;pointLight1.position.z = Math.cos(elapsedTime * 0.32) * 6;pointLight2.position.y = Math.sin(elapsedTime * 0.18) * 4;pointLight2.position.x = Math.cos(elapsedTime * 0.25) * -5;pointLight3.position.z = Math.cos(elapsedTime * 0.40) * 5;pointLight3.position.y = Math.sin(elapsedTime * 0.35) * -4;controls.update();composer.render();}window.onload = () => {animate();};
</script>
</html>

效果如下