3D 360度旋转app 重力感应 用户交互

模仿淘宝实现的3D app效果:

虽然很风靡的淘宝3d广告宣传动画过去有段时间了，但是依然值得我们学习。

正好半年前客户想要我们提供这样的效果，同时也需要我们添加用户的交互效果，长短镜头的拉伸处理，角度处理等等客户天马行空的需求。

我想首先我们要做到的就是很熟悉3D 陀螺仪的相关知识 点击学习掌握 3D 陀螺仪 。 

那么在操作的过程中我本来想拉伸镜头是比较难处理的，但是真正相处解决方案之后，会发现并不难。以下以拉伸镜头移动处理代码来示例：

main . addAnimation(main .box, 0, 1, { x : 0, y : 0, z : 225 }, { x : 0, y : 0, z : 250 }, 19, " position ", " linear ");

main . addAnimation(main .box, 0, 1, { x : 0, y : 0, z : 250 }, { x : 0, y : 0, z : 275 }, 20, " position ", " linear ");

main . addAnimation(main .box, 0, 1, { x : 0, y : 0, z : 275 }, { x : 0, y : 0, z : 300 }, 21, " position ", " linear ");

setTimeout( function() {

app .router . goto(app .dpParameters .mpd_teaHouse);

app .newClickMpd =app .dpParameters .mpd_teaHouse;

}, 2000);

效果图：

其中点击钱包可以出现拉伸镜头等交互效果。同时提供给大家二维码，供大家体验。（这是所有平台第一次发出来，不保证能够永久体验）。

那么客户需求总是不同的，之后我们又陆续碰到了，客户想要我们拍一个全景照片，还要在真是的3D全景中添加交互。那么我们用到了cordova来实现：

下图实际效果简单实例：

至于3d css中角度处理，角度范围控制，拉伸处理，首先需要的就是我们的那核心的近万行代码仔细阅读。

3D 要求越来越高，我们的解决方案也不断更新，希望大家又更好的不同的方案，可以互相交流学习。