Clara.io (or) ThreeJS: Extruded face renders grey, or doesn't render material

(Note: I've posted this on the Clara.io Forums and while it's only been a day, I've not received any replies. I figured I'd try StackOverflow and update my Clara.io post.)

I'm hoping (guessing) that this is a quick-fix and that I'm missing something basic, but I've searched for quite a bit of time looking for a solution. I'm seeing my final render has the color grey in place of the assigned material, whereas all other non-extruded faces render fine.

I'm learning the Clara.io interface, (along with the basic essentials of 3D modeling really), and have a basic cube with a few extruded faces. In the screenshot below you can see the normals of all faces, including the extruded ones. This is a result of Dr. Google saying "look at your normals, they're probably flipped". It doesn't appear so.

While I put this in the "Rendering" category, I could've also applied it to "ThreeJS" as I'm wondering if it's something I've configured wrong in the ThreeJS scene. I'm using a MeshStandardMaterial along with a normal and roughness map:

var materialTest5 = new THREE.MeshStandardMaterial( {
  normalMap: textureLoaderQ.load( "/textures/metal18/metal_plates_18_nm.jpg" ),
  roughnessMap: textureLoaderQ.load( "/textures/metal18/metal_plates_18_rough.jpg" ),
    map:  textureLoaderQ.load( "/textures/metal18/metal_plates_18_dif.jpg" )
} );

var loader5 = new THREE.OBJLoader();
loader5.load( "/models/capsule/test-01.obj", function ( group ) {
  for ( var index = 0; index < group.children.length; index++ ) {
        var geometry = group.children[ index ].geometry;
        var meshTest5 = new THREE.Mesh( geometry, materialTest5 );
        scene.add( meshTest5 );
  }
} );

They appear like this:

You can see the grey faces. Try as I might, I can't get those faces to render using the same maps as the other faces. I've tried flipping normals, I've tried altering the material in ClaraIO, and a few other settings that were futile.

Within the Clara.io, I can see a similar situation:

Anyone see this before? Have an idea?

Thank you.

Jon

[UPDATE] Here are the OBJ and MTL files I'm using:

OBJ MTL

MTL

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

newmtl Standard
Ns 96.078431
Ka 0.000000 0.000000 0.000000
Kd 1.000000 1.000000 1.000000
Ks 0.000000 0.000000 0.000000
Ni 1.000000
d 1.000000
illum 2
map_Kd metal_plates_18_dif.jpg

OBJ (Not too many points, so I figured I could add it here too).

