Adding Instructions Page and Modifying AR Button Functionality in ModelViewer for Enhanced User Experience

[Akhil-coditas]

when i using modelviewer to load ar i have a model and ar button at first and when i click on ar button camera opens.. this is how model viewer works.

but at start i want to (display instructions page and ar button) not the model and ar button.. and when i click on ar button then it must work like before only.

how can i do that? if any code snippet you have

[danilokrulj]

You can make a div element containing the instructions that covers the whole page and a button that sets that divs display to "none", after that you will show the regular page with the model and the ar button, if i understand what you are trying to do.

[Akhil-coditas]

i was expecting like any key or something on model-viewer so that the model doesn't gets displayed..and then on click on ar-button camers gets opened with the model

[elalish]

You can just set display: none on the MV element, make your own AR button and call mv.activateAR(). It's not recommended, as we've found most users don't give the required AR camera permissions if you haven't first shown them the model in 3D.

[Akhil-coditas]

@elalish i tried this..works fine but

render()
{  this.renderer.setStyle(this.modelViewer.nativeElement, 'display', 'block');
  this.modelViewer.nativeElement.activateAR();
  const videoTexture = this.modelViewer.nativeElement.createVideoTexture("assets/Door_Green.mov");
  const material =this.modelViewer.nativeElement.model.materials[0];
  material.setAlphaCutoff(1);
  material.setAlphaMode("BLEND");
  material.pbrMetallicRoughness.setBaseColorFactor([1, 1, 1, 1]);
  const { baseColorTexture } = material.pbrMetallicRoughness;
  baseColorTexture.setTexture(videoTexture);
}

im doing this in angular..the video texture is not getting displayed by following this method

[Akhil-coditas]

video texture does get loaded..when i click on default ar button and then i call function to load video texture ..but when i load video texture after activateAR() its not working

[elalish]

Which AR mode are you using? video textures are only supported in WebXR mode, so try ar-modes='webxr'. If the button doesn't show up, then something else is wrong, like you're on iOS or you're not serving over HTTPS.