Today I will teach you to use Kivicube zero code to quickly realize the production of model video interactive scenes.
WebAR scene production difficulty: ☆
Material production difficulty: ☆☆☆
Scene production time: 10 minutes and 23 seconds
1. Scenario Conception
Before making each AR interactive scene, we need to think about:
● What does the scene look like overall?
● What is the interactive view mode?
● Which assets should be rendered in 3D?
● What interactions are required?
Of course, if it is a commercial project, you also need to consider:
● What is the purpose of using WebAR?
● What goals or results need to be achieved?
● How much budget do I have to do this?
2. Material import
After conceiving the scene, you can log in to www.kivicube.com to start making WebAR~
In order to get started with production faster, here is a material package suitable for beginners, which does not make the overall interaction setting so complicated.
In the picture above, we imported one video, two 3D icon buttons, one model animation, two music, and one recognition image.
After the materials are ready, you can start to arrange the overall scene!
3. Scene layout
Because this identification map is a DM sheet, the interactive view mode is a parallel view .
After we import interactive materials into the scene, in order to make the video and model interactive animation more reasonable, we can visually adjust the position and zoom size through the 3D editor.
Set the coordinate position of the button symmetrically, and place it in a beautiful and suitable position on the identification map.
In the "Settings" panel below the settings, you can quickly set up the interactive material:
比如我要将动画设置为“扫描到自动播放”的时候，我可以在左侧功能列表进行选择，并选择触发事件与触发条件。还可以简单的在快速设置中勾选“自动播放模型动画”这两种操作可以达到同样的效果。
音频、视频、模型都有对应的事件快速设置的功能哦~
四、 事件交互设置
调整好整个互动场景素材的位置后，就可以开始设置事件交互了。使用 Kivicube 制作最突出的优点就是不会编程也完全ok，可以实现零代码可视化制作流。
场景一开始所触发的事件
这里我们设置成一进入场景就播放主模型的动画，这个时候需要隐藏后面的视频，设置如图：
其中触发条件有很多种类型，大家可以每类都试试~
2.主模型点击的事件
主模型的互动为: 一开始扫描到的时候，模型动画自动播放，点击视频播放按钮之后，模型动画停止，视频进行播放，点击按钮的时候，播放按钮声音。
因此这里我们需要设置左侧的功能：“模型控制”“视频控制”和“音频控制”。
将触发条件设置为如下图：
然后选择对应要播放、要控制的内容互动就可以啦~
3.点击“网站”按钮的事件
点击网站按钮打开网页，可以直接设置功能“打开网页”并且选择好所触发此功能的触发条件，如下图：
模型动画的触发条件有很多种，由于“网站” icon 用的是 3D icon （不是平面 UI），是通过 3D 模型动画制作的3D模型，所以模型动画的每个状态都可以设置为触发条件。
4.点击“播放”按钮的事件
这里的事件设置手法和思路和上述事件相同，就不多做赘述了。
五、 WebAR体验
制作完成后点击保存，关闭编辑器。
在这里点击查看就可以看到识别图与体验二维码了。
制作好之后，还要考虑三个细节：
1. 分享设置
要仔细填写分享图标、名称和描述。
2. 首页样式
上传首页的背景图、按钮图，以及考虑是否需要上传自定义场景logo的图。
3. 其他设置
如灯光、高级设置、AR设置等。
一个简单的模型视频互动 WebAR 场景就完成啦~
欢迎大家来免费注册使用Kivicube平台，使用低代码编辑器快速创建出专属于你的AR场景，之后我们也会发布更多教程助力大家实现快速开发！
更多精彩请关注公众号【弥知科技】~