Changing textures with Javascript

[pixelrgb028]

Is it possible to change the textures of a glb or glTF in AR using scene-viewer and javascripted buttons? Looking to showcase a product in multiple colors and styles, but need to build a javascript UI for users to control the different texture options using fixed buttons.

[elalish]

In fact the PR I'm about to merge addresses exactly this: #1302. This 3DOM API is still fairly unstable, which is why it's not yet publicly documented, but you're welcome to be an early user and give us feedback. However, none of this customization is available through scene-viewer, as that is a separate native app like quick look. However, we've changed the default AR experience to webXR, which stays in the browser and enables all of these kinds of customization through HTML, CSS and JS.

[pixelrgb028]

Fantastic, I would love to test this out if at all possible! It's too bad that we do not have a way to access usdz attributes, but I think updating the usdz model's ios-src in model-viewer should work just fine.

Currently I'm swapping the source links between different .glb models using a js function that targets model-viewer's "src" attribute, but cannot seem to also update the "ios-src"

You can view a demo here: https://www.lockheimers.com/lm/jsui/

Any recommendations on how to update the link to the usdz files using onClick events would be very helpful, thanks!

[elalish]

Looking at your source, it appears you've commented out the lines that update ios-src. When you put those back in, does it still have the problem?

[pixelrgb028]

Yes, I unfortunately get the following console error:
Uncaught SyntaxError: Invalid left-hand side in assignment

..And upon click, all of the buttons render:
Uncaught ReferenceError: toggleP is not defined
at HTMLButtonElement.onclick ((index):LINE NUMBER OF EACH CLICK 77, 81, 85, 89)

You can text the errors here:
https://www.lockheimers.com/lm/jsui2/

[pixelrgb028]

Thank again for your help! I cleaned up the first error, but I'm still not able to link the "ios-src". Please the following issue when I click on the first (yellow) button -- this happens respectively to each link:

-script.js:20 Uncaught ReferenceError: src is not defined
at toggleYZ (-script.js:20)
at toggleY (-script.js:10)
at HTMLButtonElement.onclick (-index.html:78)

The latest preview link can be tested here: https://www.lockheimers.com/lm/jsui2/-index.html

[elalish]

Instead of

function toggleY(){
    toggleYG();
    toggleYZ();
}
function toggleYG(){

    var model = document.getElementById('model').src;
        document.getElementById('model').src = 'assets/yellow.glb';
}

function toggleYZ(){
    // var model = document.getElementById('model').src;
        document.getElementById('model').ios-src === myUSDZ[0];
}

You want something like

var model = document.getElementById('model');

function toggleY(){
    model.src = 'assets/yellow.glb';
    model.ios-src = myUSDZ[0];
}

[pixelrgb028]

That should technically work, thank you very much... unfortunately, the console keeps saying it cannot find the source; even if I link directly using ios-src=='assets/model.usdz';

We are so close to getting this to work =/

-script.js:11 Uncaught ReferenceError: src is not defined
at toggleY (-script.js:11)
at HTMLButtonElement.onclick (-index.html:78)

[pixelrgb028]

You can see the latest code here: https://www.lockheimers.com/lm/jsui2/-index.html

[elalish]

I think you're confusing =, == and ===. Assignment can only be done with =. Check equality with === and check approximate equality with == (which is to say, never use ==). If it can't find the file, check your directory structure and spelling.

[pixelrgb028]

Gotcha, however if I use single "=", I end up with an error:

Uncaught SyntaxError: Invalid left-hand side in assignment

I updated to using "===" but it still renders "src is not defined" even when I link directly to the usdz model. The .glb models all load perfectly, so it must be something to do with the ios-src

Latest:
https://www.lockheimers.com/lm/jsui2/-index.html

[elalish]

Ah, I finally noticed the problem. The standard naming conventions on the web are attributes use dashes with lower case, like ios-src, while the equivalent properties in Javascript use camel-case: iosSrc. The only reason === doesn't give you an error is because it's not doing anything at all.

[pixelrgb028]

This is very exciting! Changing "iso-src" to "iosSrc" fixed the console errors! So close... Now the only issue I have is when I try to preview the models in AR QuickLook I get:
"Object could not be opened"

Although it's the same usdz files that opened before. I do get a single warning:

DevTools failed to load SourceMap: Could not load content for https://unpkg.com/@google/[email protected]/dist/model-viewer.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE

https://www.lockheimers.com/lm/jsui2/-index.html

[pixelrgb028]

Thanks again for all of your help! I am moving my issue on to the apple Developer forum. Please let me know if I can help test any new features with texture attributes or other future updates.