LOGO-200LOGO-120x35LOGO-200LOGO-200
  • 首页
  • BIM咨询
  • 培训课程
    • BIM全科高级综合班
      • BIM建筑与结构实战班
      • BIM机电管线实战班
      • BIM建筑装饰实战班
      • 全国BIM技能等级考试班
    • 室内设计就业高级综合班
    • 建筑园林景观表现班
    • 建筑参数化设计犀牛班
    • 工业产品设计犀牛高级班
    • 平面广告设计
    • 淘宝美工网页
    • AutoCAD专项
    • 网课
    • 作品
      • 室内设计作品
      • 建筑犀牛作品
      • 产品设计作品
      • 园林设计作品
      • 平面设计作品
  • 课件
    • 建筑
    • Auto CAD 课件
    • 室内设计课件
    • 建筑犀牛课件
    • SketchUp 课件
    • Lumion 课件
    • 产品设计课件
    • Keyshot
    • BIM课程课件
      • BIM建模结构课件
      • BIM机电课件
      • BIM装饰课件
    • 平面设计课件
      • PS课件
      • AI课件
      • CDR课件
      • ID课件
    • 更多设计经典和教程
      • –室内设计–
      • –建筑设计–
      • –平面设计–
      • –产品设计–
      • –网页设计–
      • –CG插画–
      • –设计动态–
    • BIM技术
      • –BIM资讯–
      • –BIM教程–
      • –BIM案例–
      • –BIM考证–
      • –BIM软件–
  • 资源
    • 软件
    • -材质贴图-
    • -3DMAX模型-
    • -Sketchup模型-
    • -Rhino模型-
    • -BIM模型-
    • -CAD图纸-
    • -室内设计-
    • -建筑规划-
    • -平面设计-
    • -景观园林-
  • 设计答人
  • 管理系统
  • 设计制作
  • 其他
    • 合作企业
    • 招聘求职
    • 最新动态
    • 我们的风采
    • 关于我们
    • 手机版
  • –常用素材包–
  • -材质贴图-
  • -3DMAX模型-
  • -Sketchup模型-
  • -Rhino模型-
  • -BIM模型-
  • -CAD图纸-
  • -室内设计-
  • -建筑规划-
  • -平面设计-
  • -景观园林-
【官网】一不小心,做出淘宝花了30万的720°VR全景H5…
2016年8月9日

025089579eb7cf0000018c1b522ee4

2016年8月1日:

——前阵子淘宝H5很火,朋友圈被刷了好几天屏。

——我知道,是造物节的《ZAO》!它不是一般的720度全景,有伪3D的VR效果。你能上下、左右滑动看到不同视角的画面,还能玩重力感应。对了那些动漫人物,动起来是分前后的。听说淘宝请外包团队,花了30万。

——哦?我刚做出一个这样的H5。

——Seriously?!

这是真的,我已经把这个H5做出来了。

0224f7579eb82d0000018c1b73d78b

▲淘宝造物节H5原版

02fee0579ebe850000018c1b834033

▲我做的致敬版H5

相似度:95%

事情来由是这样的,前两天H5制作工具iH5一下子放出3个全景组件,720度VR、重力感应、页面交互,各种功能1个不落。于是我就屁颠屁颠扒了淘宝造物节H5的素材开始做,结果竟然给我捣弄出来了……动态效果如下:

02a8e8579eb9270000018c1bd3b5e8

▲720度VR的效果图

你也要玩玩吗?过程简单得可怕,只有3步——

(1)准备全景素材

02f397579eb99d0000012e7ebbedd1

▲淘宝造物节H5的图片素材

A、1张首尾相连的全景图,当背景;

B、堆叠在全景图上的人或物件的PNG图,当前景。

为方便演示,这里直接扒淘宝造物节80张切好的图,拼合成不同的层。上面半透明的背景是20张切片合成的,前景大概照着淘宝H5的位置放,共分成3层(NO.1最靠前)。

(2)用Photoshop切图

02a2b3579eb9ce0000012e7e5449b7

▲用Photoshop处理素材

A、把不同层的图片各竖切成N份,然后导出;

B、导出时,越靠后层的图片宽度(W)要越大。

