It is simply Clara.io and ThreeJS not agreeing on where to put the maps when exporting/importing materials. What fixed it for me (only if you are importing the script "three.js" and not "three.min.js" on your html):
I went into the resulting .json of my scene produced by Clara.io "Export scene to Three.js" function and checked the json structure clara.io makes for materials. Which is this:
I was only interested in seeing if I could get the diffuse map (texture map) on the objects, and so I focused on the field diffuseMap, which is the texture that goes on the meshes.
Then I checked how the material type is in ThreeJs. There are various ones, this is part of the MeshPhongMaterial (Line 13778):
this.type = 'MeshPhongMaterial';
this.color = new THREE.Color( 0xffffff ); // diffuse
this.ambient = new THREE.Color( 0xffffff );
this.emissive = new THREE.Color( 0x000000 );
this.specular = new THREE.Color( 0x111111 );
this.shininess = 30;
this.metal = false;
this.wrapAround = false;
this.wrapRGB = new THREE.Vector3( 1, 1, 1 );
this.map = null;
this.lightMap = null;
this.bumpMap = null;
this.bumpScale = 1;
this.normalMap = null;
this.normalScale = new THREE.Vector2( 1, 1 );
this.specularMap = null;
this.alphaMap = null;
In my eyes, it seemed like the ThreeJs equivalent to our diffuseMap would be the attribute named "map".
I opened three.js (the full script of the ThreeJs library) and searched for the json parsing function for this materials, which is the function named "parse" in the THREE.MaterialLoader Object. If you get there and scroll down a bit, you'll see this code (Line 12446):
if ( json.color !== undefined ) material.color.setHex( json.color );
if ( json.ambient !== undefined ) material.ambient.setHex( json.ambient );
if ( json.emissive !== undefined ) material.emissive.setHex( json.emissive );
if ( json.specular !== undefined ) material.specular.setHex( json.specular );
if ( json.shininess !== undefined ) material.shininess = json.shininess;
if ( json.uniforms !== undefined ) material.uniforms = json.uniforms;
if ( json.vertexShader !== undefined ) material.vertexShader = json.vertexShader;
if ( json.fragmentShader !== undefined ) material.fragmentShader = json.fragmentShader;
if ( json.vertexColors !== undefined ) material.vertexColors = json.vertexColors;
if ( json.shading !== undefined ) material.shading = json.shading;
if ( json.blending !== undefined ) material.blending = json.blending;
if ( json.side !== undefined ) material.side = json.side;
if ( json.opacity !== undefined ) material.opacity = json.opacity;
if ( json.transparent !== undefined ) material.transparent = json.transparent;
if ( json.wireframe !== undefined ) material.wireframe = json.wireframe;
Looks somewhat familiar? Well, SOLUTION:smile:
Add this line just after that code over there and now ThreeJS imports your maps with your meshes :
if ( json.diffuseMap !== undefined ) material.map = THREE.ImageUtils.loadTexture(json.diffuseMap);
If it isn't working for you there are various possible reasons:
- It is a hack, if they change the .json structure in Clara.io or they update three.js it might stop working.
- You might be importing "three.min.js" and not "three.js" on your html file.
- You might be importing a non-modified version of "three.js" instead of your editted one.
- Your textures might be in the wrong path/folder.
- Dunno, I'm quite a noob.
I explained all the process because what I just did will just load the diffuseMap. If you want to load other maps (normalMap, alphaMap, etc) you might have to do a similar thing. For example, I think to load the bumpMap you'd have to add the line:
if ( json.bumpMap !== undefined ) material.bumpMap = THREE.ImageUtils.loadTexture(json.bumpMap);
I can't guarantee it works as is for models with a precise UV Map, I didn't look that far into it just yet.
PLEEEASE Clara.io people, get in contact with Mr.doob or another Three.JS guru to solve this parser problem for good, so we can stop using this hack. You know this is necessary to really have a complete Export / Import solution between Clara.io and ThreeJs. Thank you!
Hope I was of help. Good day
EDIT: Oh... I searched more and there is a ticket for Mr.doob already about the issue, and a person called Sneagan will commit the general, working solution when he gets it solved. Awesome!