javascript - 在 Three.js 中将模型与 Material 合并时出现问题

Question

我在这个 fiddle 中有一个我遇到的问题的例子:http://jsfiddle.net/saward/78Bjk/7/

如果取消注释 scene.add(tree_mesh) 和 scene.add(mesh2)，并注释掉 scene.add(mesh)，那么您可以看到这两个对象。但是当我合并两者时，tree_mesh 的 Material 信息似乎丢失了。如果我修改网格以使用与 mesh2 相同的 Material ，则两个对象都会显示，但显然 Material 错误。

如果您能帮助我理解这里发生的情况以及如何解决它，我将不胜感激!

谢谢

这是 fiddle 中的代码(需要 Three.js r57):

var camera, scene, renderer, geometry, material, mesh1, mesh2, mesh;

init();
animate();



function init() {
    var tree = {

    "metadata" :
    {
        "formatVersion" : 3.1,
        "sourceFile"    : "tree.obj",
        "generatedBy"   : "OBJConverter",
        "vertices"      : 24,
        "faces"         : 18,
        "normals"       : 0,
        "colors"        : 0,
        "uvs"           : 0,
        "materials"     : 1
    },

    "scale" : 1.000000,

    "materials": [  {
    "DbgColor" : 15658734,
    "DbgIndex" : 0,
    "DbgName" : "Material",
    "colorAmbient" : [0.0, 0.0, 0.0],
    "colorDiffuse" : [0.64, 0.64, 0.64],
    "colorSpecular" : [0.5, 0.5, 0.5],
    "illumination" : 2,
    "opticalDensity" : 1.0,
    "specularCoef" : 96.078431,
    "transparency" : 1.0
    }],

    "vertices": [1.000000,-1.000000,-1.000000,1.000000,-1.000000,1.000000,-1.000000,-1.000000,1.000000,-1.000000,-1.000000,-1.000000,0.590806,-0.802478,-0.590806,0.590806,-0.802478,0.590807,-0.590806,-0.802478,0.590806,-0.590806,-0.802478,-0.590806,0.406036,0.737103,-0.406036,0.406036,0.737103,0.406036,-0.406036,0.737103,0.406036,-0.406036,0.737103,-0.406036,0.406036,-0.810673,-0.406036,0.406036,-0.810673,0.406036,-0.406036,-0.810673,0.406036,-0.406036,-0.810673,-0.406036,-0.703524,0.091037,0.703524,-0.703524,0.091037,-0.703524,0.703524,0.091037,-0.703524,0.703524,0.091037,0.703524,-0.703524,1.498086,0.703524,-0.703524,1.498086,-0.703524,0.703524,1.498086,-0.703524,0.703524,1.498086,0.703524],

    "morphTargets": [],

    "morphColors": [],

    "normals": [],

    "colors": [],

    "uvs": [[]],

    "faces": [3,0,1,2,3,0,3,4,7,6,5,0,3,0,4,5,1,0,3,1,5,6,2,0,3,2,6,7,3,0,3,4,0,3,7,0,3,12,8,9,13,0,3,13,9,10,14,0,3,14,10,11,15,0,3,15,11,8,12,0,3,8,9,10,11,0,3,15,14,13,12,0,3,20,21,17,16,0,3,21,22,18,17,0,3,22,23,19,18,0,3,23,20,16,19,0,3,16,17,18,19,0,3,23,22,21,20,0]

};

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);

    geometry = new THREE.CubeGeometry(200, 200, 200);
    material = new THREE.MeshNormalMaterial();

    var loader = new THREE.JSONLoader();
    var tree_obj = loader.parse(tree, null);
    var tree_materials = tree_obj.materials;
    var tree_face_materials = new THREE.MeshFaceMaterial(tree_materials);
    var tree_geo = tree_obj.geometry;
    var tree_mesh = new THREE.Mesh(tree_geo, tree_face_materials);
    tree_mesh.scale.x = tree_mesh.scale.y = tree_mesh.scale.z = 100;

    mesh2 = new THREE.Mesh(geometry, material);
    mesh2.position.y = 200;
    console.log(tree_mesh.scale);
    //scene.add(tree_mesh);
    //scene.add(mesh2);

    materials = [];

    THREE.GeometryUtils.setMaterialIndex(tree_mesh.geometry, 0);
    THREE.GeometryUtils.setMaterialIndex(mesh2.geometry, 1);
    materials.push(tree_face_materials);
    materials.push(material);
    var new_geo = new THREE.Geometry();
    THREE.GeometryUtils.merge(new_geo, tree_mesh);
    THREE.GeometryUtils.merge(new_geo, mesh2);
    mesh = new THREE.Mesh(new_geo, new THREE.MeshFaceMaterial(materials));

    scene.add(mesh);

    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);

}

function animate() {

    requestAnimationFrame(animate);
    render();

}

function render() {

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;


    renderer.render(scene, camera);
}

更新:我具体解决这个问题的方法是使用 Three.js 58 的当前开发版本，将每个模型的 Material 添加到更大的数组中。

正如已接受的答案所指出的，您不能使用 MeshFaceMaterial 作为 Material ，因此请迭代 MeshFaceMaterial 中的所有 Material ，并按顺序添加它们。

然后记下每个模型的较大数组中第一个 Material 的索引。然后，当需要合并网格时，不要使用 setMaterialIndex，而是为其提供该特定模型的数组中第一个 Material 的索引。沿着这些思路:

THREE.GeometryUtils.merge(large_geo, some_mesh, some_mesh.material_offset);
large_mesh = new THREE.Mesh(large_geo, new THREE.MeshFaceMaterial(materials_list));

其中“some_mesh.material_offset”将是您为自己设置并存储在某处的新值。这不适用于 r57 或更低版本。

Answer 1

当使用MeshFaceMaterial(materials)时，materials必须是 Material 数组。您不能将 MeshFaceMaterial 包含为其中一种 Material 。

就您而言，它将是:

materials = [];

materials.push( tree_obj.materials[0] );
materials.push( material );

mesh = new THREE.Mesh( new_geo, new THREE.MeshFaceMaterial( materials ) );

fiddle :http://jsfiddle.net/78Bjk/8/

三.js r.57