1

I am using the A-Frame mapbox component in an A-Frame scene to provide a ground with a texture of mapbox map satellite view at 1:1 scale (1 meter in the mapbox map aligns to 1 unit in A-Frame / three.js scene)

Issue: When loading on desktop I see "correct" (expected) alignment of the mapbox plane with the rest of the 3d scene (Picture 1). However in mobile on a Pixel 3a the mapbox plane is incorrectly aligned (Picture 2) and appears to be smaller than in the deskop scene.

How can I ensure that the mapbox plane always has a 1:1 scale (1 meter of mapbox satellite view = 1 unit in three.js / A-Frame scene)?

Site: https://17thbikelane.glitch.me

Snippet of code used to define mapbox component:

      <a-entity
        geometry="primitive: plane; width: 512; height: 512;"
        material="color: #ffffff; shader: flat; side: both; transparent: true;"
        mapbox="center: -122.415126, 37.763699; zoom: 18; 
          accesstoken: pk.eyJ1IjoibWF0dHJlIiwiYSI6IjRpa3ItcWcifQ.s0AGgKi0ai23K5OJvkEFnA;
          style: mapbox://styles/mapbox/satellite-streets-v11;
          pxToWorldRatio: 4;"
        position="0 0 0"
        rotation="-90 0 0"
      ></a-entity>

(Full code of scene here: https://glitch.com/edit/#!/17thbikelane?path=index.html)

Picture 1 - Desktop - Correct:

satellite view matches location of A-Frame 3dstreet object in scene

Picture 2 - Mobile - Incorrect:

(Cross reference also posted as github issue on aframe-mapbox-component)

Kieran F.
  • 567
  • 4
  • 16
  • My working hypothesis: there is some built-in logic to mapbox-gl library (which is the main dependency of aframe-mapbox-component) that determines the canvas size based on the device display DPI. In this case the DPI is lower for the pixel phone than the Macbook Retina display so the canvas size is decreased for phone version. The component then resizes the plane in the scene to maintain the desired pixel per meter ratio. So perhaps the solution is to fork the component and disable this plane resize logic. – Kieran F. Dec 19 '20 at 00:52
  • Another clue: https://stackoverflow.com/questions/42150367/how-to-fix-canvas-size-in-mapbox-gl – Kieran F. Dec 19 '20 at 06:21

0 Answers0