search

AR-js-org / AR.js

Image tracking, Location Based AR, Marker tracking. All on the Web.
MIT License
5.4k stars 922 forks source link

Changing the orientation of the mobile makes the model point in the wrong direction. #413

Open sinano1107 opened 2 years ago

sinano1107 commented 2 years ago

Do you want to request a feature or report a bug? bug

What is the current behavior?

<!DOCTYPE html>
<html>
  <script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
  <!-- we import arjs version without NFT but with marker + location based support -->
  <script src="https://raw.githack.com/AR-js-org/AR.js/dev/aframe/build/aframe-ar.js"></script>
  <body style="margin: 0px; overflow: hidden">
    <a-scene embedded arjs device-orientation-permission-ui="enabled: false">
      <a-marker preset="hiro">
        <a-entity
          position="0 0 0"
          rotation="0 0 0"
          scale="0.05 0.05 0.05"
          gltf-model="./trex/scene.gltf"
        ></a-entity>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

Run this EXAMPLE on a mobile device. It works fine immediately after loading, but if you change the orientation of the device (i.e., switch between portrait and landscape mode), the t-lex will be oriented incorrectly, as shown in the image. IMG_0106 IMG_0105

It may have something to do with this issue as well.

If the current behavior is a bug, please provide the steps to reproduce. Please access the HTML above from your mobile device

Please mention other relevant information such as the browser version, Operating System and Device Name iphone 13 pro safari and chrome google pixel 5 chrome

What is the expected behavior? The t-lex should be displayed in the correct orientation even if the phone changes orientation

sinano1107 commented 2 years ago 
<!DOCTYPE html>
<html>
  <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  <!-- we import arjs version without NFT but with marker + location based support -->
  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
  <body style="margin: 0px; overflow: hidden">
    <a-scene embedded arjs>
      <a-marker preset="hiro">
        <a-entity
          position="0 0 0"
          scale="0.05 0.05 0.05"
          gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
        ></a-entity>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>

    <script></script>
  </body>
</html>

It also occurs in this code

sinano1107 commented 2 years ago

Does anyone have a solution for this? I continue to be stumped by this issue. Does this function have anything to do with it?

sinano1107 commented 2 years ago

https://github.com/jeromeetienne/AR.js/issues/411

sinano1107 commented 2 years ago

https://github.com/jeromeetienne/AR.js/issues/749 My problem is probably the same as this report

sinano1107 commented 2 years ago

Why not just run this process in the orientationChange event listener as well? @kalwalt

sinano1107 commented 2 years ago

I'm sorry. Changing the orientation of the context every time the screen orientation changes makes it even stranger. I am not really understanding what the code means. Not many people have mentioned this issue. What do you think is the cause of this problem? I would appreciate any advice you could give me. @kalwalt

sahilimmco commented 1 year ago

I am using location based ar.js. I am also facing this issue when I change from portrait to landscape the object changes its position on Ipad .But while checking with android device it is working fine. If anybody have the solution please share with me