3 阅读
项目类型： 品牌营销 H5 / 3D 互动体验
技术栈： Three.js / WebGL / AnnieJS (Flash2x) / Zepto.js
项目地址： https://cailven.com/demo/adidasftf/
项目概述
为 Adidas X9000 球鞋打造的沉浸式 3D 全景互动 H5，以”解码 X9000 进阶未来”为主题，用户通过陀螺仪或触控在 3D 全景空间中探索四个互动热点，解锁不同章节内容。
核心交互
– 3D 全景空间： 基于球体反向贴图技术构建全景视角环境，用户可 360° 自由观察
– 陀螺仪感应： 调用 DeviceOrientation API，手机端通过重力感应控制视角，实现真实的”环顾”体验
– 触控交互： 支持触摸滑动、滚轮缩放等多维度视角操控
– 热点触发： 3D 空间中设置四个互动锚点，点击触发对应章节弹层（解码 / 入侵 / 选择 / 未来）
– 序列帧特效： 基于 20 帧贴图序列的逐帧动画特效
技术亮点
– 双引擎协作： AnnieJS 负责 2D UI/场景管理，Three.js 负责 3D 全景渲染，两套引擎通过全局事件调度协同工作
– 多场景异步加载： 8 个 SWF 场景文件 + 27 张 3D 纹理资源分阶段异步加载，带实时进度反馈
– 3D 射线检测： 通过 Raycaster 实现 3D 空间中 Sprite 按钮的精确点击判定
– 横竖屏自适应： 自动检测屏幕方向并提示用户横屏体验
– 移动端性能优化： 针对手机内存限制，对 WebGL 渲染像素比、几何体精度、动画循环进行分级优化
我的角色
独立完成前端开发，包括 3D 全景渲染、交互逻辑、动画系统及移动端性能调优。