Three.js：將多個材質分配給一個導入的OBJ文件

再次我必須打擾你。我用攪拌器製作了一個OBJ文件。該文件分配有兩個材料。該文件正在導入很好。Three.js：將多個材質分配給一個導入的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; 
     } 
    } 
    } 
});

而且我得到的ErrorMessage：

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

我想，我做了一件很愚蠢;）

在感謝提前爲您的讚賞的幫助。

基督教

來源

2016-02-24 Christian Heisch

是的。使用多種材料。

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

來源

2016-02-24 19:27:06 Radio

您可以在單個對象中加載多個材質。使用以下代碼

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

來源

2016-07-15 04:52:31 Thirupathi

Three.js：將多個材質分配給一個導入的OBJ文件

回答

相關問題