不会切图劳烦百度,我这里把1张背景、3张前景分别切20块导出为PNG——需要注意,切的时候要保证同层图片高度一致,这样导出的素材才有效!另外,切的份数越多,三维效果就越平滑,但图片也会随着变大容易卡。

(3)用iH5做全景运动

02f303579eba8b0000018c1be9317a

▲后台的交互设计界面

A、新建全景容器,下面放4个全景背景组;

B、把切好的分层切片分别拖到对应的全景背景组里。

比如你要放背景层图片,就保持全景背景组1选中,把20张切片拖到页面里就行。见证奇迹的时刻到了!以下几张图比较高能,是拖好图调试的效果,强烈建议仔细观赏:

0283bc579ebac00000012e7e625cf9

0283bc579ebac00000012e7e625cf9

▲分别调试水平转角、垂直仰角、观察点大小的效果

看完上面图片你应该也懂了,每个全景组就是把切片按顺序围成圆柱。

那刚才给前后层图片设不一样的宽度,用处是?宽度越小,围成圆的周长就越小,当观察点在圆的中心,就会感觉这一层离得越近、移动得越快——VR的立体效果就这么来的。

[注] 半径=周长/2π,相减可推测不同层的间距,并判断观察点的合适位置。

加全景和调试其实很快,30分钟不到,主要时间都花在处理淘宝那些素材了……扒人家原图重新拼合构图再切开很费事啊,还是原创好。如果你对点击弹出华晨宇的新歌介绍、H5上方飘着一个造物节LOGO、滑动页面画面会伸缩什么的感兴趣,直接去官网找教学视频吧。

因为模仿出来的H5太像了,怕侵权不敢发出来给大家看。我相信你可以的,自己试试吧……

微海报分享

Related posts

2020年8月6日

Illustrator快捷键


Read more
2020年6月26日

你要知道的书籍装帧设计与工艺


Read more
2020年6月23日

你要知道的关于平面设计的基本认知


Read more
2020年4月20日

3-3 课 Keyshot渲染实例(吉他)——材质图的应用


Read more

搜索本站

最新文章

  • 3dmax 2021 中文 2021年2月4日
  • Revit2020 中文 2020年12月3日
  • 广州地铁六号线香雪站BIM咨询案例 2020年9月15日
  • 图学会全国BIM技能等级考试 2020年9月14日
  • 国家职业资格培训鉴定实验基地BIM证书 2020年9月14日
  • 绿色建筑产业联盟BIM证书考证 2020年9月14日
  • 2019全球建筑学院排名TOP 20 2020年9月11日
  • 东莞某停车场改建项目 2020年9月9日

标签云

3DMax软件下载 AutoCAD软件下载 BIM技术 BIM技术经典 BIM教程 BIM软件下载 CG插画 CG插画经典 UI设计 UI设计教程 UI设计素材 Vray软件下载 产品设计作业 产品设计作品 全模型建筑场景 合作企业求才 园林设计作业 地毯 室内家具模型 室内整体模型 室内设计作品 室内设计素材 小砖块 平面设计 平面设计作业 平面设计教程 平面设计经典 平面软件下载 建筑园林素材 建筑犀牛作业 建筑设计经典 我们的风采 技巧 摄影 摄影,技巧 效果图 教程 最新动态 砖墙贴图 网页设计教程 网页设计经典 苹果MAC软件下载 设计动态 设计动态经典 高清贴图

严老师电话|微信|

手机:18902259698

梁老师电话和微信

手机:18902250768

QQ咨询

严老师 QQ 275043888

QQ联系咨询课程

晶网设计培训是广州建筑室内设计培训知名机构,拥有专业建筑犀牛课程,BIM培训考证,室内设计学习,园林景观学习课程等完善的广州室内设计培训教学机构。

地址:广州天河北路高科大厦A座3001室(地铁三号线华师站B 出口,前行20米左转就入A座大堂, 3号电梯上30楼)联系电话 020-85210826

©2018 晶网设计 粤ICP备10225019号-1
  • BIM咨询
  • 建筑动画
  • 园林景观
  • 设计方案效果图
  • 各类建模
shejizhizuo
  • BIM咨询
  • 建筑动画
  • 园林景观
  • 设计方案效果图
  • 各类建模