How To Cycle Through Objects, Materials, and Textures In Lens Studio

Cycling through objects and images is a common technique in Lens Studio, especially when you want to give your lens users a variety of options to choose from. In this guide, we’ll see how to set this up for multiple instances, making your lens more interactive.

Cycling Through Scene Objects in Lens Studio

First, import the assets you want to cycle through into the Assets panel. Then, add them to the Scene Hierarchy. I have added a box, a cone, and a sphere.

In the Assets panel, click the plus (+) button and search for “JavaScript File“ to add a script. Remember to give the script a name.

Create an empty Scene Object in the Scene Hierarchy and drag the script into the objects Inspector Panel.

Double-tap on the script to open it. In the script, declare an input array.

//@input  SceneObject[] shapes;

This will give you fields to add your objects to in the Inspector panel. Add the objects you want to cycle through.

Now, in the script, initialize a count variable that will keep track of the objects you have. Set it to zero for the first value. Then, make the first object visible by setting the enabled property to true.

var count = 0; 
script.shapes[count].enabled = true;

Remember to turn off the visibility of the objects in the Scene Hierarchy.

At this point, you will need to add an event to trigger the cycling. In this article, I will be using a Tap Event. You can get the code for the Tap Event and other Lens Studio Events from the documentation.

This is what we will be needing:

function onTapped(eventData)
{

}

var event = script.createEvent("TapEvent");
event.bind(onTapped);

We are trying to implement a system where, when the screen is tapped, the current shape is hidden, the next shape is shown, and if the last shape is reached, it loops back to the first shape.
To do that, we set the current shape’s enabled property to false and increase the count by one. Then, we return the count to zero if we reach the end of the array and set the enabled property of the new shape to true.

function onTapped(eventData) 
{
    script.glass[count].enabled = false;

    count ++;

    if(count >= script.glass.length)
    {
        count = 0;
    }

    script.glass[count].enabled = true;
}
var event = script.createEvent("TapEvent");
event.bind(onTapped);

Script

Your final script should look like this:

//@input SceneObject[] shapes;

// Start with the first shape active
var count = 0;
script.shapes[count].enabled = true;

// Function to handle screen taps
function onTapped(eventData) {
    // Disble the current shape
    script.shapes[count].enabled = false;

    // Move to the next shape
    count++;

    // Reset to the first shape if we reach the end
    if (count >= script.shapes.length) 
    {
        count = 0;
    }

    // Enable the new shape
    script.shapes[count].enabled = true;
}
var event = script.createEvent("TapEvent");
event.bind(onTapped);

Cycling Through Materials of Images in Lens Studio

To cycle through materials of images is pretty much the same process as that of Scene Objects.

Create your script and add the code below:

//@input Component.Image Image;           //access the image component of the object
//@input Asset.Material[] materials;      //declare an input array of materials

//start with the first material
var count = 0;
script.Image.mainMaterial = script.materials[count];


// change materials when tapped
function onTapped(eventData)
{
    count ++;

    if(count >= script.materials.length)
    {
        count = 0;
    }

    script.Image.mainMaterial = script.materials[count];
}

var event = script.createEvent("TapEvent");
event.bind(onTapped);

Cycling Through Materials of Meshes in Lens Studio

If you want to cycle through the material of a mesh instead, this is what to do:

//@input Component.BaseMeshVisual meshVisual;           //access the mesh visual of the object
//@input Asset.Material[] materials;                    //declare an input array of materials

//start with the first material
var count = 0;
script.meshVisual.mainMaterial = script.materials[count];

// change materials when tapped
function onTapped(eventData)
{
    count ++;

    if(count >= script.materials.length)
    {
        count = 0;
    }
    script.meshVisual.mainMaterial = script.materials[count];
}

var event = script.createEvent("TapEvent");
event.bind(onTapped);

Cycling Through Textures in Lens Studio

Say you have an image on the screen and you want to change the texture by tapping on the screen, you just need to access the base texture of the image component.

Put this into your script:

//@input Component.Image image          //access the mesh visual of the object
//@input Asset.Texture[] textures;      //declare an input array of materials

//start with the first texture
var count = 0;
script.image.mainPass.baseTex = script.textures[count];

// change texture when tapped
function onTapped(eventData)
{   
     count ++;

    if(count >= script.textures.length)
    {
        count = 0;
    }
    script.image.mainPass.baseTex = script.textures[count];
}

var event = script.createEvent("TapEvent");
event.bind(onTapped);

Note: Ensure you save your scripts to see the effects of your changes.

By following the steps outlined in this guide, you can effectively cycle through different objects in your Lens.