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:
Add an AR Camera
Add an AR Camera object by clicking + > AR Tracking > AR Camera in the Hierarchy panel. The Device Tracker component will automatically come equipped with the AR camera.
Learn more about AR Camera properties.
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.
Add an Imported 3D Asset to the Scene
Drag the alien model to the Hierarchy panel.
Set the Transform of the Object
Starting in Effect House v2.1.0, the default measurement of scale changed from meters to centimeters. This unit change better aligns the scale in the 3D scene with the scale in the preview. Previously, a 3D object was scaled down by 100x. Now you can easily adjust the object’s position and rotation to your liking!
First set up the scale of the alien to match the real-world unit.
Create an empty scene object by clicking + > 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).
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, 1, 1).
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 + > 3D > Cube in the Hierarchy panel. The cube should be under the 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, change Blend Mode to Transparent, and set the color alpha to 0. 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.
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.
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 fingers 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.
