移动端“淘宝造物节”3D绚酷空间 VR 场景应用视频教程

 

部分案例截图展示：

                                   

 

 

绚丽的3D空间、强劲的音乐节奏；
震撼的视觉表现、流畅的用户操控……

这样傲娇的作品表现形式，在 2016 年微信朋友圈刮起一阵又一阵 H5 旋风~~人们欣赏过后，不禁啧啧称奇！这样华丽丽的表现形式，让人惊叹之余更引发好奇：这是怎么做出来的？完全由前端去实现吗？要怎么做呢？

这里，让我们通过本套视频教程的学习，一步步揭开技术的迷团，探究前端实现的一切可能。

学前基础：掌握CSS定位、可以独立做出JavaScript拖拽。

教程包括:视频+源码

 

移动端“淘宝造物节”3D绚酷空间 VR 场景应用视频教程目录介绍：

第一节：transform 基本方法讲解

涉及知识点：

transform2D，transform3D，3D 硬件加速，rotate，translate，scale，skew，perspective，perspective-origin，transform-origin，transform-style，backface-visibility，IOS 下 3D 的 BUG 说明；

第二节：transform 获取和运动

涉及知识点：

transform 获取，matrix，封装 transform 的获取方法，自定义属性，tween；

第三节：造物节 loading 动画制作

涉及知识点：

animation 动画，3D 坐标计算，animationend 事件，图片 loading，加载进度监控；

第四节：造物节内容圆柱制作，加拖拽圆柱移动

涉及知识点：

正 N 边形公式推算，3D 圆柱制作，内圆柱的实现，移动端滑屏，滑屏圆柱移动；

第五节：完整版造物节整合重力加速的实现，类 VR 360° 全景制作

涉及知识点：

重力加速事件，重力减速兼容，利用重力加速配合3D制作全景场景；

第六节：练习讲解

涉及知识点：

重力感应的 3D 照片球。

 

 

移动端“淘宝造物节”3D绚酷空间 VR 场景应用视频教程截图展示：