I have an experience where I lay 2 3D models on the ground and have an image behind them floating in air. The image also has a text image added on top of it. I want the user to go close to the image to read, but it does not stay stable in the position and keeps moving back.
Code
<a-assets>
<img id="bgImage" src="assets/bg_image.png"></a-asset-item>
<img id="logoImage" src="assets/logo_image.png"></a-asset-item>
<img id="textImage" src="assets/text_image.png"></a-asset-item>
</a-assets>
<a-entity id="main" scale="1 1 1" position="0 -2 -10" shadow="receive: false">
<!-- 3D model 1 -->
<!-- 3D model 2 -->
<a-entity position="5 15 -30">
<a-image src="#bgImage" width="30" height="30"></a-image>
<a-image src="#logoImage" width="10" height="10" position="0 8 1"></a-image>
<a-image src="#textImage" width="20" height="20" position="0 -5 4"></a-image>
</a-entity>
</a-entity>