Exported Blender model not displaying material's texture

Questions
,
1

Brand new newbie here.

On http://myprintableparty.com/experimental I’m trying to load a cup with an image on it. But the material just shows up as black.

My cup.json model includes the following:
> “materials”:[{

        "transparent":false,
        "blending":"NormalBlending",
        "DbgName":"Material.002",
        "wireframe":false,
        "specularCoef":50,
        "opacity":1,
        "depthTest":true,
        "visible":true,
        "colorSpecular":[0.725731,0.725731,0.725731],
        "colorDiffuse":[0.8,0.8,0.8],
        "DbgColor":15658734,
        "doubleSided":false,
        "colorEmissive":[0,0,0],
        "depthWrite":true,
        "DbgIndex":0,
        "shading":"phong"
    },{
        "transparent":false,
        "mapDiffuseWrap":["repeat","repeat"],
        "mapDiffuseRepeat":[1,1],
        "blending":"NormalBlending",
        "mapDiffuseAnisotropy":1,
        "DbgName":"Material.003",
        "wireframe":false,
        "specularCoef":50,
        "opacity":1,
        "depthTest":true,
        "visible":true,
        "colorSpecular":[0.5,0.5,0.5],
        "colorDiffuse":[0.0363603,0.0511351,0.64],
        "DbgColor":15597568,
        "mapDiffuse":"Untitled2.png",
        "doubleSided":false,
        "colorEmissive":[0,0,0],
        "depthWrite":true,
        "DbgIndex":1,
        "shading":"phong"
    }],

The texture, Untitled2.png, is available – it’s visible in [http://myprintableparty.com/experimental/Untitled2.png].

Did I export from Blender incorrectly, perhaps? I’m using the ThreeJS export utility that creates a nice JSON file.

Screen Shot 06-14-17 at 04.47 PM.PNG239×901 16.6 KB

2

It looks like your mesh is using the first material in your materials list:

mesh = new THREE.Mesh(geometry, materials);

You may try to remove the first material from the file or just tell it to use the second one like this:

mesh = new THREE.Mesh(geometry, materials[1]);

3

Thanks. I tried it, but now the entire thing is black. :frowning:

There are two materials - white for the inside and rim, and then the picture/image/texture/whatever-I’m-still-learning is for the outside of the cup.

If I do
mesh = new THREE.Mesh(geometry, materials[1]);
it’s all the second material, but still without my picture. Black. (If I do
mesh = new THREE.Mesh(geometry, materials[0]);
then it’s all white.)

4

Re, the support for multiple materials on the same object is still under dev.

https://github.com/mrdoob/three.js/issues/8924

You may have to create a 2-piece object for it to render properly. You could try a single object with UVmapping, still, it will need 2 sides to properly apply the colors/image. If your object uses 1 layer of faces to render, it will render both sides with the same color mapping, in other words it can’t render one side white and the other side black unless you create a custom shader for it.

Hope this will help you move forward…

1 Like
5

Ooh! I did UV mapping on a single material version, and it’s showing the texture! Thanks! Now to figure out the RIGHT uv mapping.

6

I’m way closer.

In Blender, I chose the texture to be mapped with Global coordinates, Tube projection, and then in the object I chose the UV mapping to be Cylinder projection.

My texture renders now in threejs, but I haven’t figured out how to make it “fit” – it shouldn’t show the black on above and below the image.

7

Re Randy,

Do you use face inner and outer layers in your mesh?