├── NativeUI-Picker-[Basic] -v85 ├── textures │ ├── 1.png │ ├── 2.png │ └── 3.png ├── NativeUI-Picker-v85.arproj └── scripts │ ├── tsconfig.json │ └── script.js ├── NativeUI-Picker-[Animation]-v85 ├── textures │ ├── 1.png │ ├── 2.png │ └── 3.png ├── NativeUI-Picker-[Animation]-v85.arproj └── scripts │ ├── tsconfig.json │ └── script.js ├── NativeUI-Picker-[Facemesh]-v85 ├── textures │ ├── 1.png │ ├── 2.png │ └── 3.png ├── NativeUI-Picker-[Facemesh]-v85.arproj └── scripts │ ├── tsconfig.json │ └── script.js ├── NativeUI-Picker-[Objects]-v85 ├── textures │ ├── 1.png │ ├── 2.png │ └── 3.png ├── NativeUI-Picker-[Objects]-v85.arproj └── scripts │ └── script.js ├── NativeUI-Picker-[3D-Objects]-v85 ├── textures │ ├── 1.png │ ├── 2.png │ └── 3.png ├── NativeUI-Picker-[3D-Objects]-v85.arproj ├── scripts │ ├── tsconfig.json │ └── script.js └── objects │ └── Cube │ └── Cube.gltf ├── NativeUI-Picker-[Stacked Pickers] ├── textures │ ├── 1.png │ ├── 2.png │ └── 3.png ├── NativeUI-Picker-[Stacked Pickers].arproj └── scripts │ ├── tsconfig.json │ └── script.js ├── NativeUI-Picker-[Hide and Show] -v87 ├── textures │ ├── 1.png │ └── 2.png ├── NativeUI-Picker-[Hide and Show] -v87.arproj └── scripts │ └── script.js ├── NativeUI-Picker-[Patch Editor]-v85 ├── textures │ ├── 1.png │ ├── 2.png │ └── 3.png ├── NativeUI-Picker-[Patch Editor]-v85.arproj └── scripts │ └── script.js ├── NativeUI-Picker-[Selected Value]-v85 ├── textures │ ├── 1.png │ ├── 2.png │ └── 3.png ├── NativeUI-Picker-[Selected Value]-v85.arproj └── scripts │ ├── tsconfig.json │ └── script.js └── README.md /NativeUI-Picker-[Basic] -v85/textures/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Basic] -v85/textures/1.png -------------------------------------------------------------------------------- /NativeUI-Picker-[Basic] -v85/textures/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Basic] -v85/textures/2.png -------------------------------------------------------------------------------- /NativeUI-Picker-[Basic] -v85/textures/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Basic] -v85/textures/3.png -------------------------------------------------------------------------------- /NativeUI-Picker-[Animation]-v85/textures/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Animation]-v85/textures/1.png -------------------------------------------------------------------------------- /NativeUI-Picker-[Animation]-v85/textures/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Animation]-v85/textures/2.png -------------------------------------------------------------------------------- /NativeUI-Picker-[Animation]-v85/textures/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Animation]-v85/textures/3.png -------------------------------------------------------------------------------- /NativeUI-Picker-[Facemesh]-v85/textures/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Facemesh]-v85/textures/1.png -------------------------------------------------------------------------------- /NativeUI-Picker-[Facemesh]-v85/textures/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Facemesh]-v85/textures/2.png -------------------------------------------------------------------------------- /NativeUI-Picker-[Facemesh]-v85/textures/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Facemesh]-v85/textures/3.png -------------------------------------------------------------------------------- /NativeUI-Picker-[Objects]-v85/textures/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Objects]-v85/textures/1.png -------------------------------------------------------------------------------- /NativeUI-Picker-[Objects]-v85/textures/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Objects]-v85/textures/2.png -------------------------------------------------------------------------------- /NativeUI-Picker-[Objects]-v85/textures/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Objects]-v85/textures/3.png -------------------------------------------------------------------------------- /NativeUI-Picker-[3D-Objects]-v85/textures/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[3D-Objects]-v85/textures/1.png -------------------------------------------------------------------------------- /NativeUI-Picker-[3D-Objects]-v85/textures/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[3D-Objects]-v85/textures/2.png -------------------------------------------------------------------------------- /NativeUI-Picker-[3D-Objects]-v85/textures/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[3D-Objects]-v85/textures/3.png -------------------------------------------------------------------------------- /NativeUI-Picker-[Stacked Pickers]/textures/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Stacked Pickers]/textures/1.png -------------------------------------------------------------------------------- /NativeUI-Picker-[Stacked Pickers]/textures/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Stacked Pickers]/textures/2.png -------------------------------------------------------------------------------- /NativeUI-Picker-[Stacked Pickers]/textures/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Stacked Pickers]/textures/3.png -------------------------------------------------------------------------------- /NativeUI-Picker-[Hide and Show] -v87/textures/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Hide and Show] -v87/textures/1.png -------------------------------------------------------------------------------- /NativeUI-Picker-[Hide and Show] -v87/textures/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Hide and Show] -v87/textures/2.png -------------------------------------------------------------------------------- /NativeUI-Picker-[Patch Editor]-v85/textures/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Patch Editor]-v85/textures/1.png -------------------------------------------------------------------------------- /NativeUI-Picker-[Patch Editor]-v85/textures/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Patch Editor]-v85/textures/2.png -------------------------------------------------------------------------------- /NativeUI-Picker-[Patch Editor]-v85/textures/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Patch Editor]-v85/textures/3.png -------------------------------------------------------------------------------- /NativeUI-Picker-[Selected Value]-v85/textures/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Selected Value]-v85/textures/1.png -------------------------------------------------------------------------------- /NativeUI-Picker-[Selected Value]-v85/textures/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Selected Value]-v85/textures/2.png -------------------------------------------------------------------------------- /NativeUI-Picker-[Selected Value]-v85/textures/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Selected Value]-v85/textures/3.png -------------------------------------------------------------------------------- /NativeUI-Picker-[Basic] -v85/NativeUI-Picker-v85.arproj: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Basic] -v85/NativeUI-Picker-v85.arproj -------------------------------------------------------------------------------- /NativeUI-Picker-[Objects]-v85/NativeUI-Picker-[Objects]-v85.arproj: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Objects]-v85/NativeUI-Picker-[Objects]-v85.arproj -------------------------------------------------------------------------------- /NativeUI-Picker-[Facemesh]-v85/NativeUI-Picker-[Facemesh]-v85.arproj: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Facemesh]-v85/NativeUI-Picker-[Facemesh]-v85.arproj -------------------------------------------------------------------------------- /NativeUI-Picker-[Animation]-v85/NativeUI-Picker-[Animation]-v85.arproj: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Animation]-v85/NativeUI-Picker-[Animation]-v85.arproj -------------------------------------------------------------------------------- /NativeUI-Picker-[3D-Objects]-v85/NativeUI-Picker-[3D-Objects]-v85.arproj: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[3D-Objects]-v85/NativeUI-Picker-[3D-Objects]-v85.arproj -------------------------------------------------------------------------------- /NativeUI-Picker-[Patch Editor]-v85/NativeUI-Picker-[Patch Editor]-v85.arproj: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Patch Editor]-v85/NativeUI-Picker-[Patch Editor]-v85.arproj -------------------------------------------------------------------------------- /NativeUI-Picker-[Stacked Pickers]/NativeUI-Picker-[Stacked Pickers].arproj: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Stacked Pickers]/NativeUI-Picker-[Stacked Pickers].arproj -------------------------------------------------------------------------------- /NativeUI-Picker-[Hide and Show] -v87/NativeUI-Picker-[Hide and Show] -v87.arproj: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Hide and Show] -v87/NativeUI-Picker-[Hide and Show] -v87.arproj -------------------------------------------------------------------------------- /NativeUI-Picker-[Selected Value]-v85/NativeUI-Picker-[Selected Value]-v85.arproj: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SparkAR-Resources/SparkAR-NativeUI-Picker-v85/HEAD/NativeUI-Picker-[Selected Value]-v85/NativeUI-Picker-[Selected Value]-v85.arproj -------------------------------------------------------------------------------- /NativeUI-Picker-[Facemesh]-v85/scripts/tsconfig.json: -------------------------------------------------------------------------------- 1 | {"include":["*.js"],"compilerOptions":{"baseUrl":"/private/var/folders/zc/rmt3rztn2dl6tlks9h67ml7r0000gn/T/2733531965abef364d34a5b4306130f63919/skylight-typedefs","allowJs":true,"checkJs":true,"outDir":"/private/var/folders/zc/rmt3rztn2dl6tlks9h67ml7r0000gn/T/2733531965abef364d34a5b4306130f63919/skylight-typedefs/out-dir"}} -------------------------------------------------------------------------------- /NativeUI-Picker-[Stacked Pickers]/scripts/tsconfig.json: -------------------------------------------------------------------------------- 1 | {"include":["*.js"],"compilerOptions":{"baseUrl":"/private/var/folders/zc/rmt3rztn2dl6tlks9h67ml7r0000gn/T/2217433f4a1cb99476cb3cee3b567943de4/skylight-typedefs","allowJs":true,"checkJs":true,"outDir":"/private/var/folders/zc/rmt3rztn2dl6tlks9h67ml7r0000gn/T/2217433f4a1cb99476cb3cee3b567943de4/skylight-typedefs/out-dir"}} -------------------------------------------------------------------------------- /NativeUI-Picker-[3D-Objects]-v85/scripts/tsconfig.json: -------------------------------------------------------------------------------- 1 | {"include":["*.js"],"compilerOptions":{"baseUrl":"/private/var/folders/zc/rmt3rztn2dl6tlks9h67ml7r0000gn/T/2472531965abef364d34a5b4306130f63919/skylight-typedefs","allowJs":true,"checkJs":true,"outDir":"/private/var/folders/zc/rmt3rztn2dl6tlks9h67ml7r0000gn/T/2472531965abef364d34a5b4306130f63919/skylight-typedefs/out-dir"}} -------------------------------------------------------------------------------- /NativeUI-Picker-[Animation]-v85/scripts/tsconfig.json: -------------------------------------------------------------------------------- 1 | {"include":["*.js"],"compilerOptions":{"baseUrl":"/private/var/folders/zc/rmt3rztn2dl6tlks9h67ml7r0000gn/T/131562f5eb692fd96d46be8a30ff1d19dfa81f/skylight-typedefs","allowJs":true,"checkJs":true,"outDir":"/private/var/folders/zc/rmt3rztn2dl6tlks9h67ml7r0000gn/T/131562f5eb692fd96d46be8a30ff1d19dfa81f/skylight-typedefs/out-dir"}} -------------------------------------------------------------------------------- /NativeUI-Picker-[Basic] -v85/scripts/tsconfig.json: -------------------------------------------------------------------------------- 1 | {"include":["*.js"],"compilerOptions":{"baseUrl":"/private/var/folders/zc/rmt3rztn2dl6tlks9h67ml7r0000gn/T/129265f5eb692fd96d46be8a30ff1d19dfa81f/skylight-typedefs","allowJs":true,"checkJs":true,"outDir":"/private/var/folders/zc/rmt3rztn2dl6tlks9h67ml7r0000gn/T/129265f5eb692fd96d46be8a30ff1d19dfa81f/skylight-typedefs/out-dir"}} -------------------------------------------------------------------------------- /NativeUI-Picker-[Selected Value]-v85/scripts/tsconfig.json: -------------------------------------------------------------------------------- 1 | {"include":["*.js"],"compilerOptions":{"baseUrl":"/private/var/folders/zc/rmt3rztn2dl6tlks9h67ml7r0000gn/T/851352fe14aa2cbc84c59a78bab326eb98849/skylight-typedefs","allowJs":true,"checkJs":true,"outDir":"/private/var/folders/zc/rmt3rztn2dl6tlks9h67ml7r0000gn/T/851352fe14aa2cbc84c59a78bab326eb98849/skylight-typedefs/out-dir"}} -------------------------------------------------------------------------------- /NativeUI-Picker-[Hide and Show] -v87/scripts/script.js: -------------------------------------------------------------------------------- 1 | // Load the modules 2 | const NativeUI = require('NativeUI'); 3 | const Textures = require('Textures'); 4 | const Patches = require('Patches'); 5 | 6 | // Start our promise 7 | Promise.all([ 8 | 9 | // Loading Textures for the buttons 10 | Textures.findFirst('1'), 11 | Textures.findFirst('2') 12 | 13 | 14 | ]).then(function(results){ 15 | 16 | // Promise is returned so let's get to work 17 | const button1 = results[0]; 18 | const button2 = results[1] 19 | 20 | 21 | // This is the normal NativeUI configuration 22 | const configuration = { 23 | selectedIndex: 0, 24 | 25 | items: [ 26 | {image_texture: button1}, 27 | {image_texture: button2} 28 | ] 29 | 30 | }; 31 | 32 | // This is an empty NativeUI configuration 33 | // that we'll load when the camera flips to the back 34 | const empty = { 35 | selectedIndex: 0, 36 | items: [ 37 | ] 38 | }; 39 | 40 | // Create the NativeUI Picker 41 | const picker = NativeUI.picker; 42 | 43 | // This monitors the back camera from the patch editor 44 | Patches.outputs.getBoolean('backCameraActive').then(signal => { 45 | 46 | // Fire the monitor when the filter starts so we know 47 | // if we are starting on the front or back camera 48 | signal.monitor({fireOnInitialValue: true}).subscribe(val => { 49 | 50 | // If the value is true load the empty configuration 51 | // and set the visiblity to false. Otherwise, load the 52 | // normal configuration for the NativeUI Picker 53 | if(val.newValue){ 54 | picker.configure(empty); 55 | picker.visible = false; 56 | } else { 57 | picker.configure(configuration); 58 | picker.visible = true; 59 | } 60 | 61 | }); 62 | }); 63 | 64 | }); 65 | 66 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # SparkAR-NativeUI-Picker-v85 2 | 3 | ⚠️ DISABLE COMPRESSION ON ALL TEXTURES THAT YOU USE FOR NATIVEUI BUTTONS ⚠️ 4 | 5 | ⚠️ MAKE SURE THE NATIVEUI PICKER IS ENABLED IN YOUR PROJECT CAPABILITIES ⚠️ 6 | 7 | This is meant to be a boilerplate for new users or non-scripters to start using Spark AR's NativeUI Picker for their Instagram effects. It takes into account the changes to Spark AR v85+ API and uses Promises to load assets. It is not meant to be a comprehensive exploration into ES6, Spark AR, or writing performant code. This is meant to educate and - hopefully - inspire others to continue learning about how to leverage scripting in their effects. 8 | 9 | ## What's Included 10 | 11 | **NativeUI-Picker-[Basic] -v85** 12 | 13 | This project has the basic setup for the NativeUI Picker and uses the events to change a material on a plane 14 | 15 | **NativeUI-Picker-[Animation] -v85** 16 | 17 | This project has the basic setup for the NativeUI Picker and uses the events to change a material on a plane and rotate the plane 18 | 19 | **NativeUI-Picker-[Objects] -v85** 20 | 21 | This project has the basic setup for the NativeUI Picker and uses the events to select one of three planes, then change a material on the selected plane and rotate the plane 22 | 23 | **NativeUI-Picker-[3D-Objects] -v85** 24 | 25 | This project has the basic setup for the NativeUI Picker and uses the events to select one of three cubes, then change a material on the selected cube and rotate the cube 26 | 27 | **NativeUI-Picker-[Facemesh] -v85** 28 | 29 | This project has the basic setup for the NativeUI Picker and uses the events to show one of three facemesh 30 | 31 | **NativeUI-Picker-[Hide and Show] -v85** 32 | 33 | This project has demonstrates the basic methods of showing, hiding, and updating the configuration for the NativeUI with an event. In this example, we are hiding the NativeUI on the back camera. 34 | 35 | **NativeUI-Picker-[Patch Editor] -v85** 36 | 37 | This project has the basic setup for the NativeUI Picker and connects it to the Patch Editor. The selectedIndex is passed through a patch graph and animates the plane when selecting/deselecting the second button 38 | 39 | **NativeUI-Picker-[Selected Value] -v85** 40 | 41 | This project has the basic setup for the NativeUI Picker using the Patch Editor bridge and demonstrates how to set the second button to be the default "first" selected value when the filter loads 42 | 43 | ## Credits 44 | 45 | Thanks to Lasse Mejlvang Tvedt ( @lassemt ) for jumping on some of these updates before everyone else. 46 | Thanks to Josh Beckwith ( @positlabs ) for, well, being amazing. 47 | 48 | ## Resources 49 | 50 | Follow me on IG [@lukehurd](https://instagram.com/lukehurd) 51 | 52 | [My Tutorials on YouTube](http://www.youtube.com/c/LukeHurd) 53 | 54 | Join the [Spark AR Community](https://www.facebook.com/groups/SparkARcommunity/) 55 | -------------------------------------------------------------------------------- /NativeUI-Picker-[Stacked Pickers]/scripts/script.js: -------------------------------------------------------------------------------- 1 | // Stacked Pickers - NativeUI Picker example v88 2 | // by Luke Hurd :: @lukehurd 3 | 4 | // This project is meant to demonstrate how to create stacked (or tiered) menus 5 | // using the NativeUI Picker. By loading new configurations on the fly, you can 6 | // create a series of different NativeUI menus within your effect - allowing for 7 | // a "Choose your own adventure" style navigation. 8 | 9 | // To clear or remove the NativeUI at any point, just load an empty configuration 10 | // no buttons. 11 | 12 | // Load the modules 13 | const NativeUI = require('NativeUI'); 14 | const Textures = require('Textures'); 15 | 16 | // First, we create a Promise and load all the assets we need for our scene 17 | // The following example shows how to load Textures, Materials, and an Object. 18 | 19 | Promise.all([ 20 | 21 | // Loading Textures for the buttons 22 | Textures.findFirst('1'), 23 | Textures.findFirst('2'), 24 | Textures.findFirst('3'), 25 | 26 | 27 | ]).then(function(results){ 28 | // Assets are loaded, so let's set them all so we can use them later in the script. 29 | // The assets are all returned in an object called "results" in the order that we 30 | // loaded them. Remember, the index starts at 0 so the first asset is always results[0], 31 | // the next is results[1], etc. 32 | 33 | // Lets set the buttons for the NativeUI Picker 34 | const button1 = results[0]; 35 | const button2 = results[1]; 36 | const button3 = results[2]; 37 | 38 | // Create config for the first picker 39 | const first = { 40 | selectedIndex: 0, 41 | 42 | items: [ 43 | {image_texture: button1}, 44 | {image_texture: button1}, 45 | {image_texture: button1} 46 | ] 47 | 48 | }; 49 | 50 | // Create config for the second picker 51 | const second = { 52 | selectedIndex: 1, 53 | 54 | items: [ 55 | {image_texture: button2}, 56 | {image_texture: button2}, 57 | {image_texture: button2} 58 | ] 59 | 60 | }; 61 | 62 | // Create config for the third picker 63 | const third = { 64 | selectedIndex: 2, 65 | 66 | items: [ 67 | {image_texture: button3}, 68 | {image_texture: button3}, 69 | {image_texture: button3} 70 | ] 71 | 72 | }; 73 | 74 | // Create the NativeUI Picker 75 | const picker = NativeUI.picker; 76 | 77 | // Load our first picker 78 | picker.configure(first); 79 | 80 | // Show the NativeUI Picker 81 | picker.visible = true; 82 | 83 | // This is a monitor that watches for the picker to be used. 84 | picker.selectedIndex.monitor().subscribe(function(val) { 85 | 86 | // This is a switch that monitors the value of the NativeUI selection. 87 | // If the user selects the first button, if will load the first picker 88 | // If the user selects the second button, it will load the second picker 89 | // If the user selects the third button, it will load the third picker 90 | switch(val.newValue) { 91 | case 0: 92 | picker.configure(first) 93 | break; 94 | case 1: 95 | picker.configure(second) 96 | break; 97 | case 2: 98 | picker.configure(third) 99 | break; 100 | } 101 | 102 | // Show the NativeUI Picker 103 | picker.visible = true; 104 | 105 | }); 106 | 107 | }); -------------------------------------------------------------------------------- /NativeUI-Picker-[Basic] -v85/scripts/script.js: -------------------------------------------------------------------------------- 1 | // Basic - NativeUI Picker example v85 2 | // by Luke Hurd :: @lukehurd 3 | 4 | // WHAT HAS CHANGED FROM PREVIOUS VERSIONS// 5 | 6 | // In order to load Textures, Materials, and Objects, we must 7 | // now use something in Javascript called "Promises". The basic 8 | // concept is Spark AR now wants to make sure these assets are 9 | // available to the script to manipulate before executing any code. 10 | 11 | // When loading assets, find() has been changed to findFirst() and findAll() 12 | 13 | // Load the modules 14 | const Scene = require('Scene'); 15 | const Materials = require('Materials'); 16 | const NativeUI = require('NativeUI'); 17 | const Textures = require('Textures'); 18 | 19 | // First, we create a Promise and load all the assets we need for our scene 20 | // The following example shows how to load Textures, Materials, and an Object. 21 | 22 | Promise.all([ 23 | 24 | // Loading Textures for the buttons 25 | Textures.findFirst('1'), 26 | Textures.findFirst('2'), 27 | Textures.findFirst('3'), 28 | 29 | // Loading the Materials we are switching on the plane 30 | Materials.findFirst('red'), 31 | Materials.findFirst('green'), 32 | Materials.findFirst('blue'), 33 | 34 | // Loading the plane 35 | Scene.root.findFirst('plane0'), 36 | 37 | // Now, we wait for a "go ahead" from the script to let us know when 38 | // we can start using our assets and creating the NativeUI Picker 39 | 40 | ]).then(function(results){ 41 | 42 | // Assets are loaded, so let's set them all so we can use them later in the script. 43 | // The assets are all returned in an object called "results" in the order that we 44 | // loaded them. Remember, the index starts at 0 so the first asset is always results[0], 45 | // the next is results[1], etc. 46 | 47 | // First, we set the buttons for the NativeUI Picker 48 | const button1 = results[0]; 49 | const button2 = results[1]; 50 | const button3 = results[2]; 51 | 52 | // Next, we set the materials for the plane 53 | const red = results[3]; 54 | const green = results[4]; 55 | const blue = results[5]; 56 | 57 | // Finally, we set the plane 58 | const plane = results[6]; 59 | 60 | // Now, we can finally start building the NativeUI Picker 61 | const configuration = { 62 | 63 | // This index controls where the NativeUI Picker starts. 64 | // Let's keep things simple for now and start on the first 65 | // button, so we keep it at 0. Remember most things start at 0, not 1. 66 | selectedIndex: 0, 67 | 68 | // These are the image textures to use as the buttons in the NativeUI Picker 69 | items: [ 70 | {image_texture: button1}, 71 | {image_texture: button2}, 72 | {image_texture: button3} 73 | ], 74 | 75 | // These are the materials we are switching between on the plane 76 | mats: [ 77 | {material: red}, 78 | {material: green}, 79 | {material: blue} 80 | ] 81 | 82 | }; 83 | 84 | // Create the NativeUI Picker 85 | const picker = NativeUI.picker; 86 | 87 | // Load our configuration 88 | picker.configure(configuration); 89 | 90 | // Show the NativeUI Picker 91 | picker.visible = true; 92 | 93 | // This is a monitor that watches for the picker to be used. 94 | picker.selectedIndex.monitor().subscribe(function(val) { 95 | 96 | // When a button is selected, we select the corresponding material. 97 | // When they pick the first button then the first material loads, etc 98 | 99 | plane.material = configuration.mats[val.newValue].material 100 | 101 | }); 102 | 103 | }); 104 | 105 | //HELP AND NOTES 106 | 107 | // If you do not see your NativeUI icons on the screen make sure 108 | // compression is disabled on any textures that you are using for 109 | // the NativeUI. Sometimes they can get switched back. 110 | 111 | // Remember, everything starts at a 0 index, not 1. Sometimes this 112 | // can be tricky and you might load an incorrect asset. 113 | 114 | // If you have copied this script and are getting an error, make sure 115 | // the NativeUI Picker is enabled in your Project's Capabilities. 116 | -------------------------------------------------------------------------------- /NativeUI-Picker-[Facemesh]-v85/scripts/script.js: -------------------------------------------------------------------------------- 1 | // Facemesh - NativeUI Picker example v85 2 | // by Luke Hurd :: @lukehurd 3 | 4 | // WHAT HAS CHANGED FROM PREVIOUS VERSIONS// 5 | 6 | // In order to load Textures, Materials, and Objects, we must 7 | // now use something in Javascript called "Promises". The basic 8 | // concept is Spark AR now wants to make sure these assets are 9 | // available to the script to manipulate before executing any code. 10 | 11 | // When loading assets, find() has been changed to findFirst() and findAll() 12 | 13 | // Load the modules 14 | const Scene = require('Scene'); 15 | const NativeUI = require('NativeUI'); 16 | const Textures = require('Textures'); 17 | 18 | // First, we create a Promise and load all the assets we need for our scene 19 | // The following example shows how to load Textures, Materials, and an Object. 20 | 21 | Promise.all([ 22 | 23 | // Loading Textures for the buttons 24 | Textures.findFirst('1'), 25 | Textures.findFirst('2'), 26 | Textures.findFirst('3'), 27 | 28 | // Loading the facemesh 29 | Scene.root.findFirst('faceMesh0'), 30 | Scene.root.findFirst('faceMesh1'), 31 | Scene.root.findFirst('faceMesh2'), 32 | 33 | // Now, we wait for a "go ahead" from the script to let us know when 34 | // we can start using our assets and creating the NativeUI Picker 35 | 36 | ]).then(function(results){ 37 | 38 | // Assets are loaded, so let's set them all so we can use them later in the script. 39 | // The assets are all returned in an object called "results" in the order that we 40 | // loaded them. Remember, the index starts at 0 so the first asset is always results[0], 41 | // the next is results[1], etc. 42 | 43 | // First, we set the buttons for the NativeUI Picker 44 | const button1 = results[0]; 45 | const button2 = results[1]; 46 | const button3 = results[2]; 47 | 48 | // Finally, we set the facemeshs 49 | const facemesh0 = results[3]; 50 | const facemesh1 = results[4]; 51 | const facemesh2 = results[5]; 52 | 53 | // Now, we can finally start building the NativeUI Picker 54 | const configuration = { 55 | 56 | // This index controls where the NativeUI Picker starts. 57 | // Let's keep things simple for now and start on the first 58 | // button, so we keep it at 0. Remember most things start at 0, not 1. 59 | selectedIndex: 0, 60 | 61 | // These are the image textures to use as the buttons in the NativeUI Picker 62 | items: [ 63 | {image_texture: button1}, 64 | {image_texture: button2}, 65 | {image_texture: button3} 66 | ] 67 | 68 | }; 69 | 70 | // Create the NativeUI Picker 71 | const picker = NativeUI.picker; 72 | 73 | // Load our configuration 74 | picker.configure(configuration); 75 | 76 | // Show the NativeUI Picker 77 | picker.visible = true; 78 | 79 | // This is a monitor that watches for the picker to be used. 80 | picker.selectedIndex.monitor().subscribe(function(val) { 81 | 82 | // First, hide all the facemesh 83 | facemesh0.hidden = true; 84 | facemesh1.hidden = true; 85 | facemesh2.hidden = true; 86 | 87 | // When a button is selected, we show the corresponding facemesh. 88 | // Using the index of the selected button (0,1,2,etc), we can 89 | // use build switches all sorts of ways. 90 | // In this example, we are going to keep it dead simple with a JS switch. 91 | 92 | // Pass the index to the switch to determine which facemesh should be visible 93 | switch(val.newValue) { 94 | case 0: { 95 | facemesh0.hidden = false; 96 | break; 97 | } 98 | case 1: { 99 | facemesh1.hidden = false; 100 | break; 101 | } 102 | case 2: { 103 | facemesh2.hidden = false; 104 | break; 105 | } 106 | } 107 | 108 | }); 109 | 110 | }); 111 | 112 | //HELP AND NOTES 113 | 114 | // If you do not see your NativeUI icons on the screen make sure 115 | // compression is disabled on any textures that you are using for 116 | // the NativeUI. Sometimes they can get switched back. 117 | 118 | // Remember, everything starts at a 0 index, not 1. Sometimes this 119 | // can be tricky and you might load an incorrect asset. -------------------------------------------------------------------------------- /NativeUI-Picker-[3D-Objects]-v85/objects/Cube/Cube.gltf: -------------------------------------------------------------------------------- 1 | { 2 | "asset" : { 3 | "copyright" : "Facebook", 4 | "generator" : "Khronos glTF Blender I/O v0.9.36", 5 | "version" : "2.0" 6 | }, 7 | "scene" : 0, 8 | "scenes" : [ 9 | { 10 | "name" : "Scene", 11 | "nodes" : [ 12 | 0 13 | ] 14 | } 15 | ], 16 | "nodes" : [ 17 | { 18 | "mesh" : 0, 19 | "name" : "Cube", 20 | "scale" : [ 21 | 0.009999999776482582, 22 | 0.009999999776482582, 23 | 0.009999999776482582 24 | ] 25 | } 26 | ], 27 | "materials" : [ 28 | { 29 | "alphaMode" : "BLEND", 30 | "name" : "Cube_mat", 31 | "pbrMetallicRoughness" : { 32 | "baseColorFactor" : [ 33 | 1, 34 | 1, 35 | 1, 36 | 1 37 | ], 38 | "metallicFactor" : 0.10000000149011612, 39 | "roughnessFactor" : 0.5 40 | } 41 | } 42 | ], 43 | "meshes" : [ 44 | { 45 | "name" : "Mesh.005", 46 | "primitives" : [ 47 | { 48 | "attributes" : { 49 | "POSITION" : 0, 50 | "NORMAL" : 1, 51 | "TEXCOORD_0" : 2 52 | }, 53 | "indices" : 3, 54 | "material" : 0 55 | } 56 | ] 57 | } 58 | ], 59 | "accessors" : [ 60 | { 61 | "bufferView" : 0, 62 | "componentType" : 5126, 63 | "count" : 24, 64 | "max" : [ 65 | 2.500004291534424, 66 | 2.5, 67 | 2.5 68 | ], 69 | "min" : [ 70 | -2.5, 71 | -2.5, 72 | -2.5 73 | ], 74 | "type" : "VEC3" 75 | }, 76 | { 77 | "bufferView" : 1, 78 | "componentType" : 5126, 79 | "count" : 24, 80 | "type" : "VEC3" 81 | }, 82 | { 83 | "bufferView" : 2, 84 | "componentType" : 5126, 85 | "count" : 24, 86 | "type" : "VEC2" 87 | }, 88 | { 89 | "bufferView" : 3, 90 | "componentType" : 5123, 91 | "count" : 36, 92 | "type" : "SCALAR" 93 | } 94 | ], 95 | "bufferViews" : [ 96 | { 97 | "buffer" : 0, 98 | "byteLength" : 288, 99 | "byteOffset" : 0 100 | }, 101 | { 102 | "buffer" : 0, 103 | "byteLength" : 288, 104 | "byteOffset" : 288 105 | }, 106 | { 107 | "buffer" : 0, 108 | "byteLength" : 192, 109 | "byteOffset" : 576 110 | }, 111 | { 112 | "buffer" : 0, 113 | "byteLength" : 72, 114 | "byteOffset" : 768 115 | } 116 | ], 117 | "buffers" : [ 118 | { 119 | "byteLength" : 840, 120 | "uri" : "data:application/octet-stream;base64,8v8fwAAAIMDk/x9AEgAgQAAAIEDm/x9A8v8fwAAAIEDk/x9AAAAgQAAAIMAAACBA//8fQAAAIMD//x/AAAAgwAAAIEAAACDA//8fQAAAIED//x/AAAAgwAAAIMAAACDA8v8fwAAAIEDk/x9A//8fQAAAIED//x/AAAAgwAAAIEAAACDAEgAgQAAAIEDm/x9A//8fQAAAIMD//x/A8v8fwAAAIMDk/x9AAAAgwAAAIMAAACDAAAAgQAAAIMAAACBA8v8fwAAAIMDk/x9AAAAgwAAAIEAAACDAAAAgwAAAIMAAACDA8v8fwAAAIEDk/x9AEgAgQAAAIEDm/x9A//8fQAAAIMD//x/A//8fQAAAIED//x/AAAAgQAAAIMAAACBAYY9CtW1mJjUAAIA/YY9CtW1mJjUAAIA/YY9CtW1mJjUAAIA/YY9CtW1mJjUAAIA/CtcjMwAAAAAAAIC/CtcjMwAAAAAAAIC/CtcjMwAAAAAAAIC/CtcjMwAAAAAAAIC/AAAAAAAAgD/ezEwzAAAAAAAAgD/ezEwzAAAAAAAAgD/ezEwzAAAAAAAAgD/ezEwzAAAAAAAAgL8V1yMzAAAAAAAAgL8V1yMzAAAAAAAAgL8V1yMzAAAAAAAAgL8V1yMzAACAvwAAAABDMzM1AACAvwAAAABDMzM1AACAvwAAAABDMzM1AACAvwAAAABDMzM1AACAPxHXo7QFAAC1AACAPxHXo7QFAAC1AACAPxHXo7QFAAC1AACAPxHXo7QFAAC1AACAPgAAwD4AAAA/AAAgPwAAgD4AACA/AAAAPwAAwD4AAEA/AADAPgAAgD8AACA/AABAPwAAID8AAIA/AADAPgAAgD4AACA/AAAAPwAAYD8AAIA+AABgPwAAAD8AACA/AAAAPwAAAD4AAIA+AADAPgAAgD4AAAA+AAAAPwAAwD4AAIA+AADAPgAAAAAAACA/AAAAAAAAwD4AAIA+AAAgPwAAAD8AACA/AABAPwAAwD4AAEA/AAAgPwAAAD8AAMA+AAABAAIAAAADAAEABAAFAAYABAAHAAUACAAJAAoACAALAAkADAANAA4ADwANAAwAEAARABIAEAATABEAFAAVABYAFAAXABUA" 121 | } 122 | ] 123 | } 124 | -------------------------------------------------------------------------------- /NativeUI-Picker-[Patch Editor]-v85/scripts/script.js: -------------------------------------------------------------------------------- 1 | // Patch Editor - NativeUI Picker example v85 2 | // by Luke Hurd :: @lukehurd 3 | 4 | // WHAT HAS CHANGED FROM PREVIOUS VERSIONS// 5 | 6 | // In order to load Textures, Materials, and Objects, we must 7 | // now use something in Javascript called "Promises". The basic 8 | // concept is Spark AR now wants to make sure these assets are 9 | // available to the script to manipulate before executing any code. 10 | 11 | // When loading assets, find() has been changed to findFirst() and findAll() 12 | 13 | // Load the modules 14 | const Scene = require('Scene'); 15 | const Materials = require('Materials'); 16 | const NativeUI = require('NativeUI'); 17 | const Textures = require('Textures'); 18 | 19 | // Load the Patches moddule so that we can connect to the Patch Editor 20 | const Patches = require('Patches'); 21 | 22 | // First, we create a Promise and load all the assets we need for our scene 23 | // The following example shows how to load Textures, Materials, and an Object. 24 | 25 | Promise.all([ 26 | 27 | // Loading Textures for the buttons 28 | Textures.findFirst('1'), 29 | Textures.findFirst('2'), 30 | Textures.findFirst('3'), 31 | 32 | // Loading the Materials we are switching on the plane 33 | Materials.findFirst('red'), 34 | Materials.findFirst('green'), 35 | Materials.findFirst('blue'), 36 | 37 | // Loading the plane 38 | Scene.root.findFirst('plane0'), 39 | 40 | // Now, we wait for a "go ahead" from the script to let us know when 41 | // we can start using our assets and creating the NativeUI Picker 42 | 43 | ]).then(function(results){ 44 | 45 | // Assets are loaded, so let's set them all so we can use them later in the script. 46 | // The assets are all returned in an object called "results" in the order that we 47 | // loaded them. Remember, the index starts at 0 so the first asset is always results[0], 48 | // the next is results[1], etc. 49 | 50 | // First, we set the buttons for the NativeUI Picker 51 | const button1 = results[0]; 52 | const button2 = results[1]; 53 | const button3 = results[2]; 54 | 55 | // Next, we set the materials for the plane 56 | const red = results[3]; 57 | const green = results[4]; 58 | const blue = results[5]; 59 | 60 | // Finally, we set the plane 61 | const plane = results[6]; 62 | 63 | // Now, we can finally start building the NativeUI Picker 64 | const configuration = { 65 | 66 | // This index controls where the NativeUI Picker starts. 67 | // Let's keep things simple for now and start on the first 68 | // button, so we keep it at 0. Remember most things start at 0, not 1. 69 | selectedIndex: 0, 70 | 71 | // These are the image textures to use as the buttons in the NativeUI Picker 72 | items: [ 73 | {image_texture: button1}, 74 | {image_texture: button2}, 75 | {image_texture: button3} 76 | ], 77 | 78 | // These are the materials we are switching between on the plane 79 | mats: [ 80 | {material: red}, 81 | {material: green}, 82 | {material: blue} 83 | ] 84 | 85 | }; 86 | 87 | // Create the NativeUI Picker 88 | const picker = NativeUI.picker; 89 | 90 | // Load our configuration 91 | picker.configure(configuration); 92 | 93 | // Show the NativeUI Picker 94 | picker.visible = true; 95 | 96 | // This is a monitor that watches for the picker to be used. 97 | picker.selectedIndex.monitor().subscribe(function(val) { 98 | 99 | // When a button is selected, we select the corresponding material. 100 | // When they pick the first button then the first material loads, etc 101 | 102 | plane.material = configuration.mats[val.newValue].material 103 | 104 | //Pass the index to the Patch Editor so we can animate things 105 | Patches.inputs.setScalar('selectedIndex', val.newValue); 106 | 107 | }); 108 | 109 | }); 110 | 111 | //HELP AND NOTES 112 | 113 | // If you do not see your NativeUI icons on the screen make sure 114 | // compression is disabled on any textures that you are using for 115 | // the NativeUI. Sometimes they can get switched back. 116 | 117 | // Remember, everything starts at a 0 index, not 1. Sometimes this 118 | // can be tricky and you might load an incorrect asset. 119 | 120 | // If you have copied this script and are getting an error, make sure 121 | // the NativeUI Picker is enabled in your Project's Capabilities. 122 | -------------------------------------------------------------------------------- /NativeUI-Picker-[Selected Value]-v85/scripts/script.js: -------------------------------------------------------------------------------- 1 | // Selected Value - NativeUI Picker example v85 2 | // by Luke Hurd :: @lukehurd 3 | 4 | // WHAT HAS CHANGED FROM PREVIOUS VERSIONS// 5 | 6 | // In order to load Textures, Materials, and Objects, we must 7 | // now use something in Javascript called "Promises". The basic 8 | // concept is Spark AR now wants to make sure these assets are 9 | // available to the script to manipulate before executing any code. 10 | 11 | // When loading assets, find() has been changed to findFirst() and findAll() 12 | 13 | // Load the modules 14 | const Scene = require('Scene'); 15 | const Materials = require('Materials'); 16 | const NativeUI = require('NativeUI'); 17 | const Textures = require('Textures'); 18 | 19 | // First, we create a Promise and load all the assets we need for our scene 20 | // The following example shows how to load Textures, Materials, and an Object. 21 | 22 | Promise.all([ 23 | 24 | // Loading Textures for the buttons 25 | Textures.findFirst('1'), 26 | Textures.findFirst('2'), 27 | Textures.findFirst('3'), 28 | 29 | // Loading the Materials we are switching on the plane 30 | Materials.findFirst('red'), 31 | Materials.findFirst('green'), 32 | Materials.findFirst('blue'), 33 | 34 | // Loading the plane 35 | Scene.root.findFirst('plane0'), 36 | 37 | // Now, we wait for a "go ahead" from the script to let us know when 38 | // we can start using our assets and creating the NativeUI Picker 39 | 40 | ]).then(function(results){ 41 | 42 | // Assets are loaded, so let's set them all so we can use them later in the script. 43 | // The assets are all returned in an object called "results" in the order that we 44 | // loaded them. Remember, the index starts at 0 so the first asset is always results[0], 45 | // the next is results[1], etc. 46 | 47 | // First, we set the buttons for the NativeUI Picker 48 | const button1 = results[0]; 49 | const button2 = results[1]; 50 | const button3 = results[2]; 51 | 52 | // Next, we set the materials for the plane 53 | const red = results[3]; 54 | const green = results[4]; 55 | const blue = results[5]; 56 | 57 | // Finally, we set the plane 58 | const plane = results[6]; 59 | 60 | // Now, we can finally start building the NativeUI Picker 61 | const configuration = { 62 | 63 | // This index controls where the NativeUI Picker starts. 64 | // In this example, we want to start on the second button, 65 | // not the first. So we pass the initial value of "1" (which is the second button) 66 | selectedIndex: 1, 67 | 68 | // These are the image textures to use as the buttons in the NativeUI Picker 69 | items: [ 70 | {image_texture: button1}, 71 | {image_texture: button2}, 72 | {image_texture: button3} 73 | ], 74 | 75 | // These are the materials we are switching between on the plane 76 | mats: [ 77 | {material: red}, 78 | {material: green}, 79 | {material: blue} 80 | ] 81 | 82 | }; 83 | 84 | // Create the NativeUI Picker 85 | const picker = NativeUI.picker; 86 | 87 | // Load our configuration 88 | picker.configure(configuration); 89 | 90 | // Show the NativeUI Picker 91 | picker.visible = true; 92 | 93 | // This is a monitor that watches for the picker to be used. 94 | // This is also where the magic happens for the initial selected value. 95 | // Notice the "fireOnInitialValue" attribute we are passing - this lets Spark know 96 | // to fire this monitor and pass the value right when the filter loads 97 | picker.selectedIndex.monitor({fireOnInitialValue: true}).subscribe(function(val) { 98 | 99 | // When a button is selected, we select the corresponding material. 100 | // When they pick the first button then the first material loads, etc 101 | 102 | plane.material = configuration.mats[val.newValue].material 103 | 104 | }); 105 | 106 | }); 107 | 108 | //HELP AND NOTES 109 | 110 | // If you do not see your NativeUI icons on the screen make sure 111 | // compression is disabled on any textures that you are using for 112 | // the NativeUI. Sometimes they can get switched back. 113 | 114 | // Remember, everything starts at a 0 index, not 1. Sometimes this 115 | // can be tricky and you might load an incorrect asset. 116 | 117 | // If you have copied this script and are getting an error, make sure 118 | // the NativeUI Picker is enabled in your Project's Capabilities. -------------------------------------------------------------------------------- /NativeUI-Picker-[Animation]-v85/scripts/script.js: -------------------------------------------------------------------------------- 1 | // Animation - NativeUI Picker example v85 2 | // by Luke Hurd :: @lukehurd 3 | 4 | // WHAT HAS CHANGED FROM PREVIOUS VERSIONS// 5 | 6 | // In order to load Textures, Materials, and Objects, we must 7 | // now use something in Javascript called "Promises". The basic 8 | // concept is Spark AR now wants to make sure these assets are 9 | // available to the script to manipulate before executing any code. 10 | 11 | // When loading assets, find() has been changed to findFirst() and findAll() 12 | 13 | // Load the modules 14 | const Scene = require('Scene'); 15 | const Materials = require('Materials'); 16 | const NativeUI = require('NativeUI'); 17 | const Textures = require('Textures'); 18 | const Animation = require('Animation'); 19 | 20 | // First, we create a Promise and load all the assets we need for our scene 21 | // The following example shows how to load Textures, Materials, and an Object. 22 | 23 | Promise.all([ 24 | 25 | // Loading Textures for the buttons 26 | Textures.findFirst('1'), 27 | Textures.findFirst('2'), 28 | Textures.findFirst('3'), 29 | 30 | // Loading the Materials we are switching on the plane 31 | Materials.findFirst('red'), 32 | Materials.findFirst('green'), 33 | Materials.findFirst('blue'), 34 | 35 | // Loading the plane 36 | Scene.root.findFirst('plane0'), 37 | 38 | // Now, we wait for a "go ahead" from the script to let us know when 39 | // we can start using our assets and creating the NativeUI Picker 40 | 41 | ]).then(function(results){ 42 | 43 | // Assets are loaded, so let's set them all so we can use them later in the script. 44 | // The assets are all returned in an object called "results" in the order that we 45 | // loaded them. Remember, the index starts at 0 so the first asset is always results[0], 46 | // the next is results[1], etc. 47 | 48 | // First, we set the buttons for the NativeUI Picker 49 | const button1 = results[0]; 50 | const button2 = results[1]; 51 | const button3 = results[2]; 52 | 53 | // Next, we set the materials for the plane 54 | const red = results[3]; 55 | const green = results[4]; 56 | const blue = results[5]; 57 | 58 | // Finally, we set the plane 59 | const plane = results[6]; 60 | 61 | // Now, we can finally start building the NativeUI Picker 62 | const configuration = { 63 | 64 | // This index controls where the NativeUI Picker starts. 65 | // Let's keep things simple for now and start on the first 66 | // button, so we keep it at 0. Remember most things start at 0, not 1. 67 | selectedIndex: 0, 68 | 69 | // These are the image textures to use as the buttons in the NativeUI Picker 70 | items: [ 71 | {image_texture: button1}, 72 | {image_texture: button2}, 73 | {image_texture: button3} 74 | ], 75 | 76 | // These are the materials we are switching between on the plane 77 | mats: [ 78 | {material: red}, 79 | {material: green}, 80 | {material: blue} 81 | ] 82 | 83 | }; 84 | 85 | // Create the NativeUI Picker 86 | const picker = NativeUI.picker; 87 | 88 | // Load our configuration 89 | picker.configure(configuration); 90 | 91 | // Show the NativeUI Picker 92 | picker.visible = true; 93 | 94 | // This is a monitor that watches for the picker to be used. 95 | picker.selectedIndex.monitor().subscribe(function(val) { 96 | 97 | // When a button is selected, we select the corresponding material. 98 | // When they pick the first button then the first material loads, etc 99 | plane.material = configuration.mats[val.newValue].material 100 | 101 | //Create a timeDriver 102 | var tD = Animation.timeDriver({durationMilliseconds: 1000, loopCount: 1, mirror: false}); 103 | 104 | // Create an Animation that goes from 0 - 6 105 | var spin = Animation.animate(tD, Animation.samplers.linear(0, 6)); 106 | 107 | // Pass the Animation values rotate the plane on the Z axis 108 | plane.transform.rotationZ = spin; 109 | 110 | // Start the Animation 111 | tD.start(); 112 | 113 | }); 114 | 115 | }); 116 | 117 | //HELP AND NOTES 118 | 119 | // If you do not see your NativeUI icons on the screen make sure 120 | // compression is disabled on any textures that you are using for 121 | // the NativeUI. Sometimes they can get switched back. 122 | 123 | // Remember, everything starts at a 0 index, not 1. Sometimes this 124 | // can be tricky and you might load an incorrect asset. 125 | 126 | // If you have copied this script and are getting an error, make sure 127 | // the NativeUI Picker is enabled in your Project's Capabilities. -------------------------------------------------------------------------------- /NativeUI-Picker-[3D-Objects]-v85/scripts/script.js: -------------------------------------------------------------------------------- 1 | // 3D Objects - NativeUI Picker example v85 2 | // by Luke Hurd :: @lukehurd 3 | 4 | // WHAT HAS CHANGED FROM PREVIOUS VERSIONS// 5 | 6 | // In order to load Textures, Materials, and Objects, we must 7 | // now use something in Javascript called "Promises". The basic 8 | // concept is Spark AR now wants to make sure these assets are 9 | // available to the script to manipulate before executing any code. 10 | 11 | // When loading assets, find() has been changed to findFirst() and findAll() 12 | 13 | // Load the modules 14 | const Scene = require('Scene'); 15 | const Materials = require('Materials'); 16 | const NativeUI = require('NativeUI'); 17 | const Textures = require('Textures'); 18 | const Animation = require('Animation'); 19 | 20 | // First, we create a Promise and load all the assets we need for our scene 21 | // The following example shows how to load Textures, Materials, and an Object. 22 | 23 | Promise.all([ 24 | 25 | // Loading Textures for the buttons 26 | Textures.findFirst('1'), 27 | Textures.findFirst('2'), 28 | Textures.findFirst('3'), 29 | 30 | // Loading the Materials we are switching on the plane 31 | Materials.findFirst('red'), 32 | Materials.findFirst('green'), 33 | Materials.findFirst('blue'), 34 | 35 | // Loading the cubes 36 | Scene.root.findFirst('Cube'), 37 | Scene.root.findFirst('Cube0'), 38 | Scene.root.findFirst('Cube1'), 39 | 40 | // Now, we wait for a "go ahead" from the script to let us know when 41 | // we can start using our assets and creating the NativeUI Picker 42 | 43 | ]).then(function(results){ 44 | 45 | // Assets are loaded, so let's set them all so we can use them later in the script. 46 | // The assets are all returned in an object called "results" in the order that we 47 | // loaded them. Remember, the index starts at 0 so the first asset is always results[0], 48 | // the next is results[1], etc. 49 | 50 | // First, we set the buttons for the NativeUI Picker 51 | const button1 = results[0]; 52 | const button2 = results[1]; 53 | const button3 = results[2]; 54 | 55 | // Next, we set the materials for the plane 56 | const red = results[3]; 57 | const green = results[4]; 58 | const blue = results[5]; 59 | 60 | // Finally, we set the cubes 61 | const cube0 = results[6]; 62 | const cube1 = results[7]; 63 | const cube2 = results[8]; 64 | 65 | // Now, we can finally start building the NativeUI Picker 66 | const configuration = { 67 | 68 | // This index controls where the NativeUI Picker starts. 69 | // Let's keep things simple for now and start on the first 70 | // button, so we keep it at 0. Remember most things start at 0, not 1. 71 | selectedIndex: 0, 72 | 73 | // These are the image textures to use as the buttons in the NativeUI Picker 74 | items: [ 75 | {image_texture: button1}, 76 | {image_texture: button2}, 77 | {image_texture: button3} 78 | ], 79 | 80 | // These are the materials we are switching between on the cubes 81 | mats: [ 82 | {material: red}, 83 | {material: green}, 84 | {material: blue} 85 | ] 86 | 87 | }; 88 | 89 | // Create the NativeUI Picker 90 | const picker = NativeUI.picker; 91 | 92 | // Load our configuration 93 | picker.configure(configuration); 94 | 95 | // Show the NativeUI Picker 96 | picker.visible = true; 97 | 98 | // This is a monitor that watches for the picker to be used. 99 | picker.selectedIndex.monitor().subscribe(function(val) { 100 | 101 | // When a button is selected, we select a corresponding cube. 102 | // Using the index of the selected button (0,1,2,etc), we can 103 | // use build switches all sorts of ways. 104 | // In this example, we are going to keep it dead simple with a JS switch. 105 | 106 | // Create an empty variable 107 | let selectedCube; 108 | 109 | // Pass the index to the switch to determine which cube should rotate 110 | switch(val.newValue) { 111 | case 0: { 112 | selectedCube = cube0; 113 | break; 114 | } 115 | case 1: { 116 | selectedCube = cube1; 117 | break; 118 | } 119 | case 2: { 120 | selectedCube = cube2; 121 | break; 122 | } 123 | } 124 | 125 | // Passing the same index, we select the corresponding material. 126 | // When they pick the first button then the first material loads, etc 127 | selectedCube.material = configuration.mats[val.newValue].material 128 | 129 | //Create a timeDriver 130 | var tD = Animation.timeDriver({durationMilliseconds: 1000, loopCount: 1, mirror: false}); 131 | 132 | // Create an Animation that goes from 0 - 6 133 | var spin = Animation.animate(tD, Animation.samplers.linear(0, 6)); 134 | 135 | // Pass the Animation values rotate the plane on the Z axis 136 | selectedCube.transform.rotationZ = spin; 137 | 138 | // Start the Animation 139 | tD.start(); 140 | 141 | }); 142 | 143 | }); 144 | 145 | //HELP AND NOTES 146 | 147 | // If you do not see your NativeUI icons on the screen make sure 148 | // compression is disabled on any textures that you are using for 149 | // the NativeUI. Sometimes they can get switched back. 150 | 151 | // Remember, everything starts at a 0 index, not 1. Sometimes this 152 | // can be tricky and you might load an incorrect asset. -------------------------------------------------------------------------------- /NativeUI-Picker-[Objects]-v85/scripts/script.js: -------------------------------------------------------------------------------- 1 | // Objects - NativeUI Picker example v85 2 | // by Luke Hurd :: @lukehurd 3 | 4 | // WHAT HAS CHANGED FROM PREVIOUS VERSIONS// 5 | 6 | // In order to load Textures, Materials, and Objects, we must 7 | // now use something in Javascript called "Promises". The basic 8 | // concept is Spark AR now wants to make sure these assets are 9 | // available to the script to manipulate before executing any code. 10 | 11 | // When loading assets, find() has been changed to findFirst() and findAll() 12 | 13 | // Load the modules 14 | const Scene = require('Scene'); 15 | const Materials = require('Materials'); 16 | const NativeUI = require('NativeUI'); 17 | const Textures = require('Textures'); 18 | const Animation = require('Animation'); 19 | const Diagnostics = require('Diagnostics'); 20 | 21 | // First, we create a Promise and load all the assets we need for our scene 22 | // The following example shows how to load Textures, Materials, and an Object. 23 | 24 | Promise.all([ 25 | 26 | // Loading Textures for the buttons 27 | Textures.findFirst('1'), 28 | Textures.findFirst('2'), 29 | Textures.findFirst('3'), 30 | 31 | // Loading the Materials we are switching on the plane 32 | Materials.findFirst('red'), 33 | Materials.findFirst('green'), 34 | Materials.findFirst('blue'), 35 | 36 | // Loading the plane 37 | Scene.root.findFirst('plane0'), 38 | Scene.root.findFirst('plane1'), 39 | Scene.root.findFirst('plane2'), 40 | 41 | // Now, we wait for a "go ahead" from the script to let us know when 42 | // we can start using our assets and creating the NativeUI Picker 43 | 44 | ]).then(function(results){ 45 | 46 | // Assets are loaded, so let's set them all so we can use them later in the script. 47 | // The assets are all returned in an object called "results" in the order that we 48 | // loaded them. Remember, the index starts at 0 so the first asset is always results[0], 49 | // the next is results[1], etc. 50 | 51 | // First, we set the buttons for the NativeUI Picker 52 | const button1 = results[0]; 53 | const button2 = results[1]; 54 | const button3 = results[2]; 55 | 56 | // Next, we set the materials for the plane 57 | const red = results[3]; 58 | const green = results[4]; 59 | const blue = results[5]; 60 | 61 | // Finally, we set the planes 62 | const plane0 = results[6]; 63 | const plane1 = results[7]; 64 | const plane2 = results[8]; 65 | 66 | // Now, we can finally start building the NativeUI Picker 67 | const configuration = { 68 | 69 | // This index controls where the NativeUI Picker starts. 70 | // Let's keep things simple for now and start on the first 71 | // button, so we keep it at 0. Remember most things start at 0, not 1. 72 | selectedIndex: 0, 73 | 74 | // These are the image textures to use as the buttons in the NativeUI Picker 75 | items: [ 76 | {image_texture: button1}, 77 | {image_texture: button2}, 78 | {image_texture: button3} 79 | ], 80 | 81 | // These are the materials we are switching between on the plane 82 | mats: [ 83 | {material: red}, 84 | {material: green}, 85 | {material: blue} 86 | ] 87 | 88 | }; 89 | 90 | // Create the NativeUI Picker 91 | const picker = NativeUI.picker; 92 | 93 | // Load our configuration 94 | picker.configure(configuration); 95 | 96 | // Show the NativeUI Picker 97 | picker.visible = true; 98 | 99 | // This is a monitor that watches for the picker to be used. 100 | picker.selectedIndex.monitor().subscribe(function(val) { 101 | 102 | // When a button is selected, we select a corresponding plane. 103 | // Using the index of the selected button (0,1,2,etc), we can 104 | // use build switches all sorts of ways. 105 | // In this example, we are going to keep it dead simple with a JS switch. 106 | 107 | // Create an empty variable 108 | let selectedPlane; 109 | 110 | // Pass the index to the switch to determine which plane should rotate 111 | switch(val.newValue) { 112 | case 0: { 113 | selectedPlane = plane0; 114 | break; 115 | } 116 | case 1: { 117 | selectedPlane = plane1; 118 | break; 119 | } 120 | case 2: { 121 | selectedPlane = plane2; 122 | break; 123 | } 124 | } 125 | 126 | // Passing the same index, we select the corresponding material. 127 | // When they pick the first button then the first material loads, etc 128 | selectedPlane.material = configuration.mats[val.newValue].material 129 | 130 | //Create a timeDriver 131 | var tD = Animation.timeDriver({durationMilliseconds: 1000, loopCount: 1, mirror: false}); 132 | 133 | // Create an Animation that goes from 0 - 6 134 | var spin = Animation.animate(tD, Animation.samplers.linear(0, 6)); 135 | 136 | // Pass the Animation values rotate the plane on the Z axis 137 | selectedPlane.transform.rotationZ = spin; 138 | 139 | // Start the Animation 140 | tD.start(); 141 | 142 | }); 143 | 144 | }); 145 | 146 | //HELP AND NOTES 147 | 148 | // If you do not see your NativeUI icons on the screen make sure 149 | // compression is disabled on any textures that you are using for 150 | // the NativeUI. Sometimes they can get switched back. 151 | 152 | // Remember, everything starts at a 0 index, not 1. Sometimes this 153 | // can be tricky and you might load an incorrect asset. 154 | 155 | // If you have copied this script and are getting an error, make sure 156 | // the NativeUI Picker is enabled in your Project's Capabilities. --------------------------------------------------------------------------------