Skip to main content
Version: 4.55.1

Wristwear Try-On

With the Wrist Binding Custom Component, Lens Developers can create unique AR Try-On experiences that are tracked onto the user's wrist. The Wristwear Try-On Template offers a quick way for you to get started building wrist-based Try-On experiences.

Template Walkthrough​

Once you open the Wristwear Try-On Template, you will see the Wrist Binding SceneObject where all of the content for this template is located. There are two children of the Wrist Binding SceneObject, one for the Left Wrist, and one for the Right Wrist. Each wrist contains the following SceneObjects:

  • The Watch [TOGGLE_ME] and Bracelet [TOGGLE_ME] Scene Objects are examples that demonstrate how to create your own Try-On AR experiences.
  • The Occluder SceneObject prevents the user from seeing the side of the wristwear 3D object that is not facing the camera.
  • The Shadow SceneObject adds a subtle dark gradient underneath the wristwear 3D object, making it feel more "grounded" on a user's wrist.

Adding Custom 3D Models​

If you would like to use your own 3D models in this template, you will need to remove the existing models and replace them with a custom mesh:

  1. Make sure that the Watch [TOGGLE_ME] and Bracelet [TOGGLE_ME] Scene Objects are disabled in the Objects panel.
  2. Import the custom 3D model.
  3. Drag and drop the mesh asset from the Resources Panel into the Objects Panel such that the new mesh is a child of either the Left Wrist or Right Wrist Scene Objects.
  4. With the new mesh selected, go to the Inspector Panel to adjust the object's Transform so that it is positioned similar to the example meshes provided the template.

Keep in mind to make sure that your custom meshes are oriented in the same way as the example meshes!

You can learn more about how to import 3D models into Lens Studio to see how you can bring in your own 3D models to use.

Adding Interactivity​

The Wristwear Try-On Template contains some added functionality to enhance the user's experience in AR.

Wrist Binding Events And API​

There are a number of events attached to the Wrist Binding Custom Component that provide extended functionality. This section will lay out how to properly set up a custom Script to use these Events.

The Wrist Binding Custom Component has an event called "onTrackingUpdate" that is triggered whenever the Wrist Binding CC detects a wrist. Two additional paramters are used to understand if the right or left wrist is what is being tracked.

Create a new Script with the following code:

//@input Component.ScriptComponent wristBinding;

