淘宝造物节H5什么意思?想要在H5上实现真实3D展示怎么做?

发布时间:2018/8/3 9:21:42

离淘宝造物节开节的时间已经不多了,各商家都在忙碌的准备中,淘宝造物节有个H5空间,很多人不明白什么意思?更不知道想要在H5上实现真实3D展示要怎么做?下面我们一起来看下!

全景图演示图,该H5与之原理相似

  这支H5的全景图

  我们通过画面的缓慢播放发现,原来背景图是一条条的,被切割了!

  尤其是当你进入场景内,把画面放大时,会发现一条条接缝,这就让我们更确信了一个判断,而当通过后台把元素罗列出来时,就一目了然了!

  不仅仅是主背景,就连其它画面元素也都被切割成了类似样式,这又是为什么呐?

  其实这就是CSS位置变换命令的一个巧妙用法,开发者将所有的图等距离大小切割成了一条条,并把它们围成一个圆形,这样在体验上就创造了一个空间。利用一些算法和简单技术就创造了比较丰富的视觉表现,这真是非常聪明的用法!

  H5空间原理的示意图

  但问题又来了!一般情况下,想要在H5上实现真实3D展示,需要借助webGL这种编辑方式,而想绕过这个技术壁垒的话,常规有以下三种方式: (视频、div+css、canvas)

  视频、div+css、canvas

  视频做成3D糊下群众,这个很好理解。但我们通常又会认为canvas相比div+css是更好的解决办法,并且效率更高。可以处理数量更大的素材,并且不耗费请求数量,那么为什么开发者会选择div+css呐?

 

相关专题: 2017淘宝造物节玩法攻略 | 淘宝造物节2017门票 | 2017淘宝造物节报名攻略 |

上一篇:京东全球购怎么开店?开店流程及费用介绍

下一篇:2018天猫双十一招商规则出炉:报名时间及报名入口

推荐货源
微商厂家直供货源
推荐资讯
最新资讯
分类栏目
新手开店 开店经验 淘宝推广
进货技巧 淘宝故事 网店装修
图片处理 网购技巧 行业新闻
创业项目 淘宝考试 品牌排行
微信开店 品牌百科 微商货源