这是一个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，进行技术可行性分析，有以下两种方案实现方案：

方案一： 可以采用three.js库文件，进行给场景动态增加元素、维护游戏场景；
方案二： 使用Animate CC的createjs库制作H5，后面增加点击，根据点击数动态修改帧率进行场景切换。

确认的设计稿整体偏卡通风格，项目设计和制作时间很紧张，所以采用了第二套方案。

项目技术点

项目关键点在于性能优化，主要优化方向：

1、压缩项目资源文件，初次资源文件达到 10M+ –> 进行CC导出jpg、png分离，以及tingPng进行图片压缩，整体资源文件 1.3M；
2、修改默认导出的stage，进行支持stagegl GPU渲染。

其他主要功能包括如下：

1、微信授权；
2、雪花动效、场景微动效等；
3、font-spider实现字体压缩；
4、点击数、里程数、时钟、游戏音效等游戏控制管理；
4、游戏排行榜功能；
5、留资抽奖功能。

项目设计

这是一款名叫“为双十疯狂打CALL”的H5小游戏。产生背景：网易的互动H5小游戏刷爆朋友圈，刚好项目处于空档期。于是策划和设计找了一些游戏关卡，我这边进行技术实现。

项目技术：

整体项目采用canvas绘图展示+手指触摸检测+碰撞检测+输入控件，以及控制场景切换。

需要注意：canvas高倍像素屏幕图片展示和机型适配。

项目设计：

这是给一汽丰田做的用于朋友圈投放的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. 减少点击交互，多使用滑屏或者一屏滚动页面。

设计和制作效果预览：