我在这个小提琴中有一个我遇到的问题的例子:http: //jsfiddle.net/saward/78Bjk/7/
如果您取消注释 scene.add(tree_mesh) 和 scene.add(mesh2),并注释掉 scene.add(mesh),那么您可以看到这两个对象。但是当我合并两者时,tree_mesh 的材质信息似乎丢失了。如果我修改网格以使用与 mesh2 相同的材质,那么两个对象都会显示,但显然使用了错误的材质。
我将不胜感激帮助了解这里发生了什么以及如何解决它!
谢谢
这是小提琴的代码(需要三个.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,将每个模型的材料添加到更大的数组中。
正如接受的答案所指出的,您不能使用 MeshFaceMaterial 作为材质,因此迭代 MeshFaceMaterial 中的所有材质,按顺序添加它们。
然后记下每个模型的较大数组中第一种材料的索引。然后,当需要合并网格时,不要使用 setMaterialIndex,而是为其指定特定模型的数组中第一个材质的索引。沿着这些思路:
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 或更低版本。