Meta Spark AR script Error: You have to specify `image_texture` which needs to be a texture

93 Views Asked by At

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_texture which 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.

0

There are 0 best solutions below