CODEWITHSUNDEEP
objectaframe
Eoin Trainor
Eoin Trainor

Reputation: 23

A-frame not loading materials

I understand this seems to be a common problem for beginners in A-Frame but I'm struggling to get a material onto a model in this. I can successfully get the model in but it always comes out grey with the console telling me:

"Material component properties are ignored when a .MTL is provided".

Grey...

I've made this in Blender with a simple glossy material and exported it as an .obj with relative paths (that's what is recommended yes?)

I'm not familiar with .mtl or .obj files but is there something else I have to do to them to get them working in A-Frame? Or is it an issue with the code or CORS?

html 

 <!DOCTYPE html>
    <html>
    <head>
        <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
    </head>

    <body>
        <a-scene stats>
            <a-assets>

                <!--Not working-->
                <a-asset-item src="meh.obj" id="meh"> </a-asset-item>
                <a-asset-item src="meh.mtl" id="mat"> </a-asset-item>

            </a-assets>

            <a-obj-model src="#meh" mtl="#mat" position ="0 0 5"> </a-obj-model>

        </a-scene>
    </body>
    </html>

obj

    # Blender v2.78 (sub 0) OBJ File: ''
    # www.blender.org
    mtllib meh.mtl
    o Cube
    v 1.083111 0.312460 -1.083111
    v 1.083111 0.312460 1.083111
    v -1.083111 0.312460 1.083110
    v -1.083110 0.312460 -1.083111
    v 1.083111 3.724101 -1.083110
    vn 0.0000 -1.0000 0.0000
    vn 1.0000 -0.0000 0.0000
    vn -0.0000 0.5360 0.8442
    vn -0.8442 0.5360 -0.0000
    vn 0.0000 0.0000 -1.0000
    usemtl RedGloss
    s off   
    f 1//1 2//1 3//1 4//1
    f 1//2 5//2 2//2
    f 2//3 5//3 3//3
    f 3//4 5//4 4//4
    f 5//5 1//5 4//5

MTL:

# Blender MTL File: 'None'
# Material Count: 1

newmtl RedGloss
Ns 96.078431
Ka 1.000000 1.000000 1.000000
Kd 0.640000 0.640000 0.640000
Ks 0.500000 0.500000 0.500000
Ke 0.000000 0.000000 0.000000
Ni 1.000000
d 1.000000
illum 2

Appreciate the help :)

Upvotes: 2

Views: 1680

Answers (1)

Piotr Adam Milewski
Piotr Adam Milewski

Reputation: 14645

The three.js obj/mtl loaders don't work well, and MTL files generated by Maya ( maybe even blender ) are unreadable for the loaders, which are implemented in the a-frame material system. Multiple problems reported here, or here.
The easiest way, as I suggested in one of the links, is uploading the model to clara.io, and downloading an three JSON model, as it seem to work very good. Maybe You can try with Don McCurdy's loaders(though they seem to be more for the geometry, not for the material), but it seems, 3D formats are quite complicated.
Since You do it exactly as suggested in the official docs, I wouldn't say there's something wrong with Your code.

Upvotes: 1

Related Questions