这是一个web 3D的项目，主要实现了汽车3D模型外观、内饰展示，实现开关车门、汽车开动动画。

项目预览地址： 普拉多全景展示

手机预览地址：

项目过程

研究three.js和webgl有一段时间了，踩过各种坑，也尝试多种方法解决问题，实现了基本功能。主要涉及功能：
1、舞台场景搭建；
2、添加光照（环境光、点光源、炫光）
3、相机控制 (角度控制、位置)
4、场景点击事件
5、模型加载(fbx、obj以及obj转js)
6、纹理贴图、法线贴图、凹凸贴图，以及环境贴图
7、材质（玻璃材质、纹理材质）
8、着色器材质（glsl）
9、动画（fbx动画、轮胎动画、相机动画、tween.js）

项目待优化

1、项目整体设计感
2、交互流畅度
3、材质渲染，增加整体质感

这是给一汽丰田做的用于朋友圈投放的H5，主题是”一键认证 关怀备至”。整个H5动效包含车辆出场动效、3D俯瞰、3D旋转动效、奖品展示跑马灯效果、车辆360度展示（精灵帧动画）、二维码光效动画。整体设计偏科技风。

核心技术点：

整个H5制作下来，有以下几个核心技术点：

1. 遵循腾讯广告投放的制作规范，控制整体文件包2M以内；
2. 使用Animate.css实现基本的过场动画；
3. 采用three.js进行obj模型和刻度图片加载，并进行纹理贴图，然后控制展示俯瞰图，以及过场动画；
4. 采用zepto.js中的swipe方法，控制模型左右转动；
5. 采用PS制作精灵图，实现普拉多线框车型360度展示；
6. 制作奖品展示跑马灯效果，采用setInterval进行精灵图切换；
7. 制作二维码覆盖层动效，采用pointer-events:none;属性实现图片覆盖二维码情况下，还能够长按识别二维码。

待优化的地方：

整个H5程序端制作花了2-3天制作时间，通过客户验收并上线。后期腾讯方反馈加载时间偏长，用户绑定偏少，广告投放单用户成本偏高。

程序方面以下几点思考：

1. 整个H5制作包1.9M，其中素材1M，three.js相关库文件600K左右。整体素材文件偏大，由于需要3D过渡场景和3D操作，3D库文件是必须的。

2. 由于等待时间和点击事件太多，用户触达留资页面花费时间太多，会造成用户过程中用户流失；

解决方案：

1. 资源素材再深度压缩；
2. 增加Loading页面，减少用户白屏等待时间；
3. 减少点击交互，多使用滑屏或者一屏滚动页面。

设计和制作效果预览：