Skip to main content
TikTok Effect House Platform Logo
Download
เข้าสู่ระบบ
Template tutorials

Cloth try on

The Body Avatar Drive function allows you to track the position and rotation of joints on the body in 3D. You can track one full-body as well as multiple partial bodies.

In this tutorial we’ll show how to use the Body Avatar Drive component to create a try on effect. We’ll also explain how to apply a material to the model The following knowledge will be covered:

  • Adding cloth mesh & occluder mesh
  • Adding Body Avatar Drive
  • Applying Material to meshes

Preparing

Before we get started, download the assets to find the unfinished_ClothTryOn project and open it in Effect House.

↓ ClothTryOn.zip

You will see all the needed assets have been imported into the Assets panel.

Tip
Tip

You can import assets by dragging them to the Assets panel or clicking on + Add Asset > Import asset

Add 3D Models to Hierarchy panel

Drag jacketOccluder_REPLACEME, jacketMesh_REPLACEME, and occluder assets to the Hierarchy panel. You can automatically preview the model and adjust the transform to fit on the screen.

Tip
Tip

We have three sub meshes for occluders: hand, waist, and head.

Add Body Avatar Drive component

Go to the Hierarchy panel, click + Add object > AR tracking > Body Avatar Drive. This will create the functional entity along with the Body Avatar Drive component. Next, nest jacketOccluder_REPLACEME underneath Body avatar drive.

Repeat this process for jacketMesh_REPLACEME.

Right click Body Avatar Drive and Body Avatar Drive (1) and rename them to “Occluder” and “Cloth” depending on which asset is nested underneath it.

Tip
Tip

Each Body Avatar Drive will only trigger one rigging skeleton, so we create separate Body Avatar Drive for occluder and jacket meshes.

The Follow Body Position in the Inspector panel directs whether the entity will follow your body transform. And in this scenario, we check this parameter since we would love the cloth to follow the body transform.

If you don’t want the entity to match your body movements. You can uncheck this property and customize the entity’s transform.

Applying body and occluder material

We will first set up cloth material for Cloth. Go to the Inspector panel on the right, click on Material, and choose the corresponding material. We have many materials since we have different meshes like pocket, button, logo, body, button_front..etc

Tip
Tip

Feel free to import your customized textures and apply on the different cloth parts to design your own cloth.

Then we can apply the built-in occluder material for the occluder entities.

unaligned-image-0
unaligned-image-1

Customizing FBX Model

See Body Avatar Drive to learn more about customizing FBX model for the 3D character. In this guide, you will be able to download the BodyRigTemplate.fbx to use as a reference for keypoints and positions on the 3D body and also learn about best practice for naming conventions.