注意❗：作者知识和精力有限，本文章只作为抛砖引玉作用
1. 问题的起源
如今设计师的稿子是越来越夸张，各种3D效果各种动态效果齐放。
如此弄的前端人员用着有限的技术和知识，有心无力，苦不堪言。
我根据我所学习的知识给出一些解决方案仅供参考
2. 前端的感受
前端：设计师直接把键盘给你，效果你来做
前端：我直接贴图（因此效果大打折扣）
前端：前端这性能我实现不了
前端：这兼容我实现不了
3. 解决方案
动态效果
Old😒：
- GIF图(效果模糊)
- Png序列（文件太大）
- mp4（请求量大）
- svg(调整麻烦)
- Canvas 等...
New🥰：
lottiefiles:app.lottiefiles.com/
- 使用AE制作动画导出成为JSON
- 使用lottiefiles.js进行解析和展示即可
3D效果
Old😒：
- flash（没了）
New🥰：
1. 入门 spline
优点：
- 中文
开发文档，完全汉化作为入门最合适，很多功能直接上手就可实现 - 操作简单，教程很多，哔哩哔哩搜索下一大把
- 效果
实时展示、容易分享 - 社区活跃
缺点：
- 功能还有提升空间（粒子，高级材质，动画，转换，效果器，后期效果，自定义shader），但应付基础的动画和模型没有问题
- 对接开发仍有
2. 中级unity
优点：
- 标准化3D游戏引擎，可以使用新的URP和HDRP渲染管线和自定义渲染管线
- 操作方便，有很多第三方插件
- 支持导出WebGL导出
- 图形化shader编程
- 支持压缩模型烘培模型
缺点：
- 使用门槛过高
- 和前端对接稍微有点难度
3. 进阶Three.js
优点：
- 教程多，封装WebGL语法简单
- 和前端融合巨好
缺点：
- 深入学习需要英语数学都好
- 偶尔卡顿和性能问题，需要对底层深入理解
4. 专家WebGl
学习底层WebGl和Shader
5. 更进阶计算机图形学
Games101等 ...
4.关于
- 不知是否能做到
周更，全看这篇文章了 - 目前打算后期出一些关于
前端知识扩展的文章 - 本人只是一个普通
软件工程专业的大专毕业生，知识储备、精力有限，用词和描述不一定准确，大部分只作为抛砖引玉，请包容 - 本文章提到的
详细内容正在更新中
