'Can't apply texture graphic to box in A-Frame basic scene

I am going through the Basic Scene demo for A-Frame.

https://aframe.io/docs/0.8.0/guides/building-a-basic-scene.html

When I get to the Applying Image Texture and Using Asset Management System parts, I cannot get the suggested texture to show up at all. It seems to block the creation of the box and subsequently the sky entity as well...just a blank white screen (maybe the box exists with a default color of white?)

My question is what sorts of settings would prevent my simple application from being able to take an image and use it in A-Frame?

I am using a local server with live-server.

<!DOCTYPE html>
<html>
<head>
    <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
    <script src="https://unpkg.com/aframe-environment-component/dist/aframe-environment-component.min.js"></script>
</head>
<body>
        <a-scene>
            <a-assets>
                <img id="boxTexture" src="https://i.imgur.com/mYmmbrp.jpg">
            </a-assets>

            <a-box src="#boxTexture" position="0 2 -5" rotation="0 45 45" scale="2 2 2"></a-box>

            <a-sky color="#222"></a-sky>
        </a-scene>
</body>
</html>

Using Firefox Nightly for headset use

PS - I got it to work by putting the image file in the local folder, but I'd rather learn how to use the internet as an asset manager rather than having everything locally.

PPS - Thinking it may be an async problem, as in the larger files don't load fast enough before the rendering of the component, so the entity is not rendered. I am able to use smaller memory size images (like https://cdn.aframe.io/a-painter/images/floor.jpg ) with a hyperlink in the src, but seemingly not larger files

This is interesting, but putting the script at the bottom did not help me in any way. https://github.com/aframevr/aframe/issues/2058

Works with Chrome, but not with Firefox.

htmlfirefoxthree.jsaframe


Solution 1:[1]

Looks and works fine to me. Maybe Nightly is just bunk.

Solution 2:[2]

Loading locally the image got the same problem (it's a Cross-Origin Resource Sharing (CORS) problem). Worked for me only by putting the image stored in the web, like the example bellow:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Arms</title>
    <meta name="description" content="Example - A-Frame">
    <script src="aframe-master.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box src="https://cdn.glitch.global/6f5f5fe8-0777-45ab-9d10-0f837c09cea0/green.png" position="0 2 -5" rotation="0 0 0" scale="2 2 2"></a-box>

      <a-sky color="#222"></a-sky>
    </a-scene>
  </body>
</html>```

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ngokevin
Solution 2 Lucas Favaro Borsatto

Related Questions