Effects / Spark AR "ERROR: undefined is not a function" - object

Question

I'm trying to make a JS effect on Spark AR with a code and Native UI and also face mesh.
The effect have bottons to choose the effect, one of them have a face mesh where the texture is not recognize and the another one have a simple texture.
----- My code to script of two objects / two bottons:
const Materials = require('Materials');
const Scene = require('Scene');
const NativeUI = require('NativeUI');
const Textures = require('Textures');
const plane = Scene.root.find('plane0');
const index = 0;
const configuration = {
selectedIndex: index,
items: [
{image_texture: Textures.get('N1')},
{image_texture: Textures.get('N2')},
],
mats: [
{material: Materials.get("N1")},
{material: Materials.get("N2")},
]
};
const picker = NativeUI.picker;
picker.configure(configuration);
picker.visible = true;
picker.selectedIndex.monitor().subscribe(function(val) {
plane.material = configuration.mats[val.newValue].material;
;
});
----- The error message that shows when I open Spark AR Studio:
ERROR: undefined is not a function
{ "line": 6,
<br> "column": 30,
<br> "sourceURL": "scrip2obj.js"
}
I would like to know... what can I do to make this run and make the face mesh shows in the effect?

Answer 1

Starting from v85 of Spark AR Studio the current JavaScript APIs are deprecated in favor of asynchronous APIs.
This means some APIs will be deprecated and will need to be replaced in your projects. When creating new projects, new APIs should be used instead.
You can learn more about it here
Scripting Javascript Promise In Spark AR For Beginners
Try the following code to implement Native UI Picker
const Materials = require('Materials');
const NativeUI = require('NativeUI');
const Textures = require('Textures');
const Scene = require('Scene');
(async function () { // Enables async/await in JS [part 1]
// To access scene objects
const [plane0, n1, n2, n1Material] = await Promise.all([
Scene.root.findFirst('plane0'),
Textures.findFirst('N1'),
Textures.findFirst('N2'),
Materials.findFirst("N1"),
]);
const index = 0;
const configuration = {
selectedIndex: index,
items: [
{ image_texture: n1 },
{ image_texture: n2 },
]
};
const picker = NativeUI.picker;
picker.configure(configuration);
picker.visible = true;
picker.selectedIndex.monitor().subscribe(function (val) {
plane.material = configuration.mats[val.newValue].material;
});
})(); // Enables async/await in JS [part 2]