I just want to preface my post with I'm not a programmer, and that I've only been scouring the internet for help. I used another code, but clicking on the icons won't display the 'Material' associated with the each icon, as explained in my previous post.
I've received another code, please see below:
// Load the modules
const Scene = require('Scene');
const Materials = require('Materials');
const NativeUI = require('NativeUI');
const Textures = require('Textures');
// First, we create a Promise and load all the assets we need for our scene
Promise.all([
// Loading Textures for the buttons
// I will be using 12 icons for 12 Materials
// ... (add the remaining of your 12 textures here)
Textures.findFirst('icon01'),
Textures.findFirst('icon02'),
Textures.findFirst('icon03'),
Textures.findFirst('icon04'),
Textures.findFirst('icon05'),
Textures.findFirst('icon06'),
Textures.findFirst('icon07'),
Textures.findFirst('icon08'),
Textures.findFirst('icon09'),
Textures.findFirst('icon010'),
Textures.findFirst('icon011'),
Textures.findFirst('icon012'),
// Loading the Materials we are switching on the plane
// Ensure you have 12 materials named 'Material_01', 'Material_02', ... 'Material_12'
// Ensure they are sequentially numbered like this so we can easily access them in the script...
Array.from({ length: 12 }, (_, index) => Materials.findFirst(`Material_${String(index + 1).padStart(2, '0')}`)),
// Loading the plane
Scene.root.findFirst('plane0'),
]).then(function(results) {
// Assets are loaded, so let's set them all so we can use them later in the script.
const icons = results.slice(0, 12);
const materials = results.slice(12, 24);
const plane = results[24];
// Now, we can finally start building the NativeUI Picker
const configuration = {
// This index controls where the NativeUI Picker starts.
// In this example, we want to start on the first button (index 0).
// If you want to start on a different button, change the selectedIndex value accordingly.
selectedIndex: 0,
// These are the image textures to use as the buttons in the NativeUI Picker
items: icons.map(icon => ({ image_texture: icon })),
// These are the materials we are switching between on the plane
mats: materials.map(material => ({ material: material })),
};
// Create the NativeUI Picker
const picker = NativeUI.picker;
// Load our configuration
picker.configure(configuration);
// Show the NativeUI Picker
picker.visible = true;
picker.selectedIndex.monitor({fireOnInitialValue: true}).subscribe(function(val) {
// Modify the material of the plane when a different option is picked
plane.material = configuration.mats[val.newValue].material;
});
});
Thing is it won't display the icons and it's throwing this error message:
Warning: Possible Unhandled Promise Rejection: Error: The provided picker item configuration is incorrect. You have to specify
image_texturewhich needs to be a texture. at anonymous (file:///polyfill.js:1:2983) at anonymous (file:///polyfill.js:1:1306) at anonymous (file:///polyfill.js:1:147)
Not sure what to do.
I've tried everything I know; I even tried to combine some of the previous codes to the above code, but I still can't get past the errors.