Three.js 单页 Demo 合集

从 GitHub 高 Star 的 three.js 项目里挑选/复刻的 16 个示例,每个都是单个 HTML 文件, 双击即可在浏览器打开,无需安装、无需构建。three.js 通过 CDN 加载。

01 · 忠实还原

多窗口同步 3D

把页面开成多个浏览器窗口,拖到屏幕不同位置,立方体会跨窗口同步位置。原作源码忠实移植。
★ 18.9klocalStorage 同步
02 · 同款复刻

实时光线步进

Fragment shader 里逐像素做 ray marching:距离场、软阴影、环境光遮蔽、反射。可调反射强度与转速。
★ 2.2kGLSL Shader
03 · 同款复刻

3D 地球 · 飞线

程序化点阵地球 + 大气辉光 + 城市节点 + 弧形飞线动画。拖拽旋转、滚轮缩放,无需任何外部贴图。
★ 2.1k数据可视化
04 · 同款复刻

粒子网络背景

三维粒子 + 近邻连线 + 鼠标吸引的动态背景层,可直接铺在任意网页内容下方。
★ 6.6k网页背景
05 · 同款复刻

银河星系生成器

十万粒子构成的螺旋星系,按半径从内核暖橙渐变到外缘冷蓝。旋臂数、缠绕、离散度均可调。
★ Journey粒子系统
06 · 经典效果

超空间隧道穿梭

数千颗星沿管道向你飞来,按住鼠标曲速加速,FOV 拉伸 + 镜头滚转强化冲刺感。
★ Warp星空粒子
致敬经典 Star Field / Hyperspace
07 · 同款复刻

Synthwave 无限地形

vertex shader 用 fBm 噪声实时抬升网格,UV 随时间平移 → 永远向前飞的蒸汽波线框山脉 + 落日。
★ Retrowave噪声地貌
致敬经典 Retrowave Terrain
08 · 同款复刻

Mandelbulb 分形

全屏 fragment shader 做 ray marching,每像素迭代 8 次幂距离场,渲染出会呼吸变色的"3D 曼德博集"。
★ Fractal距离场
致敬 raymarched fractals / ShaderToy
09 · 同款复刻

鼠标流体模拟

GPU 上多张浮点纹理 ping-pong 求解 Navier-Stokes:平流、散度、压力雅可比迭代。拖动鼠标喷染料。
★ 16.4k流体仿真
10 · 同款复刻

粒子变形

6.5 万粒子在球 / 立方 / 环面 / 星系 / 波面之间平滑 morph,缓动插值奔向新目标,可点选或自动轮播。
★ Morph形变插值
致敬 MisterPrada/morph-particles
11 · 同款复刻

鸟群 Boids

数百只鸟仅靠分离 / 对齐 / 聚合三条本地规则,涌现出整体群飞。InstancedMesh 渲染,移动鼠标可驱散。
★ 官方集群智能
致敬 three.js 官方 GPGPU birds
12 · 同款复刻

Bloom 霓虹辉光

EffectComposer 后处理管线 + UnrealBloomPass:提取高亮、多级模糊再叠加,自发光体散出霓虹光晕。强度可调。
★ 2.8k后处理
13 · 同款复刻

Glitch 故障风

先渲染场景到纹理,再用全屏 shader 做 RGB 通道分离 + 块状位移 + 扫描线 + 噪点,间歇触发强故障。
★ 1.1k后处理
14 · 同款复刻

音频可视化

Web Audio AnalyserNode 做 FFT,把频谱映射到环形 3D 柱 + 脉动球 + 粒子。支持麦克风 / 拖入音频 / 内置 Demo 音。
★ Audio声音驱动
致敬 audio-visualizer-three-js
15 · 同款复刻

万花筒

全屏 shader 把画面转极坐标、对角度取模镜像折叠,叠加流动噪声纹理 → 不断变幻的对称花纹。镜面数可调。
★ Shader极坐标镜像
致敬经典 Kaleidoscope Shader
16 · 同款复刻

DNA 双螺旋

两条反向缠绕的磷酸骨架 + 碱基对横档,全用 InstancedMesh 一次绘制调用渲染上千个球与连杆。转速 / 螺距可调。
★ Instancing生物可视化
致敬 instancing 经典范式