Three.js not possible to load textures

Question

I have an Three.js project with augmented reality and now I try to load a model with textures. For some reason my model is black and I have no textures. I checked the box in blender to export the images, I also see that in the .js file of the t-rex (model I'm using) that it lists the textures but my application wont load it.

EDIT (ADDED CODE) The code I use to load the model:

new THREE.JSONLoader().load("models/trex.json", function(geometry) {
                var material = new THREE.MeshFaceMaterial();

                var dino = new THREE.Mesh(geometry, material);

                dino.position.z = -50;
                dino.scale.x = dino.scale.y = dino.scale.z = 2;
                dino.updateMatrix();
                dino.overdraw = true;
                marker.object3d.add(dino);
            });

I add this to the marker object because I'm working with markers, If I show the marker I want a trex to be drawn on the marker (or right above it).

The trex model is the same as this one, but I've opened it in blender and used the latest version of blender to three.js exporter: http://alteredqualia.com/three/examples/webgl_trex.html

Also my trex.json file looks like this:

{

    "metadata" :
    {
        "formatVersion" : 3.1,
        "generatedBy"   : "Blender 2.63 Exporter",
        "vertices"      : 23273,
        "faces"         : 23268,
        "normals"       : 20842,
        "colors"        : 0,
        "uvs"           : [11497],
        "materials"     : 1,
        "morphTargets"  : 0,
        "bones"         : 0
    },

    "scale" : 0.0500,

    "materials": [  {
    "DbgColor" : 15658734,
    "DbgIndex" : 0,
    "DbgName" : "Material.001",
    "blending" : "NormalBlending",
    "colorAmbient" : [0.2933282256126404, 0.2933282256126404, 0.2933282256126404],
    "colorDiffuse" : [0.2933282256126404, 0.2933282256126404, 0.2933282256126404],
    "colorSpecular" : [0.13438941538333893, 0.13438941538333893, 0.13438941538333893],
    "depthTest" : true,
    "depthWrite" : true,
    "mapDiffuse" : "trex_image_copy.png",
    "mapNormal" : "trex_image_bump.png",
    "mapNormalFactor" : 12.0,
    "mapSpecular" : "trex_image_spec.png",
    "shading" : "Phong",
    "specularCoef" : 511,
    "transparency" : 1.0,
    "transparent" : false,
    "vertexColors" : false
    },

    {
    "DbgColor" : 15597568,
    "DbgIndex" : 1,
    "DbgName" : "Material",
    "blending" : "NormalBlending",
    "colorAmbient" : [0.7257574200630188, 0.7257574200630188, 0.7257574200630188],
    "colorDiffuse" : [0.7257574200630188, 0.7257574200630188, 0.7257574200630188],
    "colorSpecular" : [0.0, 0.0, 0.0],
    "depthTest" : true,
    "depthWrite" : true,
    "mapDiffuse" : "trex_image_copy.png",
    "mapLight" : "trex_image_eye.png",
    "mapLightWrap" : ["repeat", "repeat"],
    "shading" : "Lambert",
    "specularCoef" : 1,
    "transparency" : 1.0,
    "transparent" : false,
    "vertexColors" : false
    },

    {
    "DbgColor" : 60928,
    "DbgIndex" : 2,
    "DbgName" : "Material",
    "blending" : "NormalBlending",
    "colorAmbient" : [0.7257574200630188, 0.7257574200630188, 0.7257574200630188],
    "colorDiffuse" : [0.7257574200630188, 0.7257574200630188, 0.7257574200630188],
    "colorSpecular" : [0.0, 0.0, 0.0],
    "depthTest" : true,
    "depthWrite" : true,
    "mapDiffuse" : "trex_image_copy.png",
    "mapLight" : "trex_image_eye.png",
    "mapLightWrap" : ["repeat", "repeat"],
    "shading" : "Lambert",
    "specularCoef" : 1,
    "transparency" : 1.0,
    "transparent" : false,
    "vertexColors" : false
    }],

    "vertices":

I've tryed drawing a box and then add textures, that works but loading the file from json format and then displaying the textures doesnt work.

Thanks a lot!

Where is the problem code? I couldn't find a reference to trex.json in the main.js. Also, instead of just giving a huge archive, you could paste your model loading code, so it's easy to quickly glance if something smells there. Downloading zips may be discouraging to many potential helpers and a small stand-alone test case is preferred instead of a fully-fledged project. — Tapio, Oct 12 '12 at 12:33
@Tapio I did this because I suspect something else is wrong in the code. Around line 151 search for trex.json. Anyway I'll update the question, thanks! — DanFritz, Oct 12 '12 at 12:59
Btw, was there any errors in the js console? Also, I just remembered that at some point I couldn't get an object with normal map to load. One solution was to add a one line patch to three.js Loader to make it use the Phong material (which also has normal mapping in the dev version) instead of the dedicated normal map shader, but it started to work again at some point. — Tapio, Oct 13 '12 at 10:29
Did you move all of those textures into the same folder as the model? And your JSON file seems to think there's only one Material where there are 3 listed. — rrowland, Oct 13 '12 at 19:12
@rrowland `"materials" : 1,` should not pose an issue (in Three r58 at least). I have a Blender export with well over 50 materials, that entry still says 1, but it works fine. — Ken Herbert, Jun 30 '13 at 23:36

Kilghaz · Answer 1 · 2013-02-17T18:38:22.733

5

I think what you are looking for is loading the texture/material from your json. The JSONLoader actually handles that for you. The corresponding material is returned as second parameter of the loader-callback. This does of course only work if the json holds material data (in your case it does).

new THREE.JSONLoader().load("models/trex.json", function(geometry, materials) {
     var material = new THREE.MeshFaceMaterial(materials);
     var dino = new THREE.Mesh(geometry, material);

     dino.position.z = -50;
     dino.scale.x = dino.scale.y = dino.scale.z = 2;
     dino.updateMatrix();
     dino.overdraw = true;
     marker.object3d.add(dino);
 });

edited Feb 17 '13 at 18:38

answered Feb 17 '13 at 18:17

Kilghaz

63
1
4

This is partially working for me. It's pulling through texture properties, but not maps / images. The thing is that the map/image is not even appearing in the exported JS file, so it looks like a user/blender/exporter problem... – sparkyspider Mar 06 '13 at 11:09

score 2 · Accepted Answer · edited Sep 16 '16 at 15:17

This solution only works with the following releases: r58 ~ r69
Please check comments section and THREE.js migrations page for more information

I have had not so good luck exporting textures like you are trying. I would try just using the JSON exporter to export your geometry and uv mapping and handle loading textures yourself. Unless someone has a more elegant solution for you to use. I have been able to load up my textures, then in the callback create a material and use the loader to get the geometry from the JSON. Then in the loader's callback you create your mesh using both the geometry and the material you created earlier. Here is some example code:

var tex, mat, mesh;

$(window).load(function () {
    /** Load mesh from JSON, position, scale, add texture and add to scene */
    tex = THREE.ImageUtils.loadTexture('../img/texture.jpg', new THREE.UVMapping(), function () {
            mat = new THREE.MeshPhongMaterial({ map: tex });
            loader.load('model.js', function (geo) {
                mesh = new THREE.Mesh(geo, mat);
                mesh.position.set(0, 0, 0);
                mesh.scale.set(20, 20, 20);
                // etc, etc
                scene.add(mesh);
            });
        });
});

In the release r61, the mapping parameter for THREE.ImageUtils.loadTexture() which is null here doesn't work with CanvasRenderer(). The mesh will not be rendered. The correct parameter should be new THREE.UVMapping(). — Libert Piou Piou, Oct 09 '13 at 15:14
Please note since r70, you no longer use `new THREE.UVMapping()`, but `THREE.UVMapping` (this became a constant) — zessx, Sep 16 '16 at 15:15

score -1 · Answer 3 · answered Jul 03 '15 at 18:39

-1

Have you tried to give file permission to the texture?... this file is generated by blender, so you need to give permission to that file.

answered Jul 03 '15 at 18:39

user2769514

1

Three.js not possible to load textures

3 Answers3

Linked

Related