Skip to main content
TikTok Effect House Platform Logo
Latest
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.

This guide provides a demo that uses AR Touch Gesture to create an interactive 3D object.

Follow along by downloading the following Effect House project:

↓ARPlacement.zip

Add an AR Camera

Add an AR camera by going to the Hierarchy panel and clicking the Add button [+] > Scene Object > Camera.

Then select the Camera object and in the Inspector panel, click + Add component > AR Capability > Device Tracker. Learn more about camera properties.

Tip
Tip

When creating an AR camera, remember to delete the default Camera if you don’t need it.

Configure Device Tracker

Select the AR Camera object and navigate to the Device Tracker component attached to the camera in the Inspector panel.

Set the Tracking mode of the Device Tracker component to World. This will ensure that all objects rendered by the AR camera will be tracked in the world. You can hold the device and move around freely.

Place a 3D Object in the World Space

Import a 3D Asset

Start by downloading the following alien assets file and importing them into Effect House.

Alien_Model.zip

Add an Imported 3D Asset to the Scene

Drag the alien model to the Hierarchy panel.

Set the Transform of the Object

First set up the scale of the alien to match the real-world unit.

Create an empty scene object by clicking the Add button [+]> Create empty in the Hierarchy panel. Rename the empty scene object to AR container. Set the scale of AR container to (0.05, 0.05, 0.05).

unaligned-image-0
unaligned-image-1

Then drag the alien model from the Assets panel to under AR container in the Hierarchy panel. Set the scale of the alien to (1.0, 1.0, 1.0).

Note
Note

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

Make a 3D Object Interactive

Next 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 interactive.

Set an Invisible Cube as the Container

In this case, the alien object has several child meshes. To avoid assigning the AR Touch Gesture component to each mesh, you can build a simple, interactive cube container to include the entire alien.

Add a Cube object by clicking the Add button [+] > 3D > Cube in the Hierarchy panel. The cube should be under AR container. You can then normalize the cube’s scale to (1.0, 1.0, 1.0).

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

Once the cube covers the alien, drag the alien object under the Cube object in the Hierarchy panel. The Cube object is now the parent.

Now you can make the cube invisible. Create a new unlit material and assign it to the cube. Go to the material’s Render State 0 property and deselect the Depth Write checkbox. The cube is now hidden!

Add AR Touch Gesture

Select the cube you 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 that it is interactive along with the alien.

Note
Note

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

AR Touch Gesture Properties

Allow Drag: Allow the use of the drag gesture to move the object.

Use the drag gesture by moving your fingertip over the surface without losing contact.

Scale Sensitivity: Control the sensitivity of the scale interaction. This can only be previewed on a phone.

Use the pinch gesture to scale the object by touching the surface with two fingertips and bring them together or apart.

Rotate Sensitivity: Control the sensitivity of rotation interaction. This can only be previewed on a phone.

Use the rotate gesture to rotate the object by touching the surface with two fingertips and moving them in a clockwise or counterclockwise direction.

Preview AR Effects on TikTok

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