NativeUI Slider | Spark AR Studio

This video explores how to implement the NativeUI Slider for Instagram to adjust the opacity of a model or mesh based off material values.

Spark AR Javascript Slider Script:

const NUI = require("NativeUI");
const M = require('Materials');
const Persistence = require('Persistence');
const Time = require('Time');

// Slider
var lastSliderValue = 01;
var persistenceTimer = null;
const mat = M.get('Original');

function saveUserData(sliderData) {
persistenceTimer = null;
Persistence.userScope.set('sliderdata', sliderData);
}

NUI.slider.value.monitor({fireOnInitialValue: false}).subscribe(function(val) {
lastSliderValue = val.newValue;

if (!persistenceTimer) {
let sliderData = { 'sliderVal': lastSliderValue };
persistenceTimer = Time.setTimeout(saveUserData.bind(null, sliderData), 200);
}

mat.opacity = lastSliderValue;
});

function configureSlider(){
Persistence.userScope.get('sliderdata')
.then(function(result) {
NUI.slider.value = result.sliderVal;
})
.catch(function() {
NUI.slider.value = 1;
});
}

function init()
{
configureSlider();
NUI.slider.visible = true;
}

init();

Тэги:

#Catalyst #Tutorials

Скачать видео