have to press AR button twice to load the AR model in version 1.2.1

[xzhub]

with version 0.9.0, the ar button in IOS brings AR mode directly. (but it does not work with my android phone) with version v1.2.1, the ar button first load the model in the regular browser view, then you have to press the ar button again to view it in AR mode. (it supports both my android device and iPhone)

Is it possible to make v1.2.1 works the same way as v0.9.0?

code:

<style>

model-viewer {

width: 100%;

height: 100vh;

}

#button-load {

background-repeat: no-repeat;

background-size: 24px 24px;

background-position: 6% 50%;

cursor: pointer;

border-radius: 6px;

display: inline-block;

font-weight: 500;

position: absolute;

left: 50%;

top: 50%;

transform: translate3d(-50%, -50%, 0);

z-index: 100;

}

</style>

<!-- The following libraries and polyfills are recommended to maximize browser support -->

<!-- NOTE: you must adjust the paths as appropriate for your project -->

<!-- 🚨 REQUIRED: Web Components polyfill to support Edge and Firefox < 63 -->

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.4.4/webcomponents-loader.js"></script>

<!-- 💁 OPTIONAL: Intersection Observer polyfill for better performance in Safari and IE11 -->

<script src="https://unpkg.com/intersection-observer@0.11.0/intersection-observer.js"></script>

<!-- 💁 OPTIONAL: Resize Observer polyfill improves resize behavior in non-Chrome browsers -->

<script src="https://unpkg.com/resize-observer-polyfill@1.5.1/dist/ResizeObserver.js"></script>

<!-- 💁 OPTIONAL: Fullscreen polyfill is needed to fully support AR features -->

<script src="https://unpkg.com/fullscreen-polyfill@1.0.3/dist/fullscreen.polyfill.js"></script>

<!-- 💁 OPTIONAL: Include prismatic.js for Magic Leap support -->

<script src="https://unpkg.com/@magicleap/prismatic@2.0.5/prismatic.min.js"></script>

<!-- 💁 OPTIONAL: The :focus-visible polyfill removes the focus ring for some input types -->

<script

src="https://unpkg.com/focus-visible@5.2.0/dist/focus-visible.js"

defer

></script>

<!-- All you need to put beautiful, interactive 3D content on your site: -->

<style>

#lazy-load-poster-20201009-052629-0fc619a8-7eae-44d1-9a93-8a3962148734 {

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

background-image: url("/static/poster/20201009-052629-0fc619a8-7eae-44d1-9a93-8a3962148734.jpg");

background-size: contain;

background-repeat: no-repeat;

background-position: center;

}

</style>

<script>

document.querySelector("#model-viewer").addEventListener('ar-status', (event) => {

if(event.detail.status === 'failed'){

const error = document.querySelector("#error");

error.classList.remove('hide');

error.addEventListener('transitionend',(event) => {

error.classList.add('hide');

});

}

});

</script>

<style>

#error {

background-color: #ffffffdd;

border-radius: 16px;

padding: 16px;

position: absolute;

left: 50%;

top: 50%;

transform: translate3d(-50%, -50%, 0);

transition: opacity 0.3s;

}

#error.hide {

opacity: 0;

visibility: hidden;

transition: visibility 2s, opacity 1s 1s;

}

</style>

<div class="container">
  <model-viewer
    src="https://dnsy0oj5vmtpj.cloudfront.net/20201009-052629-0fc619a8-7eae-44d1-9a93-8a3962148734/ycqqO.glb"
    ios-src="https://dnsy0oj5vmtpj.cloudfront.net/20201009-052629-0fc619a8-7eae-44d1-9a93-8a3962148734/ycqqO.usdz"
    reveal="interaction"
    shadow-intensity="1"
    camera-controls
    ar
    magic-leap
    quick-look-browsers="safari chrome"
    controls
  >
    <div id="error" class="hide">AR is not supported on this device</div>
    <div id="lazy-load-poster-20201009-052629-0fc619a8-7eae-44d1-9a93-8a3962148734" slot="poster"></div>
    <div id="button-load" slot="poster" class="btn">

      <i
        class="fa fa-play-circle-o fa-5x"
        aria-hidden="true"
        title="Click to load the 3D model"
      ></i>

    </div>
</model-viewer>
</div>

<!-- Loads <model-viewer> for modern browsers: -->
<script
  type="module"
  src="https://unpkg.com/@google/model-viewer@1.2.1/dist/model-viewer.min.js"
></script>

<!-- Loads <model-viewer> for old browsers like IE11: -->
<script
  nomodule
  src="https://unpkg.com/@google/model-viewer@1.2.1/dist/model-viewer-legacy.js"
></script>

[elalish]

If I'm understanding you correctly, you made the AR button clickable through the poster so that you could activate AR before the 3D model was shown on the web at all, but it only worked on iOS? That was definitely not an intended option, but it's interesting. Why do you not want to show the 3D model on your website?

[xzhub]

Sorry I did not make myself clear. What I’m trying to say is that in 0.9.0, the ar button is on top of poster while in 1.2.1, the ar button is under the poster.

so in 1.2.1, when i click ar button, I actually clicked the poster, so model was loaded.

How can I move ar button on top of poster again?

[elalish]

Ah, I see now; I think my fix in #1567 was not the right approach. Thank you for the explanation.