How to correctly set dimensions of an image in A-frame
By default, the size of any primitive in a-frame is 1 m. When a-image is initialized it has default size of 1 m width and 1 m height. So even if the image width and height are different in pixels they will be rendered at 1 m width and height.
Below code creates an image in the scene of width and height 1m.
<a-scene background="color: #ECECEC">
<a-assets><!-- width= 987, height= 739 -->
<img id="img1" src="assets/controllers.jpg"/>
</a-assets>
<a-image src="assets/controllers.jpg" position="0 0 -2"></a-image>
<a-plane color="#ff9988" rotation="270 0 0" height="7" width="7" position="0 -2 0"></a-plane>
<a-camera>
<a-cursor></a-cursor>
</a-camera>
</a-scene>
However, the image can have different height and width in pixels, hence we need to calculate the aspect ratio of the image and then derive its height and width in meter unit.
The easiest way to do this is to first find aspect ratio of the image (from its pixel dimension) then map the width (in pixels) to 1 m.
Now depending on the expected width of the image in VR environment, you can calculate height by dividing expected width in meter by aspect ratio.
The calculation is shown below
<!-- image width = 987, height = 739
aspect ratio = w/h = 987/739 = 1.33
assuming 987 px = 1 m
expected width of image in VR = 2.5 m
height of image in VR = 2.5/1.33 = 1.87 --><a-image src="assets/controllers.jpg" position="0 0 -2" width="2.5" height="1.87"></a-image>
Following this method will give correct image dimensions and will render in the most suitable format.
Kumar Ahir is an independent consultant working in the field of Immersive Technologies and Design. He’s been evangelizing the new Immersive Technologies and Design by actively doing workshops on Design Thinking, Design for AR and VR, Prototyping for Mixed Reality technologies. He aims to create a better Design Ecosystem for Immersive Technologies. He has co-founded 2 companies so far.
