KIVICUBE教程|鼓浪屿webAR趣味地图

用户头像
成都/概念设计师/5年前/258浏览
KIVICUBE教程|鼓浪屿webAR趣味地图
用户头像
KIVICUBE

想要在景区地图中添加AR趣味互动吗?快看如何在kivicube中玩转AR交互!

01 场景构想

本场景预设交互为:扫描识别图进入场景后,播放背景音乐,文字引导查看景点,点击景点后出现该景点的模型和图文详情,点击关闭按钮关闭当前景点详情;关闭后可以再次点击景点查看详情;点击购票后跳转购票链接。

先放上体验二维码带大家感受一下(用微信扫描即可):





点击“立即体验”后,用摄像头识别下面这张识别图即可体验:



关注弥知科技微信公众号
回复“鼓浪屿”就能获得本次教程素材


02 素材导入

场景创建好之后,首先将素材包内的素材全部拖入。本次素材包括1个背景音乐、4个景区模型及6张两两对应的图片素材,关闭按钮以及两张引导点击的文字图片素材。





03 场景布置

接下来我们调整素材,将模型动画与其对应的图片素材摆放到恰当的位置,并调整其大小。
大家可以根据自己想要的效果进行位置以及旋转角度的设置。

此处需要注意素材高度的设置,本次教程中的文字与图片详情预设是出现在画面正中,因此需要将其高度设置在模型之上(也可以摆放到旁边),避免出现穿模的情况。




还需要注意的点是:出现景点详情后,可以通过点击“关闭”按钮关闭当前详情,因此关闭按钮的高度也需要设置在详情图片的上方。




04 交互事件设置

1、场景一开始所触发的事件

此场景开始时,需要有背景音乐的播放,同时只有地图模型和引导点击、购票的文字是显示的,因此需要控制背景音乐的播放,并对日光岩模型、日光岩描述、菽庄花园模型、菽庄花园描述、钢琴博物馆模型、钢琴博物馆描述进行隐藏,交互设置如下:

播放背景音乐:




素材的默认隐藏:




此处由于素材有点小多,因此页面显示不完整,大家在设置的时候一定要勾选上所有需要隐藏的素材~ 

2、景点的点击交互事件

接下来我们对点击景点出现景点模型及描述的交互事件进行设置。此处需要注意,由于点击地图的体验形式比点击景点名称文字更加直观,因此这里我们可以用到“空物体”这个工具来触发点击交互事件。




大家可以在公共素材的“3D工具”类型中选取“空物体”。





上图就是小编拖入到场景中的一个空物体模型,可以看出空物体是没有任何样式的,它的应用场景是:当我们想要给某一个区域增加交互设置,但又不想有其他的样式存在时,可以添加空物体,并对空物体添加点击交互事件。

因此在本场景中,我们依次给地图模型上的想要有点击交互事件的日光岩区域、菽庄花园区域、钢琴博物馆区域添加空物体,并将其调整到合适的大小和位置。




接下来我们对这三个空物体进行交互事件的设置。首先是钢琴博物馆,我们期望在点击钢琴博物馆空物体后显示钢琴博物馆模型、钢琴博物馆描述、钢琴博物馆实景、关闭按钮,设置如下:

大家在设置的时候一定要勾选上所有需要显示的素材~ 

菽庄花园的点击显示设置同上:点击菽庄花园空物体显示菽庄花园模型、菽庄花园实景、菽庄花园描述、关闭按钮。设置如下:




大家在设置的时候一定要勾选上所有需要显示的素材~ 最后是日光岩:点击日光岩空物体显示日光岩模型、日光岩实景、日光岩描述、关闭按钮。设置如下:




大家在设置的时候一定要勾选上所有需要显示的素材~ 

接下来我们期望点击关闭按钮隐藏景点的模型及图文详情。由于景点与景点的模型和图文详情不会同时显示,因此此处我们可以只添加一个关闭按钮,用这个“关闭按钮”隐藏所有的景点模型及图文详情。也就是点击“关闭按钮”隐藏钢琴博物馆模型、钢琴博物馆实景、钢琴博物馆描述、菽庄花园模型、菽庄花园实景、菽庄花园描述、日光岩模型、日光岩实景、日光岩描述。设置如下:



大家一定要勾选上所有的素材哦~
此处需要注意,关闭景点详情后“关闭按钮”也需要隐藏,因此需要勾选上“关闭按钮”。

3、购票网站的跳转设置

我们期望在点击“点击购票”的文字素材后,跳转购票网站,因此这里我们只需要在左侧的交互设置中选择“打开网页”,并添加购票网站的跳转,交互设置如下:




这样一个完整的场景就完成啦,大家快点击下方图片进入kivicube,动手实练吧~





0
阅读原文
|
举报
|
收藏
分享
相关推荐
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
网页电商背景矢量插画
互联网,互联网插画,商务,数据,项目,合作,精准,投放,网页插画,插画,大数据,智能,商业,网页,网页设计,插画设计,互联,未来,交流,沟通,渐变
B19【星空诗意&网页幽灵按钮】公司产品服务简介汇报
卡通女孩与网页表格3D渲染
卡通女孩与网页表格3D渲染
男生坐在网页面前办公矢量插画
网页页面矢量插画
网页背景
网页设计——纸杯蛋糕
网页图标
卡通风格网页页面3D渲染
三个青年站在网页周边矢量插画
女生坐在网页面前办公矢量插画
3D风格时尚电子商务设计元素
户外旅行飞机情侣假日出行
商务网页
浏览电脑网页的元素
三个青年正在装修网页矢量插画
互联网,互联网插画,商务,数据,项目,合作,网页插画,插画,大数据,智能,商业,网页,网页设计,插画设计,互联,未来,沟通,渐变,蓝色插画,商铺,覆盖,管理,项目管理,效率,提升,高效,关系,拓展,
男生和女生站在网页面前矢量扁平插画
一个男生和两个女生站在网页前面打招呼矢量
一个人拿着优惠券准备支付购物电商矢量插画
新年快乐送福网页矢量图banner
 网页背景
三位美女围着网页看信息矢量插画
你可能喜欢
相关收藏夹
大家都在看
登录注册