Clara.io（或）ThreeJS：挤压面呈现灰色，或不呈现材质答案

【问题标题】：Clara.io (or) ThreeJS: Extruded face renders grey, or doesn't render materialClara.io（或）ThreeJS：挤压面呈现灰色，或不呈现材质
【发布时间】：2019-01-12 11:50:02
【问题描述】：

（注意：我已经在 Clara.io 论坛上发布了这个帖子，虽然这只是一天，但我没有收到任何回复。我想我会尝试 StackOverflow 并更新我的 Clara.io 帖子。）

我希望（猜测）这是一个快速修复，并且我缺少一些基本的东西，但我已经搜索了相当长的时间来寻找解决方案。我看到我的最终渲染用灰色代替了指定的材质，而所有其他未拉伸的面都渲染得很好。

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

虽然我把它放在“渲染”类别中，但我也可以将它应用于“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 中，我可以看到类似的情况：

有人看过这个吗？有想法吗？

谢谢。

乔恩

[UPDATE] 以下是我正在使用的 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

[UPDATE 2] 感谢@manthrax 下面的评论，问题得以解决。

我使用对象工具部分中的 Clara.io“UV 贴图”选项重建了 UV 贴图。我还必须将“Projection”设置为“Box”，这样新创建的挤出面就没有倾斜/倾斜的漫反射布局。虽然最初我只包含了一个“漫反射”图像，但这次我添加了一个“正常”和“镜面”贴图。下面的图像有点亮，并且失去了上面原始渲染的金属度，但那是因为我将镜面反射为白色（#ffffff）。接下来我将使用这些设置。这是最终结果：

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

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 创建学习曲线...

【问题讨论】：

标签： three.js face clara.io

【解决方案1】：

在你的 loader.load 回调中..而不是循环遍历孩子，你能试试吗：

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

而不是循环遍历孩子？

另外，您能否发布您的 .OBJ 文件以便我们查看？

【讨论】：

我已经尝试过您提供的 sn-p，它产生了相同的结果。实际上，我不仅在我自己的 ThreeJS 代码中，而且在实际的 Clara.io 渲染器中都看到了灰色渲染。我已经用 OBJ 和 MTL 文件的 Pastebin 链接更新了我的帖子。非常感谢。
啊，我明白了...是的，看起来挤压操作没有生成纹理坐标。您可能需要执行 UV 展开来生成它们。我可以建议学习 Blender 吗？
"我可以建议学习 Blender 吗？"看来我正朝着那个方向前进。我有一个庞大的 ThreeJS 项目，我需要在其中生成 OBJ 文件，我目前正在寻找可以让我以最小的学习曲线完成此操作的应用程序。到目前为止，我已经查看了 Blender、Hexagon、Rhino3D 和 Clara.io（以及一些“CAD”：TinkerCad、SelfCad 和 FreeCad）。使用 Rhino3D 是价格让我望而却步。使用 Blender，这是学习曲线。感谢您的反馈/帮助。我来看看 Blender 的 unwrap 机制。
如果你想对 Blender 进行一些指导，请在这个闲散的频道中联系我。我是 @thrax join.slack.com/t/threejs/shared_invite/…
哇，谢谢你的提议。我很可能会接受你。您对 UV 展开的评论导致了解决方案，（刚刚发布）。感谢您节省了我一些时间（和头痛）。祝你好运。