抛弃静态Hero Section，用Three.js把网页改成2.5D互动场景的实战心得

最近我在尝试打破“网页就是页面集合”的固有认知，把游戏设计的逻辑揉进 Web 开发里。很多设计师习惯在首屏（Hero Section）堆砌各种复杂的 CSS 动画或 Lottie 动效，但这种方式本质上还是在做“播放”，而不是“交互”。我尝试把传统的静态首屏直接干掉，换成一个能够实时互动的 2.5D 场景，让网页本身变成一个“活的”数字化环境。

这次实战的核心逻辑不是在网页里塞一个小游戏，而是将 UI 的交互行为转化为场景内角色的输入指令。举个具体的例子：我并没有使用死板的图片切换或简单的 Hover 变色，而是建立了一套映射机制。当用户的鼠标滑过某个 CTA（Call to Action）按钮时，角色会收到一个指令，并实时移动到场景中对应的特定坐标（比如去开启一个宝箱）。这种从“点击触发跳转”到“交互驱动场景”的转变，能给用户带来极强的沉浸感。

为了让这个 2.5D 环境看起来像个真实的世界而非简单的 3D 模型展示，我额外实现了三套底层逻辑。首先是随机自主移动，让角色在空闲状态下会随机走动，避免在静止时显得像个僵硬的摆件。其次是碰撞检测，确保角色在移动过程中能与场景物体产生物理交互。最关键的是我引入了一个简单的环境状态机，实现了昼夜循环和动态天气，这意味着场景的光影会随时间实时变化。

在代码实现层面，最核心的挑战在于如何处理渲染循环（Render Loop）与 UI 事件的解耦。如果直接在事件监听里操作模型，很容易导致掉帧。我的处理方案是建立一个目标点映射表，将 UI 元素的 ID 与场景中的三维坐标绑定。

具体逻辑如下：

// 建立 UI 元素与场景坐标的映射表
const targets = {
  'cta-button-1': { x: 10, z: 5 },
  'cta-button-2': { x: -5, z: 12 }
};

// 监听 UI 事件，仅发送目标坐标给角色控制器
document.querySelectorAll('.cta-btn').forEach(btn => {
  btn.addEventListener('mouseenter', (e) => {
    const targetPos = targets[e.target.id];
    if (targetPos) {
      character.moveTo(targetPos.x, targetPos.z); 
    }
  });
});

通过这种方式，UI 层只负责发送指令，而具体的平滑移动和动画插值则交给 requestAnimationFrame 驱动的渲染循环去处理，保证了视觉上的流畅度。

当然，引入 Three.js 必然会带来性能压力，尤其是在移动端。为了确保 Core Web Vitals（核心网页指标）不崩盘，我重点做了两项优化：一是严格控制模型的面数，通过在 Blender 中进行减面处理，将单体模型规模控制在极低水平；二是优化材质，尽量减少实时计算的复杂 Shader，改用预烘焙的光影贴图。经过测试，在加入了实时渲染和自主行为逻辑后，Lighthouse 的性能评分依然能维持在较高水平，没有出现明显的 LCP（最大内容绘制）延迟。

这种 2.5D 场景化设计的真正魅力在于它可以接入环境变量。如果能将真实的时间 API 接入状态机，实现“晚上访问时角色在营火旁睡觉，白天则在走动”这种细节，其数字化环境的记忆点将远超任何一个精美的 Landing Page。它把网页从一个“信息展示板”变成了一个“可栖息的空间”，极大地提升了品牌叙事的深度。