用ThreeJS仿写某PixiJS项目案例。
仿写动图
原版动图
原方案
图形库：基于WebGL的2D渲染引擎PixiJS。 动效库：专业动画库GSAP。
改写方案
图形库：基于WebGL的3D渲染引擎ThreeJS。 动效库：@tweenjs/tween.js库。
仿写
采用ThreeJS用3D增加了一些表现，并且和2D进行了结合，使静态的车轮转了起来。其它动态效果也使用ThreeJS来仿照实现。由于时间关系，刹车开始结束时缓动效果暂未实现。
增加旋转车轮
一开始计划使用3dmax/blender软件来做车轮建模，后来考虑下载模型带宽小的时候加载时间太长，于是采用了用代码动态创建圆环车轮和车轮钢丝的方式来创建车轮，以优化首屏时间，但模型精细度会差一些。 有两个细节值得说一下：一是代码创建的模型都加到一个Group里，方便整体设置位置和旋转；二是加入Group里的模型不用scene.add('模型')，只需要scene.add(xxGroup)即可;
2D车架和3D车轮对位
车轮建好之后需要通过设置位置，我旋转来与2D车架图对齐位置，达到2D车架月3D车轮融合的效果。
仿写飞线
点状飞线使用Line和LineDashedMaterial材质来仿照实现效果。创建的Line Mesh加入Group，并使用Tween往后移动。循环往复。
项目代码仓库
第一次写技术博客，感谢大家！
