modelviewer ar-placement= wall is flipping the glb model

[anil-arnxt]

Description

I am using modelviewer to show glb model of an AC on the wall but its flipping it 360 degree when i place it on the wall.

Live Demo

Version

Browser Affected

• Chrome, version: xx.x.xxxx.xx
• Edge
• Firefox
• IE
• Safari

OS

• Android
• iOS
• Linux
• MacOS
• Windows

AR

• WebXR
• SceneViewer
• QuickLook

[vincentfretin]

This is discussed in #3989

[anil-arnxt]

Thanks for your reply. But I am working on Android not ios.

[anil-arnxt]

VID_20240506_150905_0_COMPRESSED.1.mp4

[vincentfretin]

From the video, it seems to be an issue with SceneViewer on Android. In this case please check only the correct checkboxes on the issue. Not sure if we can do anything about it.
You can set ar-modes="webxr quick-look" to force using webxr and not scene-viewer on Android. I didn't have an issue with webxr mode on Android.

[anil-arnxt]

 <model-viewer
                    id="change-speed-demo"
                    camera-controls
                    touch-action="pan-y"
                    src={glbFile}
                    ar
                  ar-placement={placement}
              
                    alt="A 3D model of a helmet"
                    ref={modelViewerRef}
                    animation-name="Dance"
                    ar-modes="webxr scene-viewer quick-look"
                    shadow-intensity="1">
                    <button
                      slot="ar-button"
                      id="ar-button"
                      onClick={handlearclick}>
                      View in your space
                    </button>
                      {showOverlay && (
                    <div className="overlay">
                      <p>Move your device to place the object in AR</p>
                      <button onClick={handlePlaceObject}>Start AR</button>
                    </div>
                  )}
                  <div id="ar-prompt">
                    <img src="https://modelviewer.dev/shared-assets/icons/hand.png" />
                    <div id="wall_floor">
                      Move Camera on the <span>{placement}</span>
                    </div>
                  </div>

                  <div id="ar-failure">AR is not tracking!</div>
                    {hasAnimation && (
                      <div id="controls">
                        <button onClick={handleToggleAnimation}>
                          {isPlaying ? <FaPause /> : <FaPlay />}
                        </button>
                      </div>
                    )}
                  </model-viewer>  

this is my code for ios its not flipping but when opening on android its flipping the model.

[elalish]

No, that's WebXR mode alright. Weird! Does that repro reliably even on other walls? The only thing I can imagine is that the returned hit matrix has an inverted normal. @bialpio Have you ever seen anything like this, or have a thought as to where in the code that could happen? The relevant piece of MV code is:

    if (this.placeOnWall === true) {
      // Orient the model to the wall's normal vector.
      this.goalYaw = Math.atan2(hitMatrix.elements[4], hitMatrix.elements[6]);
    }

which I don't see any problems with. hitMatrix is returned right from the WebXR API.

[elalish]

@anil-arnxt Can you fill in the device and OS/browser version info so we can try to repro?

[anil-arnxt]

@elalish I am using Android version 12 and chrome browser.

[elalish]

@anil-arnxt Can we have more details on your device type and browser version? (the xx.x.xxxx.xxx are intended to be filled in by you as part of the issue template).

[anil-arnxt]

@elalish please see my device that is mobile details