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

Three.js：将多个材质标记为导入的OBJ文件

2 个答案: