Search code examples
texturesaframe

aframe texture is always black

I am new to aframe and I cannot set textures to a simple primitive. Any texture you set appears black. I have created up to the normal one in case that was the problem. I leave you the code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <a-scene>
      <a-assets>
        <img id="textura_pelota" src="img/pelota.jpg" />
        <img id="textura_pelota_normal" src="img/pelota_normal.jpg" />
      </a-assets>

      <a-sphere
        src="#textura_pelota"
        mtl="#textura_pelota_normal"
        position="0 2 -5"
        rotation="0 45 45"
        radius="1.25"
        scale="1 1 1"
      ></a-sphere>

      <a-sky color="#fff"></a-sky>
    </a-scene>

    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  </body>
</html>

Thanks in advance

Solution

  • the <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> MUST be placed before the a-scene tag. This ensures everything is properly loaded.

    If your texture is not loaded make sure it is accessible on the path you provided.

    Also, if you use file:// (or simply double-clicking the html file) to check your page, textures and other media may not work (you better assume it just won't). You need to use some kind of local server eg. node.js - source

    Here is a working example - notice that the aframe script is in the header

    <!DOCTYPE html>
<html lang="en">
  <head>
    <!-- aframe script should be in header and must be before a-scene -->
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <meta charset="UTF-8" />
  </head>
  <body>
    <a-scene>
      <a-assets>
        <img id="textura_pelota" src="https://images.pexels.com/photos/6157052/pexels-photo-6157052.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" crossorigin="anonymous"/>
      </a-assets>

      <a-sphere
        src="#textura_pelota"
        position="0 2 -5"
        rotation="0 45 45"
        radius="1.25"
        scale="1 1 1"
      ></a-sphere>

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