分析 webpack 打包文件
查看 Source map,核心库文件保留 Three.js、gsap.js、FBXLoader.js(加载 fbx 资源),GSAP 从 v1.20.4 升级到 v3.12.5。
提取旋转木马代码
旋转木马交互逻辑由 7 个类组成:LoaderManager(fbx 资源加载)、AppStage(初始化、wheel 事件等交互)、Visual(基础类)、Shapes(形状效果)、Points(粒子效果)、Post(贴画)、Carousel(旋转木马)。
调整代码
- 简化 LoaderManager,去除 php 接口 和 json 类型文件加载,去除 Projects 相关处理。
- GASP ticker 对象的 addEventListener 已改为 add,removeEventListener 改为 remove,useRAF 方法已被废弃。
- Events.WHEEL 和 Events.RESIZE 事件,从 Vue bus 方式改写成原生。
- AppStage 的 Events.TRANSFORM 事件改为直接调用。
运行旋转木马(全屏)
文章参考