WebAR Model Video Interactive Scene Production

5 steps to author a scene including 15 interactive WebAR

WebAR Scene author difficulty value: ⭐️

Asset creation difficulty value: ⭐️⭐️⭐️

Scene author time: 10m23s

1. Scene Idea

Everything born in idea, so creators should think it out before authoring AR interactive scene:

a. What is the overall look of the scene?

b. What is the interactive perspective model?

c. Which asset should be presented in 3D? Can I find Kivisense to author 3D models or complex custom interactions?

d. What interactions are required?

Of course, if it is a commercial project, you still need to consider:

a. What’s the purpose to apply WebAR?

b. What purpose or results should be achieve?

c. How much budget I have to do this thing?

2. Asset Input

If you are ready, we could login www.kivicube.com to start author WebAR.

The purpose for this production is to help beginners making by themselves. Thus, we won’t make the overall interaction setting so complicated and less preparation asset.

In the above picture, we imported one video, two 3D icon buttons, one model animation, two music figures, and one tracking image.

3. Scene Layout

As this tracking image is a DM sheet, the interactive perspective mode is a parallel perspective.

After importing the interactive asset for the entire scene, we visually adjust the scene through the 3D editor, place the video and the model interactive animation reasonably, adjust the position, and zoom.

Carefully set the button coordinates to be symmetrical and place them in a suitable position on tracking image.

Please pay attention to the "Settings" panel below the settings. This is where you can quickly set up interactive asset.

For example, when I want to set the animation to "scan to auto play", I can select from the function list on the left, and select the trigger event and trigger condition. You can also simply check the "Auto play model animation" in the quick settings, these two operations can achieve the same effect. Audio, video, and model have the function of quick setting of corresponding events.

4. Event Interaction Settings

Event interaction is the most attractive authoring process, users can interact with events without programming.

Here, we set to play the animation as the main model after entering the scene. At this time, hide the following video and animation. The settings are shown in the figure:

There are many types of trigger conditions, and you can try each type yourself.

Main model click event

The interaction of the main model is: the model animation will automatically play when it is scanned. After clicking the video play button, the model animation will stop and the video will be played. When the button is clicked, the button sound will be played.

So here we need to set the functions on the left: "model control", "video control" and "audio control". Set the trigger condition as shown below:

Then select the corresponding content to be played and interact with the content to be controlled.

Click the website button event

Click the website button to open the web page, this directly sets the function "open web page" and selects the trigger condition that triggers this function, as shown in the figure below:

There are many trigger conditions for model animation. When setting the website icon, we use 3D icon (not a flat UI diagram), which is made by 3D model animation. Each state of the model animation can be set as a trigger condition.

Why there are so many events here? I won’t go into details. The setting methods and ideas are the same as the above-mentioned events, so let’s experience a practical exercise.