Search code examples
aframewebvr

How do I Load a 360 degree skybox in A-Frame

I have been having issues with loading a local image into the skybox. This is my code.

<html>
...
.....
<body>
    <a-scene>
        <a-assets>
            <img id="sky" src="test.jpg">
        </a-assets>
        <a-sky color="#6EBAA7" src="#sky"></a-sky>
    </a-scene>

</body>
...
</html>

file structure is 

|webvr
  |index.htm
  |test.jpg

all I get is a lime green background without any trace of an image.

Solution

  • The skybox is the a-sky, it's a spherical. If you have a cubemap you could convert it. I think there are a lot of tools out there. Or try the cubemap community code. Someone made it already. If you only want to load an image to the sky, just use <a-sky src="#sky"></a-sky> without the color. I think color overrides the image. Edit: Ok, the color gets multiplied by the image. So you should see the image in a green tint. Edit2: Ok, if you load the page locally without any server, you won't see any images, they won't get loaded, as cors headers are missing and your local pc is not a local server. Just use mongoose. https://www.cesanta.com/products/binary :)