三.js:将多个材质分配给导入的 OBJ 文件

我用搅拌机制作了一个OBJ文件。此文件分配了两种材料。该文件正在很好地导入。

但是：如何在三个.js中为面分配不同的材质？我知道，材料必须在数组内部（不知道，如果我做对了）。现在，我想将材料分配给面部。

这是我代码中有趣的部分：

....
  loader.load( './beardedbox3.obj', addBananaInScene);
};
var addBananaInScene = function(object){
  banana = object;
  //Move the banana in the scene
  banana.rotation.x = Math.PI/2;
  banana.position.x = 0;
  banana.position.y = 0;
  banana.position.z = 0;
  banana.scale.x = 200;
  banana.scale.y = 200;
  banana.scale.z = 200;
   
  var weiss = new THREE.MeshPhongMaterial( { color: 0xffffff, 
                                        specular: 0xffffff, 
                                        shininess: 30, 
                                        shading: THREE.FlatShading } );
  var rot = new THREE.MeshPhongMaterial( { color: 0xff0000, 
                                        specular: 0xFF9900, 
                                        shininess: 30, 
                                        shading: THREE.FlatShading } ); 
  object.traverse( function ( child ) {
    if(child instanceof THREE.Mesh){
        child.materials = [weiss, rot];
        child.geometry.computeVertexNormals();
    }
  });
  //Add the 3D object in the scene
  scene.add(banana);

OBJ 文件如下所示：

.... Some vertex-coordinates
usemtl weiss
s 1
f 1//1 2//1 3//1
f 4//2 5//2 6//2
... some more faces
f 130//23 34//23 141//23
usemtl rot
f 41//51 42//51 43//51
f 45//52 46//52 47//52
f 42//53 11//53
... even more faces

在我看来，这好像我可以使用一个简单的循环，将材料分配给面部。但我不知道，该怎么做。还是有更简单的方法？

问候基督教

编辑：

感谢您的回答，对我来说听起来合乎逻辑，但不幸的是我没有让它工作。我似乎缺少一些基础知识。

我的代码的重要部分现在如下所示：

var weiss = new THREE.MeshPhongMaterial({
  color: 0xffffff,
  specular: 0xffffff,
  shininess: 30,
  shading: THREE.FlatShading
});
var rot = new THREE.MeshPhongMaterial({
  color: 0xff0000,
  specular: 0xFF9900,
  shininess: 30,
  shading: THREE.FlatShading
});
object.traverse(function (child) {
  if (child instanceof THREE.Mesh) {
    child.materials = [weiss, rot];
    child.geometry.computeVertexNormals();
    child.geometry.elementsNeedUpdate = true;
    for (var i = 0; i < child.geometry.faces.length; i++) {
      if (i < child.geometry.faces.length / 2) {
        child.geometry.faces[i].materialIndex = 0;
      } else {
        child.geometry.faces[i].materialIndex = 1;
      }
    }
  }
});

我收到错误消息：

TypeError: child.geometry.faces is undefined
    addBananaInScene/<()                   box.js:78
    THREE.Object3D.prototype.traverse()    three.min.js:179
    THREE.Object3D.prototype.traverse()    three.min.js:179
    addBananaInScene()                     box.js:69
    THREE.OBJLoader.prototype.load/<()     OBJLoader.js:25
    THREE.XHRLoader.prototype.load/<()     three.min.js:377

我想，我做了一件非常愚蠢的事情;)

提前感谢您的感谢帮助。

基督教