auto generated USDZ transparency

[GianiNavette]

Description

Hello I'm having trouble making an object fully transparent in AR.

My goal is to completely hide the object, so I don't want to see it a little bit transparent

Live Demo

I use this to make it transparent

 parts[i].setAlphaMode('MASK');
                parts[i].setDoubleSided("false")
                parts[i].setAlphaCutoff(0.75);
                //parts[i].setOpacity(0);
                console.log(parts[i]);
                parts[i].pbrMetallicRoughness.setBaseColorFactor([1,1,1,0]);

Version

Last Version of model viewer

Browser Affected

• Safari

OS

• Android Tested and works
• [] iOS 15.0 tested not working
• [] iOS 15.4.1 tested not working

AR

Web XR has no problem but quick look is weird

• QuickLook

[elalish]

I'm not too surprised this isn't working in Quick Look. The problem with their only accepting USDZ is that there's not a clear way to translate all the material properties from glTF or other formats. I'd recommend lobbying Apple to accept the glTF open standard and/or WebXR so we can have consistent rendering code (@grorg).

[GianiNavette]

Hello i've come here to make an update I actually found a way (after many hours of research)
First you get the three js scene from the model viewer by doing this

var modelViewer = document.querySelector("model-viewer");
var scene =
      modelViewer[
        Object.getOwnPropertySymbols(modelViewer).find(
          (x) => x.description === "scene"
        )
      ];

Then you use the scene to find the right mesh and put visibility false

var object = scene.getObjectByName(meshs[mesh]);
       //console.log(object+" "+meshs[mesh])
       if(object){

       
           object.visible = !object.visible;
           object.visible? this.innerHTML="on" : this.innerHTML="off";
           // hack to force scene to re-render
           modelViewer.scale = "0 0 0";
           modelViewer.scale = "1 1 1";
       }

I think it's not supposed to work but it does so yeah.
and now the autogenerated udsz doesn't come with mesh in transparent.

Hope it will help someone in the future

[elalish]

Thanks, glad that worked for you. This is outside of our public API, but you should be fine as long as you do a bit of testing when upgrading versions.

[LazZiya]

Hope it will help someone in the future

Sure that helped me at least :) Thanks a lot @GianiNavette 👍

[LazZiya]

I found that if we hide an object that has a touch event, still fires the touch event even if the object is hidden! So, I added below code to improve it and not fire the touch event:

object.visible ? object.scale.set(1, 1, 1) : object.scale.set(0, 0, 0);

[GianiNavette]

I found that if we hide an object that has a touch event, still fires the touch event even if the object is hidden! So, I added below code to improve it and not fire the touch event:

object.visible ? object.scale.set(1, 1, 1) : object.scale.set(0, 0, 0);

Super happy that it helped you, that's what I like with internet, and thanks for the improvement, i think i will use it !