百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 运营笔记 > 正文

完全攻略:30分钟做出淘宝720°VR全景H5

ann3311 2025-07-21 12:33 6 浏览 0 评论

2016年7月中旬:

——这阵子淘宝H5很火,朋友圈被刷了好几天屏。这不是一般的720度全景,它有伪3D的VR效果!你能上下、左右滑动看到不同视角的画面,还能玩重力感应。对了那些动漫人物,动起来是分前后的!听说淘宝请外包团队,花了30万。

——哦?以后不用了。

▲淘宝H5原版

2个礼拜后:

7月28日上午,iH5.cn主页悄悄更新系统消息:“全景功能上线,可制作720VR浏览效果”。一下放出3个全景组件,720度VR、重力感应、页面交互,各种功能1个不落!(在此感谢原作者Shrek公开了核心源码)

你是说我们不花一分钱能做出淘宝的H5?

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

▲淘宝H5致敬版

相似度:95%

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

(1)准备全景素材

▲淘宝H5的图片

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

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

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

(2)用Photoshop切图

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

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

不会切图劳烦百度,我这里把1张背景、3张前景分别切20块导出为PNG。切的份数越多,三维效果就越平滑,但图片也会随着变大容易卡。

(3)用iH5做全景运动

▲用iH5设置交互

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

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

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

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

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

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

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

如果你对点击弹出华晨宇的新歌介绍、H5上方飘着一个造物节LOGO、滑动页面画面会伸缩什么的感兴趣,直接去官网找教学视频吧。

加全景和调试其实很快,30分钟不到,主要时间都花在处理淘宝那些素材了……扒人家原图重新拼合构图再切开很费事啊,还是原创好。

因为模仿出来的H5太像了,为避免侵权不敢发出来给大家看。你自己试试吧?

相关推荐

电商客服外包是什么意思?客服外包的工作内容是什么?

  电商客服外包指的是第三方服务公司,就是为电商网店提供优质专客服人员,通过收取少量服务费用让网店得到专业、高质量的服务。那么电商客服外包到底是干什么的?小编通过以下几个方面为大家讲解一下外包客服的工...

网店客服外包大概什么价位?(网店客服外包在哪里接活)

  为了能够更好的做好网店客服工作,一些卖家也会选择将客服服务外包出去,可是对于网店客服外包价位是多少呢?我马上就来给各位分享。  一、售前客服  售前客服价格为800元起,有按咨询量收费的方式也有专...

中差评外包团队靠谱吗?(抖音催好评处理中差评外包)

中差评外包团队有很多,质量规模大小不同,如何选择效率高又靠谱的团队呢?中差评外包团队选择关键是要有服务意识,顾客就是上帝的心理。没有一个消费的顾客会感觉自己错了,没有人会心甘情愿的承认自己的错误哦,...

完全攻略:30分钟做出淘宝720°VR全景H5

2016年7月中旬:——这阵子淘宝H5很火,朋友圈被刷了好几天屏。这不是一般的720度全景,它有伪3D的VR效果!你能上下、左右滑动看到不同视角的画面,还能玩重力感应。对了那些动漫人物,动起来是分前后...

碰到一个做兼职设计的骗子,希望大家以后不要上当

我们是做机械成套的,上个月因为要到客户那边测绘,感觉公司的绘图员对自动化不熟悉,就想从网上招一个,结果就看到这个人的介绍,说的很专业,后期交流过程中也感觉还可以,毕竟我们公司两个老总都是销售出身,对技...

天猫客服中心外包价格是怎么算的?贵不贵?

  现在很多天猫的电商企业为了节省精力运营店铺,也为了降低店铺的风险,都纷纷选择和天猫客服中心外包合作。这就让一些处于观望状态的店主产生了很多疑问,天猫客服中心外包价格是怎么算的?贵不贵?  所以小编...

学习C4D如何接私单/私活?这4大途径你须知道的事

今天这篇文章就给大家分享一篇关于接单、接项目的那些事,有很多小伙伴在刚学习一段时间后很想接到单子。在哪里能接到单子?总看到别人能接到单子?为什么我接不到了。其实这个行业单子并不少,我经常都接到有人问我...

选择电商客服外包必须知道这几点(选择电商客服外包必须知道这几点的内容)

随着我国电子商务交易量的不断增加,各平台的运营也逐步发展。无论是电子商务企业还是个体店都需要专业的客户服务,为了避免招聘和培训的麻烦,很多人只能选择可靠的电商客服外包公司。那么选择专业正规的电商客服外...

在线客服外包是什么?在线文字客服每个月薪资多少钱?

一,上海梦古云客服,统计了目前流行的在线客服,文字客服,微信客服,淘宝客服,抖音客服的薪资,得出如下行业的规律:售后客服的行业平均薪资:...

淘宝客服外包团队管理的方法分享(要做淘宝客服外包业务怎么操作)

  其实还是有很多人,包括一些中小型的卖家会认为淘宝客服其实就是回答客人问题的,什么人都可以胜任,甚至觉得很简单,这样的话就会导致他们在带客服团队的时候疏于对客服的管理,才会导致有后续的那么多客服态度...

淘宝客服外包平台是做什么的?到底靠不靠谱?

1.如果公司企业全部都自己招聘客服人员的话,这些人全部都招聘进来了之后,每个人有不同的性格,每个人有不同的体系,每个人有不同的工作方式方法,所以管理起来不容易,然后这些人还并不一定都掌握了客服的技巧,...

如何关闭淘宝免密支付功能(怎么关掉淘宝免密支付)

关闭淘宝的免密支付功能可以通过淘宝APP或支付宝APP操作,具体步骤如下:方法一:在淘宝APP内关闭进入设置页面打开淘宝APP,点击右下角「我的淘宝」,再点击右上角的齿轮状「设置」图标,...

无法退款!罗马仕淘宝商家余额不足,淘宝客服:正催缴保证金

罗马仕召回充电宝退款卡死,淘宝商家账户没钱退不了款,消费者卡在中间干着急。7月初这事闹大了,品牌方资金链崩盘,平台兜底机制彻底失效。消费者寄回问题充电宝个把月了,退款页面始终显示“商家余额不足”。淘宝...

美团和淘宝今天又打起来了,把全国网友都看傻了

今天点外卖没薅羊毛的亏大了!美团饿了么突然发疯撒钱,免费奶茶券像不要钱似的砸,服务器都挤崩了。这哪是促销,简直是资本肉搏战,消费者捡漏也得悠着点。下午朋友圈直接刷屏,全在晒零元奶茶订单。蜜雪冰城门口队...

罗马仕淘宝、拼多多官方店铺已关闭,此前宣布停工停产6个月

罗马仕彻底凉了?员工拿1840元在深圳活不下去,充电宝召回变退货无门。7月7日官宣停工半年,深圳打工人集体傻眼,49万台问题产品压垮十年老厂。公告说首月正常发工资,第二个月按深圳最低工资2360元的8...

取消回复欢迎 发表评论: