Texture Aframe Object

I am loading an Aframe object in the wavefront format, but the texture remains invisible, that means the object appears all black:

<!doctype html>
  <head>
  <meta charset="utf-8">
    <script src="https://aframe.io/releases/0.3.2/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-assets>
        <a-asset-item id="test-obj" src="test.obj"></a-asset-item>
        <a-asset-item id="test-mtl" src="test.mtl"></a-asset-item>
      </a-assets>
      <a-entity position="1.75 0 1.2" rotation="0 28 0">
        <a-camera near="0.1" user-height="0"></a-camera>
      </a-entity>
      <a-obj-model src="#test-obj" mtl="#test-mtl" scale="0.1 0.1 0.1"></a-obj-model>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

How can I make the texture of this model visible?

Solution

Here's a solution that may work if the object was created in Magica Voxel or a similar editor.

Open your .mtl file in a text editor, look for the line that starts with map_Kd. Just after it is the name of another file such as "test.png".

That file must also be in the same directory as your .mtl and .obj files, so make sure you include it. It's the texture map that maps colors to locations on the object.

More information about the Wavefront .mtl file format can be found here: https://people.cs.clemson.edu/~dhouse/courses/405/docs/brief-mtl-file-format.html