乐趣区

关于前端:5个步骤快速制作一个有15个互动的WebAR场景

明天教大家应用 Kivicube 零代码疾速实现模型视频互动场景制作。
WebAR 场景制作难度:☆
素材制作难度:☆☆☆
场景制作时长:10 分 23 秒

一、场景构思

在每个 AR 交互场景制作之前,咱们都须要先思考:
● 场景整体的样子是什么?
● 交互视角模式是什么?
● 哪些素材要以 3D 模式出现?
● 须要有哪些交互?

当然,若是商业我的项目的话,还须要思考下:
● 应用 WebAR 的目标是什么?
● 须要达成什么指标或失去什么后果?
● 我有多少估算做这件事件?

二、素材导入

构思好场景后,就能够登录 Kivucube AR 在线制作平台 开始 WebAR 的制作了~
为了能更快上手制作,这里筹备了一个适宜初学者的素材包,没有把整体交互设置的这么简单。

在上图中,咱们导入了视频一个,3D icon 按钮两只,模型动画一条,音乐两位,辨认图一张。

资料筹备好之后,就能够开始安排整体场景了!

三、场景安排

因为这个辨认图是一张 DM 单,因而交互视角模式是平行视角。咱们在场景中导入交互素材之后,为了让视频和模型互动动画摆放更正当,能够通过 3D 编辑器,可视化的调整地位、缩放大小。

将按钮的坐标地位设置对称,并摆放在辨认图上好看适合的地位上。
设置下方的“设置 ”面板,能够对互动素材进行疾速设置:比方我要将动画设置为“ 扫描到自动播放 ”的时候,我能够在左侧性能列表进行抉择,并抉择 触发事件与触发条件 。还能够简略的在疾速设置中勾选“ 自动播放模型动画”这两种操作能够达到同样的成果。

音频、视频、模型都有对应的事件疾速设置的性能哦~

四、事件交互

设置调整好整个互动场景素材的地位后,就能够开始设置事件交互了。应用 Kivicube 制作最突出的长处就是不会编程也齐全 ok,能够实现零代码可视化制作流。

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

这里咱们设置成一进入场景就播放主模型的动画,这个时候须要暗藏前面的视频,设置如图:

其中触发条件有很多种类型,大家能够每类都试试~

2. 主模型点击的事件

主模型的互动为: 一开始扫描到的时候,模型动画自动播放,点击视频播放按钮之后,模型动画进行,视频进行播放,点击按钮的时候,播放按钮声音。

因而这里咱们须要设置左侧的性能:“模型管制”“视频管制”和“音频管制”。将触发条件设置为如下图:

而后抉择对应要播放、要管制的内容互动就能够啦~

3. 点击“网站”按钮的事件

点击网站按钮关上网页,能够间接设置性能“关上网页”并且抉择好所触发此性能的触发条件,如下图:

模型动画的触发条件有很多种,因为“网站”icon 用的是 3D icon(不是立体 UI),是通过 3D 模型动画制作的 3D 模型,所以模型动画的每个状态都能够设置为触发条件。

4. 点击“播放”按钮的事件

这里的事件设置手法和思路和上述事件雷同,就不多做赘述了。

五、WebAR 体验

制作实现后点击保留,敞开编辑器。

在这里点击查看就能够看到辨认图与体验二维码了。

制作好之后,还要思考三个细节:

1. 分享设置

要认真填写分享图标、名称和形容。

2. 首页款式

上传首页的背景图、按钮图,以及思考是否须要上传自定义场景 logo 的图。

3. 其余设置

如灯光、高级设置、AR 设置等。


一个简略的模型视频互动 WebAR 场景就实现啦~ 欢送大家来收费注册应用 Kivicube 平台,应用低代码编辑器疾速创立出专属于你的 AR 场景,之后咱们也会公布更多教程助力大家实现疾速开发!

更多精彩请关注公众号【弥知科技】~

退出移动版