5个步骤快速制作一个有15个互动的WebAR场景

今天教大家使用 Kivicube 零代码快速实现模型视频互动场景制作。

WebAR场景制作难度：☆

素材制作难度：☆☆☆

场景制作时长：10分23秒

一、 场景构思

在每个 AR 交互场景制作之前，我们都需要先思考：

● 场景整体的样子是什么?

● 交互视角模式是什么?

● 哪些素材要以3D模式呈现?

● 需要有哪些交互?

当然，若是商业项目的话，还需要考虑下:

● 使用WebAR的目的是什么?

● 需要达成什么目标或得到什么结果?

● 我有多少预算做这件事情?

二、 素材导入

构思好场景后，就可以登录www.kivicube.com开始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场景，之后我们也会发布更多教程助力大家实现快速开发！

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