AR button not showing up on phone after adding a header bar to my page #4878

altlex · 2024-08-30T09:16:51Z

altlex
Aug 30, 2024

Hi all,

I hope I can get some help here. I have a model that works just fine with the default model-viewer html page generated by the editor.

Now i want to add a header bar plus button to the page and as soon as I do this the 'AR view in your space' button is no longer visible in AR mode.

What am I doing wrong or is this expected behaviour?. Can this be done?

See my code below:

<!doctype html>
<html lang="en">
<head>
    <title>Bekkersyachts AZUR45HT</title>
    <meta charset="utf-8">
    <meta name="description" content="&lt;model-viewer&gt; template">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" href="./styles.css" rel="stylesheet"/>
    <style>
        /* CSS for the header bar */
        .header-bar {
            width: 100%;
            height: 100px;
            background-color: #232323;
            display: flex;
            justify-content: center; /* Center the button horizontally */
            align-items: center; /* Center the button vertically */
            position: fixed; /* Makes the header stick to the top */
            top: 0;
            left: 0;
            z-index: 20; /* Ensure header is above all other content */
        }

        /* CSS for the button in the header bar */
        .header-button {
            background-color: #e37d22;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            font-family: Verdana, sans-serif;
            font-size: 16px;
            cursor: pointer;
            text-decoration: none; /* Remove underline from hyperlink */
        }

        .header-button:hover {
            background-color: #d0671b; /* Slightly darker color on hover */
        }

        /* Ensures the <model-viewer> element takes up the full viewport minus the header */
        model-viewer {
            width: 100%;
            height: calc(100vh - 100px); /* Adjusts for header height */
            margin-top: 100px; /* Push down to make room for the fixed header */
            z-index: 30; /* Ensure model viewer is above all other content */
        }
		
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
            overflow: hidden; /* Prevent scrolling when not needed */
        }
    </style>
</head>
<body>
    <!-- Header Bar -->
    <div class="header-bar">
        <a href="https://www.bekkersyachts.com" class="header-button">Visit Bekkersyachts</a>
    </div>

    <!-- Container for the model-viewer -->
    <model-viewer src="Azur45_01.glb" ar ar-modes="webxr scene-viewer quick-look" scale='1 1 1' skybox-image="ocean_hdr4k.jpg" environment-image="neutral.hdr" style="background-color: unset;" camera-controls tone-mapping="neutral" poster="poster.webp" shadow-intensity="1" auto-rotate>
    	  <div class="progress-bar hide" slot="progress-bar">
          <div class="update-bar"></div>
      </div>
      <button slot="ar-button" id="ar-button">
          View in your space
      </button>
      <div id="ar-prompt">
          <img src="ar_hand_prompt.png">
      </div>
	  </model-viewer>

    <!-- Script files -->
    <script src="script.js"></script>
    <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"></script>
</body>
</html>

Preview of the model: https://makeit3d.nl/wp-content/uploads/client/Bekkersyachts/Azur45HT/

Answered by elalish

Aug 30, 2024

I believe the issue is that your MV element is actually going off the bottom of your screen - you can tell by doing a two-finger pan and looking at the little centering dot - that's always in the middle of the element, but it appears low in yours, so you aren't actually seeing the bottom of the MV element, which is where the AR button is. This is just the usual CSS weirdness, possibly having to do with the URL bar at the top of the screen in mobile. You might want to replace <model-viewer> with an <img> tag and tweak your CSS until you can see the whole image, then go back to MV.

Also, nice boat - have you considered using our grounded skybox feature? https://modelviewer.dev/examples/ligh…

View full answer

elalish · 2024-08-30T17:29:22Z

elalish
Aug 30, 2024
Maintainer

I believe the issue is that your MV element is actually going off the bottom of your screen - you can tell by doing a two-finger pan and looking at the little centering dot - that's always in the middle of the element, but it appears low in yours, so you aren't actually seeing the bottom of the MV element, which is where the AR button is. This is just the usual CSS weirdness, possibly having to do with the URL bar at the top of the screen in mobile. You might want to replace <model-viewer> with an <img> tag and tweak your CSS until you can see the whole image, then go back to MV.

Also, nice boat - have you considered using our grounded skybox feature? https://modelviewer.dev/examples/lightingandenv/#groundedSkybox

2 replies

altlex Aug 31, 2024
Author

Hi Emmett, thanks for the reply and help! Going off screen was indeed the issue. I was able to solve it by replacing the header bar with just a simple HTML button. I have already tested the grounded skybox feature and it looks a bit strange since the model would still be floating about the sea surface a bit. Would probably work fine with a model where the hull is cut at the waterline. Something to play with :-) Thanks, have a great dat!

elalish Sep 3, 2024
Maintainer

Glad to hear it! You might consider adding an animation to your model - it doesn't even have to move in time: you can apply a transform to push it down that will not be taken into account by our framing.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

AR button not showing up on phone after adding a header bar to my page #4878

{{title}}

Replies: 1 comment 2 replies

{{title}}

{{title}}

{{title}}

Select a reply

AR button not showing up on phone after adding a header bar to my page #4878

altlex Aug 30, 2024

Replies: 1 comment · 2 replies

elalish Aug 30, 2024 Maintainer

altlex Aug 31, 2024 Author

elalish Sep 3, 2024 Maintainer

altlex
Aug 30, 2024

Replies: 1 comment 2 replies

elalish
Aug 30, 2024
Maintainer

altlex Aug 31, 2024
Author

elalish Sep 3, 2024
Maintainer