逆袭者的王冠：Clay Boan融合设计、动效与GSAP魔法的3D游乐场

一项合作案例研究，探索3D、WebGL和GSAP动画如何在Clay Boan的作品集中融合，塑造出深度个性化且动态的数字体验。

项目起源

几年前，当我回顾过去几年的工作时萌生了这个想法。自从上次更新作品集以来，我一直非常忙碌。这些年来，我很自豪能与来自世界各地的优秀人才合作，并参与了许多令人惊叹的项目。我想通过这个作品集展示我的工作成果，但内容远不止于此。

最近我一直在指导设计学生和初级设计师参与实际项目和作品集制作。他们的热情也激励我更新自己的作品集！同时，我也希望与一些优秀的3D动效设计师和开发者合作。这些因素共同促使我着手创建这个新作品集。

前端技术实现

书法字体动画

Emeritus字体是一种受传统Blackletter和Fraktur设计启发的黑体字型。其书法形态为细腻而富有表现力的动画概念奠定了基础。我们首先将每个字母解构为核心形状，仔细剥离字尾部分以创建干净的、可动画化的形态。

接着，每个形状通过细微的旋转和缩放进行单独动画处理。使用GSAP的drawSVG功能，我们为连接字母字尾路径的遮罩路径设置动画，以有机的方式呈现它们。最终结果是标题和页脚文本呈现出既活泼又优雅的动画效果，为首页和关于页面增添了动态节奏，同时与周围的WebGL元素相得益彰。

1
2

<!-- SVG字母：B -->
<path class="shape" d="M60.53 322.049H61.74H61.7L118.48 261.769V119.439H117.31L66.37 173.489V258.269C66.37 286.269 66.37 315.439 60.54 322.049H60.53Z" fill="currentcolor"/>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

/**
 * 书法动画
 */
calligraphyTl
  // 显示形状
  .fromTo(shape, {
    scale: 0,
    rotate: -20,
    transformOrigin: 'center',
  }, {
    scale: 1,
    rotate: 0,
    ease: 'expo.out',
  })
  // 绘制遮罩线条
  .fromTo(mask, {
    drawSVG: '0% 0%',
  }, {
    duration: 4,
    drawSVG: '0% 100%',
    ease: 'none',
  }, '-=2')
  // 隐藏形状
  .to(shape, {
    scale: 0,
    rotate: 20,
    ease: 'expo.in',
  });

剪切路径动画

菱形图案在网站中形成了统一的视觉线索。您会在斜切、页面过渡、按钮和细微的交互细节中看到它们。通过SVG剪切路径实现，这些几何形态为内容分层和整体设计统一提供了简单而有效的方式。

基于滚动的时序动画

其余页面使用GSAP时间线动画实现，并与ScrollTrigger紧密集成，实现流畅的滚动同步播放。SplitText动画增添了动态排版效果，而固定元素和细微的视差（鼠标）效果则引入了深度和层次感。

WebGL技术实现

设置与系统

每个WebGL场景都在单个canvas上运行，我们使用观察器在各个部分之间移动这个canvas。这种方法避免了为每个场景创建新的渲染器，保持了轻量级和无缝的体验。

技术栈很直接：Three.js作为核心，pmndrs/postprocessing用于后期处理，n8ao用于环境光遮蔽通道。

此外，使用detect-gpu根据用户设备调整渲染，确保在低性能设备上保持流畅体验，同时在高性能机器上呈现更佳效果。

渲染与视觉方向

这次我没有编写任何自定义着色器😄。所有内容都使用Three.js强大的物理材质。挑战在于要尽可能接近3D设计师提供的Octane渲染参考图，然后我尝试在WebGL中直接实现最接近的效果。

没有使用烘焙——整个理念是保持实时性和动态性，以便我们能够随时调整灯光。我们使用场景中的灯光来塑造氛围，然后添加环境贴图以带来通常只有静态渲染才能实现的逼真反射和柔和光照。这样一切都保持灵活，我们可以实时调整，而不受限于烘焙纹理。

协作与迭代

由于每个场景都需要独特的氛围，我们使用Tweakpane GUI让设计团队能够实时调整。所有参数都可调整，包括颜色、灯光、材质、变换等。由于配置可以导出和导入，我们可以在不接触代码的情况下来回传递预设。这形成了一个非常高效的工作流程：更快的迭代、更多的创意控制，且无需来回沟通。

前端后端架构

我们使用Vue/Nuxt构建了坚实的基础，并创建了一个后端为前端服务的API层，简化了前端应用中的数据使用。BFF API层充当外部服务和前端之间的中介，在数据到达客户端组件之前进行聚合和规范化。

这种方法减少了UI的复杂性，最小化了冗余请求，并确保了跨不同页面的更一致数据流，最终实现了更流畅的用户体验和更清晰、可扩展的代码库。

内容管理

在内容管理方面，我们实施了Storyblok，这是一个无头CMS，使非技术团队成员能够管理和更新内容，而无需接触代码库。Storyblok的可视化编辑器和基于组件的结构与我们的Vue/Nuxt设置完美配合，实现了动态内容交付和快速迭代，同时保持了开发与内容操作之间的清晰分离。

托管部署

我们将网站托管在Vercel上，利用其与现代前端框架的无缝集成和快速的全球CDN来高效交付资源。这一托管选择实现了自动部署、预览环境和即时回滚，简化了我们的发布流程并提高了可靠性。

技术协作

这个项目从第一天起就是真正的协作，甚至到现在仍在继续。我一直希望每个人都能在项目中发挥自己的专长并享受其中。我很欣赏每个人带来的想法，看到他们施展魔法真是太棒了。当然，由于大家都有繁忙的客户工作，我们面临了一些挑战，但我们找到了实现的方法。我非常感谢这个优秀团队中的每一个人，帮助我将作品集变为现实。