这次主页重构看起来只是把首页做得更“酷”一点：3D 星轨背景、轨道式导航、玻璃态面板、PWA 缓存、音乐播放器、状态卡片。真正做完以后才发现，视觉只是表层，难点其实在几个很具体的工程问题上：滚动到底应该归谁处理，触控板的细碎 delta 怎么变成可控的导航，弹层打开后为什么还会带着底层页面一起动，以及一个 Three.js 背景该不该压进首屏包。这篇记录不写效果展示，主要复盘几个踩坑点。1. 3D 首页最容易犯的错：把滚动当成普通滚动传统页面的滚动是连续的，用户滚多少，页面就滚多少。3D 场景式首页不一样。它的“滚动”往往不是文档流滚动，而是把输入转换成一个场景进度，比如：sceneProgress = 0 // 首页 sceneProgress = 1 // 状态舱 sceneProgress = 2 // 第一个链接节点这个模型的好处是清晰：摄像机、DOM 卡片、导航点都可以围绕同一个 progress 做插值。问题也很明显：如果把触控板每一次微小的 wheel delta 都直接加到 progress 上，页面会变得非常难控。鼠标滚轮一次通常是明确的一步，而触控板是一串很密的细碎
易水哲
一个什么都会一点的白帽子
京公网安备11010802044340号