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();
Download
0 formatsNo download links available.