用Three.js把网页改成2.5D互动场景实战

把传统的静态Hero section直接干掉，换成一个能互动的2.5D场景，这比单纯堆动画要高级得多。我最近在尝试把游戏设计的概念揉进Web开发里，不是在网页里塞个小游戏，而是让网页本身变成一个“活的”环境。

具体实现是用了Three.js，做了一个类似复古游戏的场景。最核心的逻辑是把用户的UI交互（比如Hover按钮）转化为场景内角色的输入指令。当你鼠标滑过CTA按钮时，角色会收到指令并移动到场景里的特定位置（比如去开个宝箱），而不是死板的图片切换。

为了让这个环境看起来像个真实的世界，我还加了几套逻辑：

• 随机自主移动：角色在空闲时会随机走动，避免死板
• 碰撞检测：处理角色与场景物体的交互
• 环境状态机：实现了简单的昼夜循环和动态天气

代码层面的一个关键点是处理好渲染循环和UI事件的解耦，大概逻辑如下：

// 伪代码：将UI事件映射为角色目标点
const targets = {
  'cta-button-1': { x: 10, z: 5 },
  'cta-button-2': { x: -5, z: 12 }
};

document.querySelectorAll('.cta-btn').forEach(btn => {
  btn.addEventListener('mouseenter', (e) => {
    const targetPos = targets[e.target.id];
    character.moveTo(targetPos.x, targetPos.z); 
  });
});

最头疼的是性能优化，毕竟Three.js在移动端很容易把页面拖慢。我重点优化了材质和模型面数，确保在增加实时渲染和自主行为后，Lighthouse的分数没掉太多，Core Web Vitals依然稳住。

这种做法其实是在挑战“网页就是页面集合”的固有认知。如果能把时间、天气等环境变量接入，比如晚上访问时角色在营火旁睡觉，白天则在走动，这种数字化环境的记忆点远比一个精美的Landing Page强。