Spark AR — Dynamic instantiation (4)

This article has participated in the Denver Nuggets Creators Camp 3 “More Productive writing” track, see details: Digg project | creators Camp 3 ongoing, “write” personal impact.

Spark AR is Facebook’s free AR creation platform that enables users to create interactive AR experiences for Facebook and Instagram. More than 400,000 creators in 190 countries have used Spark AR to create their own AR creations

Since the software requires no coding knowledge to use, anyone can now lead the world by creating the next crazy viral Instagram AR effects with little experience in the AR world.

Specialized AR filter designers can cost anywhere from $1,000 to $30,000.

Adjust the parent object of an object (reorder)

Dynamically instantiated objects can be readjusted from parent objects at run time using the addChild(), removecChild (), and removeFromParent() methods exposed by the SceneModule and SceneObjectBase apis.

Dynamic objects that do not have a parent object in the scene panel will not be rendered until they are added back to the child object of the object in the scene.

Deleting a dynamic object from its parent does not automatically process it. The destruction of dynamic objects must be done by explicitly calling the destroy() method.

In the following example, in the Scene panel, when the plane is tapped, the plane is readjusted between the two groups as the parent object. When the plane is pressed for a long time, the dynamic plane is removed from its parent plane, regardless of which of the two groups it is under.

// Load in the required modules
const Scene = require('Scene');
              
// Enable the Touch Gestures > Tap Gesture capability 
// in the project's properties
const TouchGestures = require('TouchGestures');

// Enables async/await in JS [part 1]
(async function() {

    // Locate the focal distant object in the Scene
    // Then dynamically instantiate two objects to use as groups and a plane
    const [focalDistance, groupOne, groupTwo, dynamicPlane] = await Promise.all([
        Scene.root.findFirst('Focal Distance'),

        Scene.create("SceneObject", {
            "name": "group0",
        }),

        Scene.create("SceneObject", {
            "name": "group1",
        }),

        Scene.create("Plane", {
            "name": "Dynamic Plane"."width": 0.1."height": 0.1."y": -0.2."hidden": false,})]);// Add the groups as children of the Focal Distance object in the Scene panel, then add the plane as a child of the first group
    focalDistance.addChild(groupOne);
    focalDistance.addChild(groupTwo);
    groupOne.addChild(dynamicPlane);


    // Create a variable to track which of the two groups the plane belongs to
    let isAChildOfGroupOne = true;

    // Reparent the dynamic plane between the two groups when the plane is tapped
    TouchGestures.onTap(dynamicPlane).subscribe(() = > {
        if(isAChildOfGroupOne){
            groupTwo.addChild(dynamicPlane);
            isAChildOfGroupOne = false;
        } else {
            groupOne.addChild(dynamicPlane);
            isAChildOfGroupOne = true; }});// Remove the dynamic plane from its parent when the plane is long pressed
    TouchGestures.onLongPress(dynamicPlane).subscribe(() = > {
        dynamicPlane.removeFromParent();
    });
              
// Enables async/await in JS [part 2]}) ();Copy the code