Search code examples
javascriptaframe

Display a-image within a-videosphere


I want to display an image in my videosphere, but it doesn't display the image. This is my current code, based on examples found on stackoverflow and the A-Frame example showcase:

        <a-scene>
    <a-image src="assets/A.png" height:"100" position:"1 1 1" rotation:"0 90 0" scale:"1 1 1" visible:"true">
    </a-image>
    <a-videosphere rotation="0 0 0" src="#video" 
                         play-on-window-click
                         play-on-vrdisplayactivate-or-enter-vr>

    </a-videosphere>

          <a-camera user-height="0" wasd-controls-enabled="false" arrow-key-rotation>

            <a-entity id="msg" position="0 -0.3 -1.5" text="align:center; 
                    width:3;
                    wrapCount:100;
                    color:red;
                    value:Click window to make the video play, if needed."
                    hide-once-playing="#video">
            </a-entity>
          </a-camera>      

          <a-assets>
            <!-- Single source video. -->
            <video id="video" style="display:none" autoplay loop crossorigin="anonymous" playsinline webkit-playsinline>
              <source type="video/mp4" src="assets/360/promo.mp4" />
            </video>
          </a-assets>
        </a-scene>

Everything works out fine, no errors whatsoever. The AFRAME.registerComponent file is included on top of course. It simply doesn't display my image. Can anybody help me? Is it even possible to display images in videospheres?


Solution

  • If this is what you're going for, then the only issue is replacing ":" to "=" here:

    height:"100" position:"1 1 1" rotation:"0 90 0" scale:"1 1 1" visible:"true"
    


    HTML attributes:

    <a-entity attribute="data"></data>
    

    attribute properties:

    <a-entity attribute="propertyOne: data; propertyTwo: data"></data>