Three.js:将多个材料分配给导入的OBJ-文件

Question

我用搅拌机做了一个OBJ文件。这份文件分配了两份材料。该文件正在很好地导入。

但是:我如何为three.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

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

提前感谢您的帮助。

克里斯蒂安

Answer 1

是。用多功能材料。

http://threejs.org/docs/#Reference/Materials/MultiMaterial

然后，例如，在每个面都有一种材料，并且在obj加载之后可以访问您的几何图形，您可以让前一半的脸使用一种材料，而其余的面孔使用另一种：

  for ( var i = 0; i < geometry.faces.length; i ++ ) {
    if(i<geometry.faces.length/2){
        geometry.faces[i].materialIndex = 0;
    }else{
        geometry.faces[i].materialIndex = 1;
    }
  }

Answer 2

您可以在单个对象中加载多个材料。使用以下代码

var loader = new THREE.OBJLoader( manager );
loader.load( 'obj_model/Jersey_1.obj', function ( event ) {
var object = event;
var geometry = object.children[ 0 ].geometry;
var materials = [];
materials.push(new THREE.MeshLambertMaterial( { map : THREE.ImageUtils.loadTexture( 'obj_model/Jrsy_1_Color_1.png'),transparent: true, opacity: 1,color: 0xFF4C33 } ) );
materials.push(new THREE.MeshLambertMaterial( { map : THREE.ImageUtils.loadTexture( 'obj_model/Jrsy_1_Color_2.png'),transparent: true, opacity: 1,color: 0xFFF933 } ) );
materials.push(new THREE.MeshLambertMaterial( { map : THREE.ImageUtils.loadTexture( 'obj_model/Jrsy_1_Tag.png'),transparent: true, opacity: 1,color: 0xFF0000 } ) );
materials.push(new THREE.MeshLambertMaterial( { map : THREE.ImageUtils.loadTexture( 'obj_model/Jrsy_Ptrn.png'),transparent: true, opacity: 1,color: 0xFF33E0 } ) );
mesh = THREE.SceneUtils.createMultiMaterialObject(geometry, materials);
mesh.scale = new THREE.Vector3( 8,8,8 );
scene.add(mesh);
});