Export from Blender to Three js with Textures

3
votes

How can I export to Three.js with json format from Blender with Textures? If i check the checkbox "textures" my json file wont load to browser. Here is how my materials looks like with textures checkbox "materials": [{ "transparent": false, "DbgIndex": 0, "mapDiffuseRepeat": [1,1], "mapDiffuseAnisotropy": 1, "specularCoef": 50, "colorEmissive": [0,0,0], "colorDiffuse": [0.64,0.64,0.64], "wireframe": false, "visible": true, "blending": "NormalBlending", "DbgColor": 15658734, "mapDiffuse": "w.jpg", "DbgName": "Material.005", "opacity": 1, "depthWrite": true, "mapDiffuseWrap": ["RepeatWrapping","RepeatWrapping"], "depthTest": true, "shading": "phong", "colorSpecular": [0.5,0.5,0.5], "colorAmbient": [0.64,0.64,0.64] },...

If I don't it won't load textures but will load the object and here is my materials 

"materials": [{
    "blending": "NormalBlending",
    "specularCoef": 50,
    "colorEmissive": [0,0,0],
    "DbgName": "Material.005",
    "colorDiffuse": [0.64,0.64,0.64],
    "DbgIndex": 0,
    "opacity": 1,
    "colorSpecular": [0.5,0.5,0.5],
    "shading": "phong",
    "wireframe": false,
    "colorAmbient": [0.64,0.64,0.64],
    "depthTest": true,
    "transparent": false,
    "visible": true,
    "depthWrite": true,
    "DbgColor": 15658734
},...

Here is my json loader

    loader.load('oddo.js', function(geometry, materials) {
        mesh = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));
        mesh.scale.x = x;
        mesh.scale.y = y;
        mesh.scale.z = z;
        mesh.opacity=1;
        var model = new THREE.Object3D();
        model.add(mesh);
        model.position.set(0,0,0);
        //mesh.translation = THREE.GeometryUtils.center(geometry);
        group.add(model);
    });

and here is an image from blender object and exporter

Thank you!

2
javascriptjsonthree.jsblender

2 Answers

2
votes

To whom it may concern

The solution for me is:

  1. In blender turn your object from "object mode" to "edit mode"
  2. Press "u"
  3. Select "Smart UV Project"
  4. Press ok
  5. Check the options in my image
0
votes

I think @Iraklis-Bekiaris is suggesting you don't have your UVs laid out. If that's the case, maybe this video tut will help. https://www.youtube.com/watch?v=kDAxLvtpH0Y

Though, I'm thinking you're texture might not be linked properly. w.jpg is your diffuse map. You'll need to make sure that a copy of w.jpg is in the same directory you're launching your HTML page from.

One way you check if there are any errors on the page is to check your console. Load up your HTML page in Chrome. If you can't right click on the page and "inspect element", (three sometimes disables right click), you should be able to select from your menu bar "view"> "developer" > "Javascript Console".

I hope that helps!