Clara.io（或）ThreeJS：拉伸的面部呈现灰色，或不呈现材质

Question

（注意：我已经将其发布在Clara.io论坛上，虽然只有一天，但没有收到任何回复。我认为我会尝试StackOverflow并更新我的Clara.io帖子。）< / p>

我希望（猜测）这是一个快速解决方案，并且我缺少基本的知识，但是我已经花了很多时间寻找解决方案。我看到我的最终渲染使用灰色代替了指定的材质，而所有其他未拉伸的面都可以正常渲染。

我正在学习Clara.io界面（以及3D建模的基本要素），并且具有一个带有一些凸出面的基本立方体。在下面的屏幕截图中，您可以看到所有面的法线，包括拉伸面。这是Google博士说“看看您的法线，他们可能被翻转了”的结果。看来并非如此。

虽然我将其放在“渲染”类别中，但我也可以将其应用于“ ThreeJS”，因为我想知道这是否在ThreeJS场景中配置错误。我正在使用 MeshStandardMaterial 以及法线和粗糙度贴图：

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 );
  }
} );

它们看起来像这样：

您可以看到灰色的面孔。尝试一下，我无法使用与其他面孔相同的贴图来渲染那些面孔。我尝试过翻转法线，尝试在ClaraIO中更改材质，以及其他一些无效的设置。

在Clara.io中，我可以看到类似的情况：

有人看过吗？有想法吗？

谢谢。

乔恩

[更新]以下是我正在使用的OBJ和MTL文件：

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（点数不多，所以我想也可以在此处添加）。

# 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

[更新2 ]由于下面的@manthrax评论，问题得以解决。

我使用“对象工具”部分中的Clara.io“ UV贴图”选项重建了UV贴图。我还必须将“投影”设置为“框”，以便新创建的拉伸面没有倾斜/倾斜的漫反射布局。最初我只包含一个“漫反射”图像，但这次我同时添加了“正常”和“镜面”贴图。下面的图像有点亮，并且失去了我上面的原始渲染的金属感，但这是因为我将高光镜设置为白色（#ffffff）。接下来，我将介绍这些设置。这是最终结果：

我还想指出，为了处理Clara.io生成的MTL文件，我必须稍微更改三个JS代码：

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 );
  } );
} );

再次感谢@manthrax。

进入下一个3D OBJ创建学习曲线...

Answer 1

在您的loader.load回调中..而不是循环遍历子级，您可以尝试：

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

而不是遍历孩子？

还，您可以发布您的.OBJ文件，以便我们看看吗？