Skip to main content
TikTok Effect House Platform Logo
Download
Log in
AR

AR Touch Gesture

Use AR Touch Gesture to make an object interactive. Use it to resize, rotate, or move an object you’ve created using hand gestures.

↓ ARPlacement.zip

Add an AR Camera object

Add an AR Camera object by going to the Hierarchy panel and clicking + Add object > AR Tracking > AR Camera. Doing so will automatically generate an AR camera equipped with the Device Tracker component.

See our AR Camera guide for more information on properties.

Configure Device Tracker of the AR Camera object

Select the AR Camera object and navigate to the Device Tracker component attached to this camera in the Inspector panel. Set the Tracking mode of the Device Tracker component to World. This will ensure that all the objects that are rendered by the AR camera will be tracked in the world. You will be able to hold the device and move around freely.

Place your 3D object in the world space

Import 3D assets

Download the Alien assets and import them into Effect House to get started.

↓ ARPlacement.zip

Add imported 3D assets to the scene

Drag the Alien Model to the Hierarchy panel.

Set up the Transform of the object

Let’s first set up the scale of the Alien to match the real-world unit. Create an empty scene object by clicking + Add object > Create empty. Let’s rename the empty scene object to AR container. Set up the scale of the AR container to (0.05, 0.05, 0.05).

unaligned-image-0
unaligned-image-1

Then drag the Alien model underneath the AR container and set the scale of the Alien to (1, 1, 1).

Note
Note

Since the scale ratio between the 3D scene of Effect House and real-world is 20:1. We create the AR container with the scale of 0.05 to match the unit in the real world.

Make your 3D objects interactable

Next, let’s make the object interactive so it can be resized, rotated, and moved using hand gestures. There is a built-in component called AR Touch Gesture. When you assign a component to the scene object that has Mesh Renderer or Skin Mesh Renderer, it will make the object interactable.

Set up an invisible interactable cube as the container

In our case, the alien object has several child meshes and we don’t want to assign the component to each mesh. Therefore, we can build a simple interactable cube container to cover the whole alien object.

We first add a cube by clicking + Add object > 3D > Cube underneath the AR container. We then normalize the cube scale to (1.0, 1.0, 1.0).

Tweak the Transform of the cube to make it cover the alien character.

After the cube covers the alien character, drag the alien object underneath the cube to make them parent in the Hierarchy panel.

Next, we need to make the cube invisible. Create a new unlit material and assign it to the cube. Go to the material Render State 0 settings, and change Blend Mode to Transparent, and tweak the color alpha to 0. The cube is now hidden!

Add an AR Touch Gesture component

Select the cube we just created and go to Inspector panel. Click + Add component > AR Capability > AR Touch Gesture. If you click and drag the cube, you will find the cube along with the alien is now interactive with the drag.

Tip
Tip

The AR Touch Gesture component will only work for scene objects with Mesh Renderer or Skin Mesh Renderer.

AR Touch Gesture properties

Enabled On: Check this box to make the attached object intractable with the on-screen gestures. Unchecking the box will make the interaction disabled.

You can use the pinch gesture to scale the object (can be only previewed on the phone), the drag gesture to move, and two fingers to rotate(can be only previewed on the phone).

Preview AR Effects on TikTok

To better preview AR effects, click on the Preview in TikTok button and scan the QR code to test your effect out. If you preview your effect on TikTok, you can use the pinch gesture to scale the object, drag gesture to move, and two fingers to rotate.