作者: 桌子
在线体验 关于项目
Maya Bennett 是一份围绕构想中的平面设计人员展开的六章节 3D 简历。四个 Tripo 水果模型在个人简介、教育经历、职业经历和专业能力等面板之间浮动，滚动页面会让导入的相机动画向前或向后播放。
WebGL 层与 HTML 简历彼此分离，因此即使没有 3D 场景，这段故事仍然可读，也可以跳过。其下方展示六个品牌、包装和编辑设计项目，每个都可打开独立详情；Color Lab 则开放最终画面背后的光照、景深和材质控制。
体验要点
- 滚动浏览六段简历章节，导入的相机动画会随页面同步推进；向上滚动时，同一段旅程会自然倒放。
- 拖动四个水果中的任意一个，让它继续旋转，再看它回到原位并融入场景。
- 打开 Color Lab，实时调节曝光、景深、EXR 光照和每个水果的材质。
- 继续浏览六个精选的品牌识别、包装和编辑设计项目，每个项目都可打开独立详情视图。
技术解析
3D 资产 · Tripo 水果模型
四种水果以四个 GLB 资产随项目交付，场景节点与材质均带有 Tripo 标识。React Three Fiber 通过一个共用组件加载每项资产，而场景配置统一管理缩放、位置、自动浮动和相机目标偏移。
滚动编排 · GSAP + 动画相机
GSAP ScrollTrigger 将简历的滚动进度映射到一条 0–1 时间线。导入的相机 GLB 时长统一为 5 秒，并在第 0、60、120、180、240 和 300 帧取样，让每个章节都能稳定落位，并在向上滚动时反向播放。
水果交互 · 四元数拖拽与复位
指针移动驱动四元数旋转和设有上限的角速度。释放后，每个水果会短暂继续旋转，随后通过阻力回到设定姿态，并逐步恢复自动运动；鼠标与触控共用同一套指针交互路径。
电影感收尾 · EXR 光照、景深切换与 Color Lab
EXR 天空通过 PMREM 为 PBR 材质打光，固定的 25mm 相机则根据四个水果组合和当前主体切换景深。BokehPass、Bloom 与调色共同完成最终画面，Color Lab 也将这些控制项实时开放出来。