# Blender v2.74 (sub 0) OBJ File: ''
# www.blender.org
mtllib test-01.mtl
o Box
v 0.500000 0.500000 0.500000
v 0.500000 0.500000 0.000000
v 0.500000 0.500000 -0.500000
v 0.500000 0.000000 0.500000
v 0.500000 0.000000 0.000000
v 0.500000 0.000000 -0.500000
v 0.500000 -0.500000 0.500000
v 0.500000 -0.500000 0.000000
v 0.500000 -0.500000 -0.500000
v -0.500000 0.500000 -0.500000
v -0.500000 0.500000 0.000000
v -0.615470 0.615470 0.615470
v -0.500000 0.000000 -0.500000
v -0.500000 0.000000 0.000000
v -0.500000 0.000000 0.500000
v -0.500000 -0.500000 -0.500000
v -0.500000 -0.500000 0.000000
v -0.500000 -0.500000 0.500000
v 0.000000 0.500000 -0.500000
v 0.000000 0.500000 0.000000
v 0.000000 0.506330 0.500000
v 0.000000 -0.500000 0.500000
v 0.000000 -0.500000 0.000000
v 0.000000 -0.500000 -0.500000
v 0.000000 0.000000 0.500000
v 0.000000 0.000000 -0.500000
v -0.615470 0.115470 0.115470
v -0.615470 0.615470 0.115470
v -0.615470 0.115470 0.615470
v -0.115470 0.615470 0.615470
v -0.115470 0.615470 0.115470
v -0.115470 0.115470 0.615470
vt 0.000000 1.000000
vt 0.000000 0.500000
vt 0.500000 0.500000
vt 0.500000 1.000000
vt 1.000000 0.500000
vt 1.000000 1.000000
vt 0.000000 0.000000
vt 0.500000 0.000000
vt 1.000000 0.000000
vn 1.000000 0.000000 0.000000
vn -1.000000 0.000000 0.000000
vn 0.000000 1.000000 0.000000
vn 0.000000 -1.000000 0.000000
vn 0.000000 0.000000 1.000000
vn 0.000000 0.000000 -1.000000
vn -0.707100 0.000000 -0.707100
vn -0.707100 -0.707100 0.000000
vn 0.707100 0.707100 -0.000000
vn 0.000000 0.707100 -0.707100
vn 0.000000 -0.707100 0.707100
vn 0.707100 0.000000 0.707100
usemtl Standard
s 1
f 1/1/1 4/2/1 5/3/1 2/4/1
f 2/4/1 5/3/1 6/5/1 3/6/1
f 4/2/1 7/7/1 8/8/1 5/3/1
f 5/3/1 8/8/1 9/9/1 6/5/1
f 10/1/2 13/2/2 14/3/2 11/4/2
f 28/4/2 27/3/2 29/5/2 12/6/2
f 13/2/2 16/7/2 17/8/2 14/3/2
f 14/3/2 17/8/2 18/9/2 15/5/2
f 10/1/3 11/2/3 20/3/3 19/4/3
f 19/4/3 20/3/3 2/5/3 3/6/3
f 28/2/3 12/7/3 30/8/3 31/3/3
f 20/3/3 21/8/3 1/9/3 2/5/3
f 18/1/4 17/2/4 23/3/4 22/4/4
f 22/4/4 23/3/4 8/5/4 7/6/4
f 17/2/4 16/7/4 24/8/4 23/3/4
f 23/3/4 24/8/4 9/9/4 8/5/4
f 12/1/5 29/2/5 32/3/5 30/4/5
f 21/4/5 25/3/5 4/5/5 1/6/5
f 15/2/5 18/7/5 22/8/5 25/3/5
f 25/3/5 22/8/5 7/9/5 4/5/5
f 3/1/6 6/2/6 26/3/6 19/4/6
f 19/4/6 26/3/6 13/5/6 10/6/6
f 6/2/6 9/7/6 24/8/6 26/3/6
f 26/3/6 24/8/6 16/9/6 13/5/6
f 11/7/7 14/7/7 27/7/7 28/7/7
f 14/7/8 15/7/8 29/7/8 27/7/8
f 21/7/9 20/7/9 31/7/9 30/7/9
f 20/7/10 11/7/10 28/7/10 31/7/10
f 15/7/11 25/7/11 32/7/11 29/7/11
f 25/7/12 21/7/12 30/7/12 32/7/12

[UPDATE 2] Problem solved thanks to a comment @manthrax made below.

I rebuilt the UV map using the Clara.io "UV Map" option in the Object Tools section. I also had to set the "Projection" to "Box" so the newly created extruded faces didn't have a skewed/angled diffuse layout. While initially I had only included a "diffuse" image, I added both a "normal" and "specular" map this time around. The image below is a bit bright, and loses the metallicity of my original render above, but that's because I put the specular to white (#ffffff). I'll play around with those settings next. Here's the final result:

I also wanted to note that I had to change the Three JS code a bit, to handle the MTL file that Clara.io generated:

var meshZ = null;

var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath( "/models/capsule/" );
mtlLoader.load( 'test-01.mtl', function( materials ) {
  materials.preload();
  var objLoader = new THREE.OBJLoader();
  objLoader.setMaterials( materials );
  objLoader.setPath( "/models/capsule/" );
  objLoader.load( 'test-01.obj', function ( object ) {
    meshZ = object;
    scene.add( meshZ );
  } );
} );

Thanks again, @manthrax.

Onto the next 3D OBJ creation learning curve...

Solution

In you loader.load callback.. instead of looping through children, can you try:

group.traverse((e)=>{if(e.material)e.material = materialTest5;})

instead of looping through children?

Also, could you post your .OBJ file so we can take a look?