how to show 3 button in AR mode and manage model opacity and show/hide model using model-viewer

Question

I use google model-viewer to show model and also i want to show 3 button in AR mode,but i didn't see any html element in AR mode and also how to manage model-viewer model opacity and how to hide or show model using model-viewer in AR mode please help.

[check below screen shot of my code]

<model-viewer id="color" camera-controls touch-action="pan-y" interaction-prompt="none" src="./Assets/wheel.glb" ar ar-modes="webxr"  alt="A 3D model of an astronaut">
    <div class="controls" ,="" id="color-controls">
      <button data-color="1,1,1,1">Show</button>
      <button data-color="0,0,0,-1">Hide</button>
    </div>
  </model-viewer>
  <script>
  const modelViewerColor = document.querySelector("model-viewer#color");
  
  document.querySelector('#color-controls').addEventListener('click', (event) => {
    const colorString = event.target.dataset.color;
  
    if (!colorString) {
      return;
    }
  
    const color = colorString.split(',')
        .map(numberString => parseFloat(numberString));
  
    console.log('Changing color to: ', color);
    const [material] = modelViewerColor.model.materials;
    material.pbrMetallicRoughness.setBaseColorFactor(color);
  });
  </script>
(https://i.stack.imgur.com/QzIQ4.png)