script.wristBinding.onTrackingUpdate.add(function(left, right) {
    if (left) {
        print("Left wrist is found");
    } else if (right) {
        print("Right wrist is found);
    }
});

Add the Script to the scene and use the Inspector Panel to set the wristBinding input field to reference the Wrist Binding Custom Component that is also in the scene.

Along with the events, there are also functions that can be called using the Wrist Binding API. isTracking() can be used to check whether the left or right wrists (inclusive) are currently being tracked. isTrackingLeft() is used to check if the left wrist is being tracked. isTrackingRight() is used to check if the right wrist is being tracked.

Copy the following code into your script:

var event = script.createEvent("UpdateEvent");
event.bind(function (eventData) {
    if(wristTracking.isTracking()) {
        print('Either the left wrist, right wrist, or both wrists are being tracked')
    }
    if(wristTracking.isTrackingLeft()) {
        print('Only the left wrist is being tracked')
    }
    if(wristTracking.isTrackingRight()) {
        print('Only the right wrist is being tracked')
    }
});

Watch Hand Controller​

The WatchHandController.js Script brings the AR watch to life by simulating a traditional watch face. You can find this script attached to the WristWatch Scene Object in the Objects Panel.

The script takes two SceneObjects as an input, one named Hour Hand and the other named Minute Hand. Each Scene Object placed in the script will rotate and act based on the hour or minute hand of a twelve hour analog clock.

Adding Wrist Binding to Existing Projects​

Now that you have a solid grasp of the Wristwear Try-On template, you can also add the Wrist Binding Custom Component to your existing Lens Studio Projects. In this next section, you will learn how to set up Wrist Binding from scratch in a similar structure to the Wrist Try-On Template.

Collecting Assets​

In order to get started, you will need to have the following Assets for Wrist Binding;

  • The Wrist Binding Custom Component.
  • A Wrist Occluder asset.
  • A 3D model that will be used as wristwear.

The first two assets can be found in the Asset Library.

  1. Open a new or existing project in Lens Studio version 4.34.0 or greater.

  2. Left-click on the Asset Library button, located above the Objects panel.

  3. In the Asset Library Search Bar, type in "Wrist Binding". The "Wrist Binding Custom Component" should be visible in the Asset Library window. Click on Install.

  4. Type in "Wrist Occluder" in the Asset Library search bar and select Import on the "Wrist Occluder" asset.

With the Wrist Binding Custom Component and Wrist Occlusion component added, you will need a 3D model that will be tracked on the user's wrist. For the purposes of this guide, We will use the "Aqua Terrestrials Pack" by WRLD SPACE to showcase how to use existing 3D Content with the Wrist Binding Custom Component.

  1. In the Asset Library, type in "Aqua Terrestrials Pack" in the search bar.
  2. Left-Click on the Import button.

Setting up the Wrist Binding Custom Component​

With all the necessary assets imported into your Lens Studio project, you can start setting up the Wrist Binding Components. The first step is to create the scene hierarchy in the Objects panel, the second is populating the hierarchy with scripts and assets.

  1. Right click on the Camera object and select Create Scene Object.

  2. Rename this Scene Object Wrist Binding Custom Component.

  3. Right-click on the Wrist Binding Custom Component object and create two new Scene Objects by left-clicking on the Create Scene Object button.

  4. Rename one Scene Object Left Wrist and the other to Right Wrist.

With the hierarchy set up in the Objects panel, you can now start adding scripts and assets.

  1. Click on the Wrist Binding Custom Component Scene Object.
  2. In the Inspector panel click on + Add Component.
  3. Search for Wrist Binding and add it to your Scene Object.
  4. Click and drag the Left Wrist and Right Wrist Scene Objects in the Objects panel into their respective slots in the Inspector Panel.

  1. Click and drag the Wrist_Occluder__PLACE_UNDER_WRIST_BINDING_CC asset from the Resources Panel into the Objects Panel. You should now see two Wrist Occluders appear in the Scene Panel.
  2. Make the Left Wrist Occluder Scene Object a child of the Left Wrist Scene Object.
  3. Make the Right Wrist Occluder Scene Object a child of the Right Wrist Scene Object.
  4. In the Inspector Panel, double-check that the Position of the Left Wrist Occluder and Right Wrist Occluder Scene Objects are set to 0, 0, 0.
  5. Delete the now-empty Wrist_Occluder__PLACE_UNDER_WRIST_BINDING_CC Scene Object.

Now with the Wrist Binding Custom Component and Wrist Occlusion set up, you can now add the 3D content:

  1. Drag and drop the AquaTerrestrials__PLACE_IN_OBJECTS_PANEL asset from the Resources Panel into the Objects Panel. A few animated 3D objects should appear.
  2. In the Objects Panel, delete every animated 3D object except for the Donut object.
  3. Drag and drop the Donut Scene Object under the Left Wrist Scene Object.
  4. With the Donut Scene Object selected, in the Inspector Panel adjust the Donut's position, rotation, and scale so that it fits around the Left Wrist Occluder.
  5. Duplicate the Donut Scene Object by right-clicking on the Donut Scene Object and then left-clicking on "Duplicate".
  6. Drag and drop the duplicated Donut Scene Object under the Right Wrist Scene Object.

You have completed your first Wrist Binding Lens. Now that you have learned how the Wristwear template works and how to add Wrist Binding to your projects, you can now create your own Wristwear AR Try-On Lenses.

Best Practices​

The most common error encountered when working with Wrist Binding is when 3D models are not properly centered on the wrist. In practice, this issue appears as if the AR wristwear is orbiting around a wrist, rather than sitting nicely on the wrist. See below for an example of a improperly centered 3D object:

Thankfully, this is easily fixed. Make sure that any child of the Left Wrist or Right Wrist Scene Objects has its position set to 0, 0, 0. If your 3D model's origin is not at the center of the geometry this may need to be adjusted.

The Left Wrist or Right Wrist can have any transform. For the purposes of demonstration and visual clarity, the Wristwear Try On Template has the Left Wrist and Right Wrist Scene Objects adjusted along the X axis.

Wristwear Placement​

For optimal wristwear tracking and detection, it is recommended to place 3D models along the wrist up to 4 centimeters (cm). Detection and tracking will degrade as you move further down the wrist into the forearm. See below for optimal tracking and detection areas:

Wrist Occluder Fit​

An occluder is necessary for any AR wristwear. Without an occluder, the immersion of the AR experience will be broken. Included within the Wristwear Try-On Template is a generic occluder that works with most use-cases.

In order to make the occluder work properly with your custom AR wristwear item, adjust the scale of the occluder so that it fits as tight as possible to the interior of your 3D mesh.

What's Next?​

Now that you have learned about how to create your own Wristwear Try-On Lenses, take a look at some of the other AR Try-On examples.

Was this page helpful?
Yes
No