search

aframevr / aframe

:a: Web framework for building virtual reality experiences.
https://aframe.io/
MIT License
16.53k stars 3.92k forks source link

Cannot show image in mobile VR mode #4871

Open lbjworld opened 3 years ago

lbjworld commented 3 years ago

Description:

Everything looks ok in PC browsers, but when it comes to mobile, I can see the image in 3D mode, but cannot see image in mobile VR mode. I've tried both 1.1.0 and 1.2.0 version.

<html>
   <head>
     <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
   </head>
   <body>
     <a-scene>
       <a-sky color="#ECECEC"></a-sky>
       <a-box position="0 0 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
       <a-assets>
         <img id="my-image" src="test.jpg">
       </a-assets>
       <a-image src="#my-image" position="0 0 -2" height="0.5" width="1"></a-image>
       <a-entity id="rig" position="0 0 0">
         <a-entity id="camera" camera look-controls>
             <a-entity cursor 
               position="0 0 -1"
               geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
               material="color: black; shader: flat">
             </a-entity>
         </a-entity>
       </a-entity>                                                                                   
     </a-scene>                                                                                      
   </body>                                                                                           
 </html>
dmarcos commented 3 years ago

Are you serving your image with a local server? Can you reproduce with https://glitch.com/~aframe?

lbjworld commented 3 years ago

Hi @dmarcos, I'm serving both html pages and images with the same web server. Here is the sample code: https://glitch.com/edit/#!/image-shower

I solved the problem by setting <a-image> to <a-image material="transparent: false">, what I found in source code is that the default setting of a-image primitive is material="transparent: true", but I've no idea why this setting effect only in VR mode, while looks ok in normal mode.