0编程基础设计师如何快速制作AR/VR互动

成都/平面设计师/5年前/677浏览
0编程基础设计师如何快速制作AR/VR互动
onlysam

AR(增强现实)以极富创意的表达方式,0编程基础的设计师们如何快速制作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哦!









5
Report
|
3
Share
相关推荐
Zoom In
Homepage recommendation
内容含视频
ip形象设计+表情包
ip形象设计+表情包
ip形象设计+表情包
ip形象设计+表情包
精选收藏夹
作品收藏夹
【原创】pubg 龙族收藏家
Homepage recommendation
内容含视频
KAILAS凯乐石|5000GT雪山羽绒服
Homepage recommendation
内容含视频
小米智能座舱萌宠
Homepage recommendation
评论
in to comment
Add emoji
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
You may like
IP形象——十二牛马
Homepage recommendation
相关收藏夹
ip形象设计+表情包
ip形象设计+表情包
ip形象设计+表情包
ip形象设计+表情包
精选收藏夹
作品收藏夹
企业展厅
企业展厅
企业展厅
企业展厅
精选收藏夹
作品收藏夹
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
IP形象及IP内容
精选收藏夹
作品收藏夹
IP形象——动物类
IP形象——动物类
IP形象——动物类
IP形象——动物类
精选收藏夹
作品收藏夹
文创
文创
文创
文创
精选收藏夹
作品收藏夹
一些小动物
一些小动物
一些小动物
一些小动物
精选收藏夹
作品收藏夹
大家都在看
Log in