3D 个人作品集网站
面向创意从业者(设计师、摄影师、建筑事务所、独立开发者)的沉浸式 3D
交互作品集平台,解决传统作品集"图片堆砌、缺乏记忆点、用户跳出率高"的痛点。平台通过 WebGL 3D
渲染技术将静态作品展示升级为可交互的沉浸式体验,帮助用户在众多竞争者中建立差异化个人品牌,提升客户转化率。
核心功能模块:
①3D 沉浸式首页:基于 Three.js 构建的全屏 3D 场景,用户滚动页面时相机沿预设路径平滑漫游,不同板块(关于我、作品集、技能树、联系方式)对应不同的 3D
空间站位,实现"滚动即叙事"的浏览体验。场景包含粒子星空背景、浮动几何体、动态光线等视觉元素,全部由 GPU 实时渲染。
②作品展示系统:支持瀑布流+分类筛选两种浏览模式。作品详情页采用 3D
卡片翻转动画,正面展示封面,背面展示项目描述、技术栈、成果数据。支持图片、视频、外部链接等多种作品载体。
③主题联动系统:暗色/亮色双主题一键切换,3D 场景中的灯光色温、材质反射率、背景粒子颜色随主题同步变化,而非简单的 CSS 颜色替换。
④响应式 3D 适配:桌面端全场景高质量渲染(PBR 材质 + 环境光照 + 接触阴影),平板端降低阴影和后处理质量,移动端自动降级为 2D 粒子系统 + CSS
动画,确保各端 60fps 流畅体验。
⑤性能极致优化:Core Web Vitals 全绿(LCP < 1.5s, CLS < 0.05, INP < 100ms),Lighthouse 综合分 95+。图片自动 WebP/AVIF
转换,首屏关键资源内联,非首屏组件动态导入。
⑥业务闭环:联系表单(邮件通知)、作品点赞计数、访客来源统计(UTM 追踪)、SEO 结构化数据(JSON-LD),支持从展示到获客的完整链路。
社交
内容平台