一个可离线打开的 3D 滚动叙事页

最骚源码 · zuisao.com

很多“很炫”的 3D 页面，一解压就白屏、一部署就 404、必须绑 Node 服务才能跑。
这篇讲清楚我们这套 「涡旋穿隧 / VORTEX TUNNEL」 的实现路径：用了什么技术、为什么这样设计、怎样做到 双击 HTML 就能看，以及上线时要注意什么。

一、它到底是什么

一句话：

用户往下滚，相机就沿着一条发光涡旋隧道往里钻；六段文案随进度淡入淡出，色彩从青蓝走到品红临界，再穿出收束。

不是静态大图，也不是随便贴个 Three.js 示例，而是一条完整的 scroll-driven 叙事：

核心体验只有一句话驱动：滚动进度 = 穿隧进度。

二、技术栈（刻意做减法）

整站刻意保持“少依赖、可分发、可双击”：

1. Three.js（本地全局版）
   负责 WebGL 场景：隧道壁、螺旋粒子、环标、中心光晕、雾。

2. 自定义 ShaderMaterial

   • 隧道壁：螺旋条带 + 环线 + 深度衰减
   • 粒子流：按对数螺线排布，进度驱动转速、螺距、半径收束与颜色混合

3. 原生滚动 + 自写进度平滑
   不用 GSAP/Lenis 也能稳：targetProgress 与 progress 做指数平滑，避免滚轮一顿一顿。

4. DOM 文案层（fixed 覆盖）
   文案不塞进 3D 场景，而是全屏 fixed 层按章节窗口控制 opacity / blur / translateY。
   这样 可读性优先，隧道再亮也不至于把字吃掉。

5. 纯静态交付

   • index.html + styles.min.css + main.min.js
   • vendor/three.global.min.js
   • 无 CDN、无构建步骤、无服务器硬依赖

为什么不用 ESM / importmap？

很多教程默认 <script type="module">。本地 file:// 打开时，浏览器会拦跨文件 module，结果就是：

卡在 INITIALIZING FIELD…，加载层永远不关。

所以我们把 three 做成 经典全局脚本（window.THREE），普通 <script defer> 加载。
双击就能跑，这才是“源码商品”该有的默认体验。

三、设计上做了哪些取舍

1. 调性锁定

Cyberpunk-sci-fi × Editorial × Particle-shader
不是霓虹烂俗赛博，更接近深空仪式感：大面积近黑、冷青主光、临界才放品红/琥珀。

色板（固定 token）

• 底：#04060C
• 文：#E8EEF8 / 弱文 #8A96AD
• 主强调：#3DF0FF
• 次强调：#3B6CFF
• 点缀：#FF3DAE / #FFB03D

2. 字体不依赖 Google Fonts

系统栈 + 超大标题：

• Display：Arial Black / Helvetica / 苹方 / 微软雅黑
• Mono HUD：JetBrains Mono / Consolas

零外链字体，国内外打开速度一致。

3. 层级：3D 做沉浸，文字做叙事

• Canvas：position: fixed 铺满
• Vignette + Grain：压暗四角、增加胶片颗粒
• 文案：章节窗口激活时才显示
• HUD：右侧章节号、百分比、速度条

4. 性能友好（不是无脑堆粒子）

• DPR 上限：桌面 1.5，移动端/低配 1.25
• 粒子量按设备降级
• prefers-reduced-motion 降动效
• 关键 JS/CSS 全部 minify + preload/defer

本地 file:// 实测，loader 就绪大约 1 秒上下（视机器而定）。

四、实现拆解（按模块）

A. 滚动进度中枢

scrollY → targetProgress(0~1)
         → progress（平滑）
         → 相机 Z / FOV / 雾色 / 粒子 uniforms / 文案窗口 / HUD

所有视觉通道 共用同一进度，避免“镜头在跑、字还在另一套时间轴”。

B. 隧道几何

• CylinderGeometry（背面渲染）做管壁
• shader 里用 UV 画螺旋亮带 + 细环线
• 临界段插值到品红/琥珀，穿出段抬亮度

C. 螺旋粒子流

每条 stream 一个基准角，点沿 Z 均匀分布：

angle = baseAngle + travel * pitch + time * spin
radius = R * (1 - critical * 0.35) * (1 + breakout * 0.55)

顶点着色器算位置与尺寸衰减，片元用软圆点 + 加色混合。

D. 章节文案窗口

六段进度窗口按真实 DOM 布局重算（offsetTop/offsetHeight），中间做去重叠。
激活时：

• opacity → 1
• blur → 0
• translateY → 0

退出反向。左/右/中三种版式，避免每屏都居中死板。

E. 交互细节

• 鼠标视差：相机 lookAt 微偏 + 轻微 roll
• 自定义光标：点 + 延迟外圈
• 结尾按钮回顶回放
• 加载失败 4s 强制关 loader（防白屏挂死）

五、部署方式

本地： 双击 index.html

宝塔 / Nginx 静态站：

1. 1. 上传 zip
   2. 解压到子目录（例如 /demo/zuisao3d/）
   3. 确认根下直接有 index.html

无需 PHP、数据库、Node。伪静态、HTTPS 按你站点常规配置即可。

小提醒：若 demo/ 下已有其他演示，请解压到独立子目录，避免覆盖别人的 index.html。

六、文件结构（交付即用）

zuisao3d/
├── index.html              # 入口（引用 min 资源）
├── styles.min.css          # 压缩样式
├── main.min.js             # 压缩主逻辑
├── styles.src.css          # 可读源码
├── main.src.js             # 可读源码
├── design.md               # 设计说明
├── README.txt
└── vendor/
    ├── three.global.min.js # 运行时
    └── three.global.src.js # 源码备份

七、你可以怎么用它

• 直接当个人主页 / 作品集首屏
• 当活动落地页的沉浸开场
• 当 WebGL 滚动叙事教学案例
• 在此基础上换色板、换文案、换章节，做成自己的品牌片头

二次开发成本低：
颜色在 CSS 变量与 PALETTE；章节文案在 HTML；镜头/粒子手感在 main.js 进度映射。

八、总结：为什么它值得作为源码交付

1. 真 3D、真滚动叙事，不是贴图假滚动
2. 零外链、零构建，双击即用，宝塔静态即可上线
3. 有设计文档与可读源码，不是黑盒 min 代码
4. 性能与兼容做过取舍（DPR、粒子降级、防 loader 卡死）
5. 版权与品牌位已预埋（最骚源码 / zuisao.com），便于你继续分发

如果你要 自己的配色、自己的章节文案、自己的域名品牌，在源码层替换比从零写一套快得多——这正是这类模板的真正价值。

© 最骚 · 最骚源码 · https://zuisao.com
涡旋穿隧 VORTEX TUNNEL · Three.js 滚动叙事页