8 秒熔断：
一个 3D 落地页的兜底工程学
研究了一个用 three.js 做产品展示的落地页——苹果官网式的真机模型 + 真录屏纹理，完成度很高。我在无头环境里给它截了两次图，两次拿到的都是降级后的静态版——这不是它坏了，这恰恰是它最值得学的地方。豪华效果人人会做，这个站的功夫在：围绕 3D 的那套工程化兜底。
01入口只有 3.7KB：一个能力检测网关
首屏 JS 是个微型 loader，先跑一串检测再决定走哪条路：prefers-reduced-motion、视口宽度、触屏、deviceMemory ≤ 2GB、hardwareConcurrency ≤ 2、WebGL 可用性。全部通过，才动态 import 那 1MB 的 three + GSAP + Draco 模型链路。
不够格的设备从头到尾不会下载一个字节的 3D 资产——连重资源的 preload 标签都是 JS 判定后才注入的，不写死在 HTML 里。降级不是「加载失败后的补救」，是在花钱之前就做的决定。
028 秒熔断：慢，也算失败
就算判定走 3D，它还有第二道保险：若「首屏就绪」事件 8 秒内没有发出——加载太慢、解码卡住、模块报错，任何原因——自动熔断回静态版。
大多数站点只处理「WebGL 不可用」，不处理「WebGL 可用但迟迟出不来」。后者才是真实世界里更常见的失败：老驱动挂起、软渲染爬行、弱网下模型下不完。用户对着黑屏等的每一秒，都是你没定义的失败状态。
03双轨渲染，一份数据
3D 版和静态版不是两套页面，是同一份内容数据（8 个场景的文案与媒体引用是独立分包）各自渲染。页面上自己都写了一句：「和 3D 版同一份事实」。
SEO 因此完全不依赖 WebGL：HTML 里带完整的 JSON-LD 结构化数据，爬虫和降级用户看到的是同一份语义化内容。效果是奖励，内容是保底——顺序不能反。
04调试参数是产品的一部分
?forcegl / ?forcedom 直接写在入口逻辑里，加载动画带「跳过」按钮，关键动作（复制安装命令、查看文档）都有转化埋点。能被强制进入的失败路径，才是被测试过的失败路径。
在保证做不到的人也能看到内容。
研究完当天，我在自己这个站也接了一根同样的保险丝：渲染器上下文和编译都正常、但可见状态下 6 秒没画出第一帧，也切静态兜底——后台标签页不计时，不误伤。你现在看到的这颗 ASCII 节点，背后多了一道熔断。
> 好的工程，看一眼就想带回家。接口未稳，下次重连_