Clara.io（或）ThreeJS：挤压面呈现灰色，或不呈现 material

Question

（注意：我已经在 Clara.io 论坛上 post 编辑了这个，虽然只过了一天，但我还没有收到任何回复。我想我会尝试 Whosebug 和更新我的 Clara.io post.)

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

我正在学习 Clara.io 界面（以及 3D 建模的基本要点），并且有一个带有几个挤压面的基本立方体。在下面的屏幕截图中，您可以看到所有面的法线，包括挤压面。这是 Google 博士说 "look at your normals, they're probably flipped" 的结果。好像不是。

虽然我把它放在 "Rendering" 类别中，但我也可以将它应用到 "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 中的 material，以及其他一些无效的设置。

在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 Map" 选项重建了 UV 贴图。我还必须将 "Projection" 设置为 "Box"，这样新创建的挤压面就没有 skewed/angled 漫反射布局。虽然最初我只包含一个 "diffuse" 图像，但这次我添加了一个 "normal" 和 "specular" 地图。下图有点亮，失去了上面原始渲染的金属感，但那是因为我将高光设置为白色 (#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 创建学习曲线...

Answer 1

在你 loader.load 回调中..而不是通过 children 循环，你可以尝试：

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

而不是循环 children?

另外，你能post你的 .OBJ 文件让我们看看吗？

Clara.io（或）ThreeJS：挤压面呈现灰色，或不呈现 material

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

three.js

face

clara.io