网页上说「3D」的时候，指的可能是三件毫不相干的事。
一件是 CSS 的 transform 加 perspective 做出来的伪 3D——卡片翻转、立方体旋转、悬停倾斜，这些本质上还是二维元素在做投影变换，改几行样式就能上。另一件是 Canvas 2D 画的等距投影，看着有立体感，实际是精心排列的平面图形。第三件才是真的：WebGL 把 GPU 调起来，页面里跑着一个有摄像机、有光源、有材质、有渲染循环的三维场景。
第三种和前两种不是程度差别，是性质差别。它有自己的坐标系和着色器语言，也有自己的一套代价：只要页面开着，渲染循环就一直在跑；首屏要等库加载完、场景初始化完才有画面；同一段代码在旗舰机和三年前的千元机上是两种体验；还有一部分设备根本跑不起来，你得准备退路。这些不是上线后能补的东西，是选型时就要认下来的。
下面 14 款是童哲网上架的 Three.js 与 WebGL 网页特效，按你打算把它放在页面的什么位置分四组：铺在底层的背景、当主角的粒子系统、拼材质与拟真渲染的、以及用 3D 空间来摆内容的。每一款都写清楚它的技术路子和落地时会撞上的问题。
动手之前：这类效果有三件事必须先定下来
第一，降级路径。 WebGL 在今天的覆盖率已经很高，但「支持」和「跑得动」是两回事——集成显卡的老笔记本、开了省电模式的手机、远程桌面环境，都可能出现能初始化但帧率个位数的情况。稳妥的做法是：检测到不支持时换成一张静态图或纯色渐变；检测到帧率长期偏低时主动降级（减粒子数、关后期处理、降分辨率）。这段判断代码不长，但没有它，出问题的时候你什么都做不了。
第二，什么时候该停下来。 常驻渲染是这类效果最容易被忽略的成本——用户切到别的标签页，你的星空还在转，笔记本风扇还在响。两个开关是标配：页面不可见时（document.hidden）暂停渲染循环；元素滚出视口时（IntersectionObserver）也暂停。再加一条，尊重系统的prefers-reduced-motion偏好，开启时直接给静态画面——这既是可访问性要求，也能省掉一部分用户的抱怨。
第三，它到底比一段视频划算在哪。 很多首屏动态背景的传统做法是循环播放一段 1080p 视频，几 MB 起步，还要占带宽。着色器生成的背景是几十 KB 的代码加一个库，画面不重复、可以交互、可以跟着主题色变。但 Three.js 完整构建本身是百 KB 级别的体量，比一般动画库重得多，用 ES 模块按需引入能减掉相当一部分。算总账的时候要把库一起算进去，别只比自己写的那段代码。
第一组 · 铺在页面底层的 3D 背景（01 - 04）
01. 六万星体的深空银河模拟器 —— 拖拽这件事要想清楚
Three.js + WebGL 6 万+ 星体 自定义着色器 OrbitControls
实时渲染六万颗以上自带发光的星体，星云背景用程序化着色算法动态生成，配轨道控制器，鼠标拖拽就能改变星系的旋转角度和观测视角。这是「网页 3D 背景」里最经典也最保险的一类，星空不挑行业、不挑配色，放在深色站上几乎不会出错。
六万这个数量值得说一句：粒子数量对 WebGL 的成本影响不是线性的，几千颗和几万颗在旗舰设备上都很轻松，但到某个点之后中低端 GPU 会突然掉下去。上线前用一台三四年前的中端安卓机实测一次，比看任何跑分都有用；真跑不动，把星体数量做成一个变量按设备档位调，是最省事的降级手段。
更要紧的是轨道控制器带来的手势冲突。它接管了鼠标拖拽和滚轮缩放，如果这个星空是铺满首屏的背景，用户想往下滚页面，很可能变成把星系转了个方向。桌面端还能靠滚轮区分，触屏上滑动手势是同一个，冲突更明显。背景层用这类效果，通常应该只保留缓慢自转、不接受用户输入；真要交互，就把它做成一个有明确边界的区块，让用户看得出「这块是可以拖的」。
02. 霓虹流体波浪背景 —— 替代视频背景的典型案例
WebGL + Three.js GLSL 着色器 鼠标响应 深色底
深色底上几条霓虹光带缓慢流动，鼠标划过时光带会产生自然的流体形变和波动反馈。视觉上比星空更有设计感，也更容易和品牌色统一——光带颜色是着色器里的参数，换成你的主色只是改几个数值。
它是上面第三条原则的最好例子：同样的画面如果用视频实现，需要一段几 MB 的循环素材，还得考虑不同宽高比的裁切、移动端自动播放的限制、以及循环接缝；用着色器实时算，代码只有几十 KB，画面永不重复，鼠标一动还能响应。对首屏加载时间敏感的项目，这笔账很好算。
限制有两条。鼠标交互在触屏上是不存在的，手机用户看到的只是自动波动的版本——这不算缺陷，但如果你把「跟手交互」当成卖点，要知道一半以上的访客体验不到。另一条是它绑死了深色背景：霓虹光带的观感完全依赖暗底衬托，放到白底页面上会变得浑浊无力，浅色站请直接考虑别的方案。
03. 霍普夫纤维化数学可视化 —— 后期处理最重的一款
Three.js + GLSL 三套配色 参数可调 后期处理链
核心是霍普夫纤维化（Hopf Fibration）——把四维球面 S³ 上的纤维实时投影到三维空间，结果是一团彼此缠绕却永不相交的流动光带。这不是随手写的图形，是一个真实的数学结构，光带的缠绕方式有其严格来由，看久了也不会觉得是随机噪声。
它给了三套配色（Spectral 冷色、Inferno 火焰、Aether 翠绿）和一组实时参数：纤维密度、脉冲速度、辉光强度都能拖着调。场景里还叠了粒子云、星域背景、正二十面体线框和多层星云板，支持拖拽旋转与缩放。
要提醒的是它的后期处理链：UnrealBloom 辉光、色差、胶片颗粒、扫描线，四层叠在一起。后期处理和场景里画多少东西无关，每一层都是对整个屏幕再算一遍，分辨率越高越贵——在 4K 显示器上，光是这四层就可能比场景本身还耗。移动端的合理做法是把 Bloom 之外的三层全关掉，甚至 Bloom 也降一档采样。另外左上角那个控制面板是演示用的，上线前记得删，不然访客能把你的首屏调成一团糊。
04. 3D 网格隧道穿梭 —— 唯一带暂停开关的一款
Canvas + WebGL 播放 / 暂停 时间轴拖动 光影渲染
无限延伸的金属网格隧道，光影渲染是这一款下功夫的地方——反光、暗部、纵深的衰减都做得比较扎实，画面质感偏电影而不是偏科技演示。
它有一个别家都没有的设计：播放 / 暂停控制，而且暂停之后可以用滚轮拖动时间轴逐帧浏览。 这个功能表面上是给演示用的，实际意义比看起来大——前面说过常驻渲染是这类效果的隐性成本，一个内建的暂停开关意味着你可以很自然地做「用户不看时停下」，不用自己改渲染循环。做开场动画时，逐帧时间轴还能让你精确地找到那一帧该切走。
代价是滚轮被占用了。和第 01 款的拖拽冲突是同一类问题：如果它铺在长页面的首屏，用户滚滚轮的预期是翻页而不是拖时间轴。把它做成整屏开场动画（播完自动进入正文），或者放在一个独立的展示区块里，都比直接当背景合适。
第二组 · 当主角的粒子系统（05 - 07）—— 数量本身就是视觉
05. 3D 交互式黑洞奇点演化 —— 技术含量最高，也最难改
GSAP + Three.js GLSL 着色器 多状态过渡 数据联动
模拟宇宙物质从平稳吸积盘、到湍流爆发、再到引力坍缩的完整演化，几个状态之间可以平滑过渡，而且和界面上的数据面板（质量、辐射强度）是联动的——不是播一段动画，是一个能被外部逻辑驱动的系统。
技术路子说清楚了就很有参考价值：数以万计粒子的位置更新如果放在 JavaScript 里逐个算，主线程根本扛不住；这套的做法是把流体动态和引力透镜效果写进 GLSL 着色器，交给 GPU 并行处理，CPU 只负责下达状态指令，GSAP 在外层当状态机管过渡。这是网页端做大规模粒子的标准解法，也是为什么它能在浏览器里跑出这种密度还不卡。
正因如此，它的改造门槛是本文最高的。调参数（粒子数、颜色、速度、坍缩时长）不难，但要改形态——比如把黑洞换成别的结构——就得动 GLSL，那是另一门语言。 团队里没有着色器经验的话，把它当成一个「参数可调的成品」来用是更现实的定位。适合前沿科技公司官网、航天与科幻主题页、数字孪生大屏，这些场合恰好也是最不需要改形态的。
06. 深海流体感粒子生命体 —— 本文最安静的一款
Three.js + WebGL 动态点阵 生成艺术 氛围向
动态点阵网格构成一个像深海生物一样缓慢游弋、翻涌的形体，节奏很慢，颜色克制。它和上一款是粒子效果的两个极端：黑洞要的是冲击力，这一款要的是可以一直放着而不烦人。
这个区别在实际选型里很重要。首屏 Hero 区的背景，访客通常只停留几秒，用冲击力强的没问题；但如果这个效果要陪着一段长文案、一个表单、或者一段音乐播放器，那么「不抢注意力」比「好看」更重要——闪烁、高速运动、强对比的画面放在阅读区背后，会持续消耗读者的注意力。这一款正是为后一种场景准备的。
短板也在这里：单独看它的记忆点不强，点阵网格是生成艺术里很常见的形态，很难说服客户「这个值得单独付费」。它的价值要在完整页面里才显现出来——配上排版和内容，它托住了整个页面的氛围；单独截图放提案里，很可能被认为平淡。
07. 五万粒子形变时钟 —— 别指望用它看时间
WebGL + Three.js 5 万粒子 形态切换 GPU 插值
五万个独立发光粒子拼出一只真正在走的时钟——表盘轮廓、刻度、指针全部由粒子构成，而且整个结构能在圆形、方形、六边形之间丝滑形变，靠的是 GPU 上的向量插值。形变那一下是它最好看的地方。
需要摆正的是它的定位：作为「时钟」，它的可读性远不如两行普通文字。 粒子构成的指针边缘是发散的，刻度也不清晰，你要真想知道现在几点几分，得盯着看两秒。所以别把它放在用户需要读时间的地方（比如后台系统的顶栏），它的真实用途是大屏、展厅、开场画面这类「氛围优先、信息其次」的场合——在那些地方，一只会呼吸会变形的时钟本身就是内容。
五万粒子加实时形变，是本组里性能开销最大的一个组合。做数字大屏（固定设备、固定分辨率、常年开机）没问题；要放进面向公众的网页，粒子数建议按设备分档，并且一定要接上页面不可见时暂停。
第三组 · 材质与拟真渲染（08 - 11）—— 拼的是「像不像真的」
08. WebGPU 电影级 3D 地球 —— 上线前先看浏览器支持
WebGPU + Three.js 16 个城市锚点 日食演算 需新版浏览器
本文完成度最高的一款。地球可以自由拖动旋转，白天看得清地形和海洋反光，转到夜面是密密麻麻的城市灯光；云层会在地面投下影子，边缘有一圈大气散射的光晕。月亮绕着转，挡住太阳时会出现日食，地球慢慢暗下去——这一段是整个效果里最值得看的。地球上标了 16 个城市（上海在内），点一下镜头就飞过去；另有卫星轨道、星空背景和镜头光晕，右侧一整套控制面板可以现场调太阳亮度、云影浓淡、大气颜色和画面对比度。开场有百分比加载动画，也会按设备自动切换贴图精度。
但它有一个硬门槛：它用的是 WebGPU，不是 WebGL。 WebGPU 是新一代的网页图形接口，能力更强，代价是支持面窄得多。按 caniuse 当前数据：Chrome 与 Edge 从 113 起支持，Safari 从 26.0 起（含 iOS 26）为部分支持，Firefox 至今默认未开启，全球覆盖约 84%（把部分支持算进去约 85.6%）。也就是说，用 Firefox 的访客、以及没升级到 Safari 26 的 iPhone 用户，打开会是一片空白。
模板作者自己也写明了这一点，并提示准备备选方案。落地时该做的是：检测 navigator.gpu 是否存在，不存在就换成一张地球静态图或者一个轻量的 WebGL 版本。 另外它用了超高清贴图，首屏加载慢是必然的——那个百分比加载动画不是装饰，是刚需。
适用：全球业务展示、天文科普、数据大屏、科技公司首页主视觉；能接受为少数浏览器单独做降级的项目。
09. 微缩海洋模拟 —— 注意那个自动播放的音效
Three.js + Canvas 风力可调 水体折射 环境音效
一片被装进培养皿里的 3D 海域，小船漂在中间。可以拖拽全方位旋转视角，点击水面触发涟漪，底部的风力面板一推，海面从风平浪静实时变成波涛汹涌。水体做了折射通道处理，能透过水面看清水下的船体轮廓，还配了环境氛围音效。
这一款的讨喜之处在于它是有边界的。前面那些效果都在追求「无限」——无限星空、无限隧道、无限画廊，而它反过来把一片海关进一个小容器里，尺度一下子变得可把握。这种「微缩景观」的表达在交互 H5 和品牌展厅里很吃香，因为用户很快就明白自己能对它做什么。
两个落地问题。一是音效。 现代浏览器普遍禁止无用户交互的自动播放音频，所以那段环境音很可能根本不响；就算你想办法让它响了，未经许可就出声的网页会让相当一部分人立刻关掉标签页。正确做法是默认静音，给一个明确的开关。二是折射通道的成本——透过水面看水下，意味着场景要多渲染一遍再做扭曲采样，这是水体渲染里最贵的部分。移动端可以把折射降级成一层带扰动的半透明贴图，观感损失不大，帧率差别明显。
10. 液态玻璃泡泡交互 —— 唯一不走 Three.js 的一款
WebGL / VFX-JS 玻璃色散 点击变形 轻量方案
还原玻璃的透明质感、彩虹色散和高光反射，点击泡泡会触发一段液态形变。视觉上很讨好，苹果这两年把「液态玻璃」这套语言推得很热，这一款算是踩在点上。
技术选择值得单独讲：它用的是 VFX-JS，不是 Three.js。 这两者的思路完全不同——Three.js 是另起一个三维场景，你的 HTML 内容和 3D 画面是两层东西；VFX-JS 这类库是把着色器效果直接套在已有的 DOM 元素上，页面上原本的图片、文字还是那些图片和文字，只是被加了一层 GPU 处理。
这个差别的实际意义很大。如果你只是想给现有页面的某个元素加一层玻璃、扭曲、色散效果，走 DOM 特效这条路比搭一个 Three.js 场景轻得多，也不会带来内容不可选中、搜索引擎读不到的问题。反过来，如果你要的是一个可以绕着走的三维空间，那 VFX-JS 就不够用了。
要留意的是 VFX-JS 属于小众库，生态和文档都远不如 Three.js 丰富，遇到问题能搜到的答案有限。项目里如果只用这一个效果，可以接受；要大量依赖，先评估维护成本。
11. 次表面散射的多汁魔方 —— 换配色要小心
Canvas + WebGL 次表面散射 形态自动变化 材质向
一个会自动变换形态的 3D 魔方，核心是次表面散射（Subsurface Scattering）——模拟光线进入物体内部、在里面折射扩散再透出来的过程。这是玉石、皮肤、蜡烛、果肉之所以看起来「有温度」的物理原因，也是它和普通半透明材质的根本区别：普通透明只是让光穿过去，次表面散射让光在里面走了一段路。
结果是这些立方体不像塑料也不像玻璃，像果冻、像琥珀、像切开的水果，边缘的光晕晕染得很自然。这种质感在网页上很少见，因为它在离线渲染里都算高成本项，实时版本是一系列近似，能做到这个程度不容易。
用它的时候有一条要注意：这一款的配色不是配色，是材质的一部分。暖橙色之所以成立，是因为它恰好落在「果肉」的联想里；你要是按品牌色改成冷灰或者深蓝，次表面散射的效果会立刻变得难以辨认——那种半透明的温润感会被读成「有点脏的塑料」。真要换色，请在暖色区间内换，或者接受它作为一块独立的视觉飞地，不参与全站配色统一。
适用：奢侈品与艺术工作室官网、食品与化妆品的产品交互页（果汁、面霜、精华液这类半透明产品）、数字艺术装置。
第四组 · 用 3D 空间来摆内容（12 - 14）—— 好看，但内容会「消失」
12. 无限隧道图片长廊 —— 110 个展位，13 张素材
GSAP + Three.js 110 个面板 真·无限循环 触屏可用
一条向前延伸的方形隧道，四个面上错落嵌着 110 个作品面板，按住鼠标拖动推进，走到尽头无缝接回起点。悬停时边框亮起，点击进入聚焦视角看大图，按 ESC 返回；地面有倒影，四周叠了暗角。
它有几处实现上的讲究值得学：
真正的无限循环——隧道路径是一条闭合曲线，滚动进度取模循环，没有「到底了」的断点，也不是简单地把列表首尾相接。
图片不变形的做法很聪明：常规写法是拿到图片宽高后去改几何体尺寸，改一次重建一次网格；这套的思路是几何体固定不动，改的是纹理采样区间，图片加载后比对宽高比，把多出来的那一边往里收，片元着色器里一行
vec2 uv = 0.5 + (vUv - 0.5) * uCrop;就完成了等比裁切。横图竖图方图都不拉伸。13 张素材撑起 110 个展位——图片按规则复用，中间还穿插了 Canvas 实时生成的动态纹理，所以不会一眼看出是同一批图在转。
移动端真的能用：统一走 pointer 事件，触屏拖动同样生效，竖屏时自动放宽视场角。这一条在同类效果里并不常见。
但要认清一件事：隧道里的图片是 WebGL 纹理，不是页面上的 <img> 元素。搜索引擎读不到，屏幕阅读器也读不到，浏览器的「在页面中查找」找不到，用户想右键保存也没有。所以拿它做作品集时，正确的结构是把 3D 画廊当成视觉入口，另外保留一份可爬取、可访问的常规作品列表页——两者内容一致，只是呈现方式不同。只做 3D 那一份，等于把作品从搜索引擎眼前藏起来了。另外 110 个面板的纹理都要占显存，素材换成高分辨率大图时要留意。
13. 五层无限视差画廊 —— 比上一款轻，问题也一样
Three.js 5 个视差层 惯性拖拽 呼吸动画
五个图层以不同的速度、透明度和缩放比例排开，形成很强的空间纵深；水平拖拽带自然惯性，滚轮可以快速浏览，图片循环复用做到无缝无限滚动，每张图还带轻微的浮动和呼吸动画。
它和第 12 款是同一个需求的两种解法：隧道是「把观众放进空间里」，视差层是「把画面推远推近」。后者的沉浸感弱一些，但实现更轻、素材要求更低，也不会像隧道那样占用大量显存。如果你的作品集只有二三十张图，视差层这条路更划算；要撑起上百个展位的规模感，隧道更合适。
问题和上一款完全一样，而且更需要提醒：图片依然是纹理不是 DOM，SEO 和可访问性同样为零。加上水平拖拽会和页面的纵向滚动抢手势——桌面端还好，触屏上用户很容易在想往下滑的时候把画廊拖走了。用它的话，最好让画廊独占一屏并给出明确的边界提示，或者干脆做成一个需要点击进入的独立页面。
14. 神经元信号传导 3D 模拟 —— 结构是算出来的，不是建模的
Three.js 程序化生成 UnrealBloom HUD 数据联动
中央是带凹凸质感的胞体，四周伸出十几条弯曲分叉的树突，可以拖动鼠标环绕观察。点击画面任意位置触发一次电信号，光脉冲从输入端一路推进到胞体，胞体随即「放电」点亮整个结构；左侧的 HUD 面板同步刷新膜电位、传导状态和信号强度，配上扫描线、暗角和自定义光标，是很扎实的科幻终端质感。
它有几个做法很值得借鉴：
树突是算出来的，不是建模的——先用随机游走生成主干曲线，再在主干中段随机长出若干次级分支，分支粗细按剩余长度递减，末端自然收细。不依赖任何外部模型文件，每次刷新的形态都不一样。
发光靠后处理而不是贴图——UnrealBloom 的强度跟着信号实时变化，脉冲经过哪里哪里才亮，这是贴图做不到的。
数据面板和 3D 是真联动——膜电位从 −70mV 冲到 +40mV 再回落，是跟着动画进度算出来的曲线，不是写死的假数字。
单页运行、无后端依赖，配色和文案都在明面上，改成别的主题（数据流、能量传导、网络拓扑）成本很低。
要说清楚的是它的科学严谨度：膜电位的数值区间是对的，形态和传导过程是示意性的。 拿它做科技感展示、生物医药公司官网、AI 与神经网络主题的视觉表达都没问题；但别把它当成教学素材去讲解真实的神经传导机制，那需要的是另一类严格建模的可视化。另外它带自定义光标，这一项和其他效果里的同类功能一样，在触屏上无效，且会覆盖系统光标的形态提示，建议按站点性质决定去留。
怎么选：按位置倒推
先确定它在页面上的角色，再挑技术。要一层不抢戏的底子，去第一组，其中第 02 款（霓虹波浪）最容易和品牌色统一，第 06 款（粒子生命体）最适合放在长内容后面。要一个能被记住的主视觉，第 05 款（黑洞）和第 08 款（WebGPU 地球）是完成度最高的两个，代价分别是改不动和支持面窄。
如果你要展示的是实物或材质——产品、食品、化妆品、艺术品——第三组比粒子系统合适得多，尤其第 11 款那种材质表达，是普通产品图给不了的。如果你要摆的是作品集，第四组好看，但请务必读一遍那两款里关于 SEO 的段落，然后老老实实再做一份常规列表页。
还有一条贯穿全文的经验：本文有四款（第 01、04、12、13）都接管了鼠标拖拽或滚轮，这是 WebGL 效果落地时最常撞上的问题——你以为你加了个背景，实际上你改掉了整个页面的滚动行为。凡是要铺在长页面上的，先把手势冲突这件事想清楚。
几个常被问到的问题
Q：这些效果在手机上跑得动吗？
大部分能跑，问题在于耗电和发热而不是帧率。现在的中端手机跑一个粒子背景没有压力，但持续的 GPU 占用会让机身发烫、电量掉得肉眼可见，用户不一定说得出为什么，只会觉得「这个网站有点怪」。所以移动端的正确策略不是「能不能跑」，而是主动降档：粒子数减半、关掉后期处理、降低渲染分辨率（用 renderer.setPixelRatio 限制到 1.5 以内）、滚出视口就暂停。做完这几步，体验差别比想象中小，代价差别比想象中大。
Q：WebGL 内容搜索引擎能收录吗？
不能。Canvas 里画出来的一切对爬虫都是一块空白画布，文字是纹理、图片是纹理，什么都读不到。这不是「优化一下就好」的问题，是原理上的限制。 唯一的解法是内容双份：3D 场景负责视觉体验，同时在页面里保留可被读取的真实 HTML 内容（哪怕视觉上隐藏在下方或另一个页面）。第 12、13 款那类画廊尤其要注意这一点。
Q：Three.js 和 WebGL 是什么关系？要学哪个？
WebGL 是浏览器提供的底层图形接口，直接用它写一个立方体要上百行代码，还得自己管理矩阵和缓冲区。Three.js 是架在它上面的库，把摄像机、光源、材质、几何体这些概念封装好了，几十行就能出画面。绝大多数网页项目应该用 Three.js。 至于 GLSL 着色器——那是运行在 GPU 上的一小段程序，本文里凡是提到「自定义着色器」的效果，都是在 Three.js 的框架里额外写了 GLSL 来实现常规材质做不到的画面。这一层可以按需学，不学也能用 Three.js 做出很多东西。
Q：WebGPU 会取代 WebGL 吗？现在该用哪个？
方向上会，时间上还早。WebGPU 的设计更贴近现代 GPU，性能上限和计算能力都更强，Three.js 也已经提供了 WebGPU 渲染器（第 08 款用的就是）。但按前面引的 caniuse 数据，Firefox 默认还没开，Safari 要 26.0 以上，覆盖面和 WebGL 差着一截。今天的务实做法是：面向公众的项目用 WebGL，内部大屏、演示、或者能控制浏览器环境的场景可以上 WebGPU；两边都要的话，用 Three.js 的渲染器抽象来切换，业务代码不用重写。
Q：加了 3D 效果之后首屏变慢了，怎么办？
按顺序查三件事。一是库的加载方式——Three.js 不该和首屏关键渲染路径抢带宽，把它的加载推到首屏内容之后，或者用动态 import() 在需要时才拉。二是贴图——高清贴图是这类效果里最大的单项体积，能用程序化生成的就别用图，必须用图的转成压缩纹理格式或者降低分辨率。三是初始化时机——很多效果在 DOM 一就绪就开始建场景，和首屏渲染撞在一起；改成首屏画完再初始化，用户感知到的速度会明显不同。
本文的 14 款都在童哲网前端资源板块。相关的几篇：轮播与切换效果合集（里面有几款同样走 WebGL 的重型轮播）、卡片与布局效果合集（CSS 3D 那一路的做法）、CSS 加载动画与进度条效果（3D 场景的加载过程正需要这个）。
