Skip to main content

AR Placement

ar placement demo

This tutorial will show you how to create AR placement effects using a template, replace relevant 3D objects, and use the tap and drag interactions.

Prepare Your Assets

Before we get started, you’ll want to prepare the 3D model and its texture that will be used in the effect. For this tutorial, we will use a simple sphere. You can download it here:

↓ sphere.zip

sphere in the assets panel

Open the Template

Start by opening Effect House and logging in with the account that you want to use to publish your effect. Go to Templates and select the AR Placement template.

ar placement template tutorial in effect house

Let the template project load and then save your project to a folder of your choice.

save the template tutorial project in effect house

For this tutorial, change the preview video source by going to Environment > Table in the Preview panel. This allows you see your model placed on a table surface.

change the preview media type to the table media

Swap Your Assets

After the assets have been imported, you can start using them by replacing the default scene object.

swap your assets in the hierarchy panel

Scale Your Model

Next make sure the scale of the model is correct.

The model must fit inside the bounding box. This can be done by either scaling the bounding box and the placing the model inside it, or by scaling the model itself.

The 3D model is scaled down here.

scale model

The bounding box is scaled up here. Ensure that the bounding box is not too big, otherwise it will interact with the AR Camera.

scale the bounding box up

Swapping the assets and adjusting the scale will result in a model similar to the following.

move_model_in_scene

Visual Scripting

There are four main groups in the Visual Scripting graph for this template, as shown below. Let’s dive into each one!

complete visual scripting graphs

Start with the one in the top-left.

hide bounding box visual scripting graph

This part of the Visual Scripting logic hides the bounding box and the bounding box edges on Start.

This hides the unnecessary meshes when the effect is loaded on your phone, as well as in the Preview panel. However, it can be seen in the Scene panel. This allows you to adjust and scale the model, making sure the model is within the bounding box.

adjust and scale the model in the scene

The next piece of logic forces the bounding box to always face the camera. All interactions on the object are registered inside the bounding box, so you must ensure that the bounding box always faces the camera even when the object is rotated away from the camera. You do not need to make any adjustments here.

bounding box will always face the user's camera visual scripting

The TapOrDrag subgraph takes input as the edges of the bounding box and the AR camera object. It then returns a Tap event if a tap is detected on the object, or returns a Drag event if object is being dragged by the user. You do not need to make any adjustments for the inputs of the subgraphs.

detect tap or drag event on the ar object visual scripting graph

If your imported model contains an animation and the effect needs to trigger a certain animation clip based on the interaction, see the following animation control logic. This logic is an example of how it can be used in the template. If your object does not need animation control, then you can remove these nodes.

animation control logic visual scripting subgraph