恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
不会编程设计师也可以快速制作AR/VR互动
0.0°
2019-12-24 原创文章 教程 举报 3602 13 3 0

互联网时代AR(增强现实)以极富创意的表达方式,被越来越多的艺术工作者所接受。设计师们如何快速制作AR,把作品的多元化展现。越来越多的平台

互联网时代AR(增强现实)以极富创意的表达方式,被越来越多的艺术工作者所接受。

通过AR技术,让尺寸有限的画布无限的延伸,赋予艺术作品强大的故事性,从而达到刺激观众感官,提供沉浸式体验的目的。


为什么AR适用于艺术作品展示?


1、AR体验门槛更低,参与度更高

在当代,几乎人手一部的智能手机让每个观众都用机会通过一个APP即可开启AR体验!
而使用WebAR和小程序AR技术,我们甚至无需下载APP,通过微信等社交平台扫一扫即可获取体验,还能直接分享给朋友,作品的传播度随之也有了极大的提高!


2、AR使艺术作品更具创意

AR具有高度扩展性,艺术工作者们可以根据需要,选择性的“增强”其作品中的一些元素的渲染效果,调整虚拟素材的尺寸等等,以提高作品与真实环境的贴合度,达到更加逼真的沉浸效果。


3、成熟AR制作工具让艺术创作更容易


目前大部分设计师都是没有编程经验的,以前制作一个简单AR都是需要Unity的支持,现在越来越多的在线编辑平台给大家提供了许多更方便实用的工具。



KIVICUBE是国内首款免费WebXR在线制作平台,结合AR/VR/MR帮助用户不需要任何编程能力即可轻松制作出交互复杂的AR场景,还能通过微信直接体验并完成分享!

用户只需要将各类素材导入KIVICUBE即可在线完成场景编辑,更有大量的优质公共素材供用户挑选,帮助他们制作出更精细的WebAR场景!


--------------------------------------------------------------

下面来给大家做个简单示范

使用KIVICUBE十分钟制作一个美术馆达利经典画作《永恒的回忆》AR导览!

****使用到的工具包括:

GLTF模型效果在线查看工具Web3D viewer

WebXR在线制作平台KIVICUBE




  • 一、场景构思


在进入场景制作之前,首先需要发起一次灵魂拷问:

制作这个AR场景需要用到什么样的素材?

这个AR场景应该遵循怎样的交互逻辑?


  • 在这个场景中,素材我需要用到:画作的文字介绍、画作模型、解说视频以及触发AR场景的一些icon。一个清晰的交互逻辑,是制作好一个AR场景的重中之重!


  • 本次的交互逻辑我大概规划这样子↓↓↓↓↓↓





二、场景制作

在前期场景构思工作完成以后我们可以进入第二步,正式的场景的制作啦!!!

本次使用到的AR制作工具依然是WebXR在线制作平台KIVICUBE。

1、注册账号

登陆www.kivicube.com注册一个自己的账号

2、创建场景

1⃣️进入制作平台后,点击底部“➕”,新建一个项目,并填写相关信息

2⃣️项目创建完成后,我们需要在项目之下创建一个本次互动的具体场景。点击“+WebAR场景”,选择“场景类型”为“图像检测与跟踪”。

3⃣️填写场景信息,点击立即制作。需要注意“识别图”是指触发AR内容的图片,选择与模型或展示视频第一帧相同的图片作为识别图会有意想不到的效果哦~


三、开始制作

大家看着密密麻麻的网格,各种陌生的按钮是不是一脸蒙蔽?我一开始也一样呢,但是摸索下来发现,其实所有的功能KIVICUBE都安排的明明白白,只要来一丢丢耐心,跟着我的教程一起操作一定是没问题的~

Tips:如果觉得教程的解说太复杂,也可以在“二、场景制作”搭建完成后,直接按有色文字重点部分操作执行哦!


1、上传素材

先把之前准备好的素材包里的各种资料统统传上去备用。当然小伙伴们也可以选用KIVICUBE公共素材库的素材或上传自己觉得更优质的素材哦!在本次教程中我也用到了两个公用素材,分别是视频播放按钮(Play icon)和音频文件(Vlog:hypnotized),记得把他们也拖进去鸭!


2、搭建场景框架

这里的网格不用多介绍啦!就像ps里面的网格,就是个参考!网格中素材间的相对位置与真实环境中素材的位置相同,现在大家就把之前“交互逻辑”中规划的内容,像搭积木一样拖到网格之中并调整他们的相对位置!!

在搭建过程中,大家会频繁的使用到几个区域的按钮(如上图示):

红色区域三个按钮调整素材位置;

蓝色区域按钮撤销操作或删除素材;

黄色区域按钮精准定位素材,将其安放在指定的位置。


3、增加场景交互

在调整完所有素材的相对位置后,基本的场景框架就搭建好了。现在我们需要增加一些交互事件,让所有的素材按照“交互逻辑”脚本的设定运行。

1⃣️首先需要明确的是,在KIVICUBE中,所有的素材都是默认扫描即触发的,如果某些素材我们不想场景一开始就触发,我们需要选定素材后,点击右侧“对象设置”的“设置”按钮,将素材状态改为“不显示”

本次脚本中需要调整的包括文字介绍_达利、play icon、memory_解说视频、关闭按钮

2、脚本中“音乐控制”按钮可播放或暂停音乐。

需要设置:音频控制→“音乐控制”按钮被点击时→音乐VLOG:hypnotized 暂停播放

同时,视频播放时背景音乐不能播放。

所以还要设置:音频控制→“play icon”视频播放按钮被点击时→音乐VLOG:hypnotized 暂停播放

3、脚本中点击“查看详情”按钮可显示达利文字介绍与视频播放按钮。

所以需要点击:显示/隐藏→“查看详情”按钮被点击时→“达利介绍”和“play icon”显示。

4、接下来交互脚本中点击“play icon”,将出现“memory_解说视频”以及控制视频关闭的“关闭按钮”。

所以这里需要点击:视频控制→“play icon”按钮被点击时→“memory_解说视频”播放


然后再点击:显示/隐藏→“play icon”按钮被点击时→“关闭按钮”显示

5、接下来,用户点击“关闭按钮”后视频将停止并隐藏,“关闭按钮”也会隐藏。所以还要设置以下三个交互:

1⃣️“显示/隐藏”→“关闭按钮”被点击时→“memory_解说视频”隐藏

2⃣️“视频控制”→“关闭按钮”被点击时→“memory_解说视频”停止

3⃣️“显示/隐藏”→“关闭按钮”被点击时→“关闭按钮”隐藏


制作完成

经过刚刚的一番苦战,终于完成场景的制作啦!大家只需要点击右上角“分享”按钮,即可生成体验二维码与链接。大家可以扫下面的码体验我刚刚做的AR哦!


Powered by Froala Editor

更新:2019-12-24

收藏

13人已收藏

喜马拉雅的刀削面

AR/VR/MR爱好者

  • 6

    作品

  • 5

    粉丝

  • 17

    关注

  • WebAR识别类型科普|百事可乐星球大战AR集卡互动案例
  • Magic Leap 智能眼镜用户说明书
  • AR试戴效果图海报(集合2)
  • 0基础制作汉堡王WebAR趣味互动教程

    猜你喜欢

      2019-12-24 原创文章 教程 举报 3602 13 3 0

      不会编程设计师也可以快速制作AR/VR互动

      0.0°

      你确定要举报不会编程设计师也可以快速制作AR/VR互动

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2019年12月23日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      3
      13
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录