在Three.js中为多个材质使用合并的几何图形 [英] Use multiple materials for merged geometries in Three.js

问题描述

我想用2个网格创建一个Pine，1个用于树干，另一个用于bush，这就是我所做的：

I want to create a Pine using 2 meshes, 1 for the trunk and another one for the bush, this what I've done:

var pine_geometry = new THREE.Geometry();

var pine_texture_1 = THREE.ImageUtils.loadTexture('./res/textures/4.jpg');
var pine_geometry_1 = new THREE.CylinderGeometry(25, 25, 50, 6);
var pine_material_1 = new THREE.MeshBasicMaterial({
  map : pine_texture_1
});

var pine_1 = new THREE.Mesh(pine_geometry_1);
pine_1.position.x = x;
pine_1.position.y = y + 25;
pine_1.position.z = z;

pine_1.updateMatrix();
pine_geometry.merge(pine_1.geometry, pine_1.matrix);

var pine_texture_2 = THREE.ImageUtils.loadTexture('./res/textures/5.jpg');
var pine_geometry_2 = new THREE.CylinderGeometry(0, 70, 250, 8);
var pine_material_2 = new THREE.MeshBasicMaterial({
  map : pine_texture_2
});

var pine_2 = new THREE.Mesh(pine_geometry_2);
pine_2.position.x = x;
pine_2.position.y = y + 175;
pine_2.position.z = z;

pine_2.updateMatrix();
pine_geometry.merge(pine_2.geometry, pine_2.matrix);

var pine = new THREE.Mesh(pine_geometry, new THREE.MeshFaceMaterial([pine_material_1, pine_material_2]));
pine.geometry.computeFaceNormals();
pine.geometry.computeVertexNormals();

Game.scene.add(pine);

Pine正确定位，但是，整个合并形状只使用1种材料而不是2（整个形状被第1个覆盖）我希望每个网格在mergin时都有相应的材料。

The Pine is correctly positioned as I want, however, the whole merged shape only uses 1 material instead of the 2 (the whole shape is covered by the 1st) and I want that each mesh has it's respective material when mergin both.

我做错了什么？任何想法？

What I'm doing wrong? any idea?

推荐答案

经过长时间的研究后，我发现我错过了来自Geometry的'merge'方法的额外参数对象，最后一个参数是网格必须具有材质数组的材质索引，例如：0 - >'材质'数组中的第一个材质...依此类推。

After a long research I discovered that I was missing an extra parameter for the method 'merge' from the Geometry object, the last parameter is the index of the material that the mesh must have from the materials array, ex: 0 -> first material in 'materials' array... and so on.

所以，我的最后一段代码如下：

So, my final piece of code looks like:

pine_geometry.merge(pine_1.geometry, pine_1.matrix, 0);

var pine_texture_2 = THREE.ImageUtils.loadTexture('./res/textures/5.jpg');
var pine_geometry_2 = new THREE.CylinderGeometry(0, 70, 250, 8);
var pine_material_2 = new THREE.MeshBasicMaterial({
  map : pine_texture_2
});

var pine_2 = new THREE.Mesh(pine_geometry_2);
pine_2.position.x = x;
pine_2.position.y = y + 175;
pine_2.position.z = z;

pine_2.updateMatrix();
pine_geometry.merge(pine_2.geometry, pine_2.matrix, 1);

（注意我为每次合并添加的最后一个数字）。

(Note the last numbers I add to each merge).

然而，我想澄清一下，这种做法只适用于我们处理来自同一类型的各种几何图形，在这种情况下，我们正在合并两个CylinderGeometry ，但是如果我们想合并一个Cylinder和一个Box并添加MeshFaceMaterial，它将无法被正确识别，控制台将抛出我们'无法读取未定义的属性映射/属性'，不过我们仍然可以合并两个几何但不提供多种材料（这是我犯的一个可怕的错误）。

However, I want to clarify that this practice only works when we are dealing with various geometries that are from the same type, in this case, we're merging two CylinderGeometry, but if we wanted to merge for example a Cylinder with a Box AND add the MeshFaceMaterial, it wouldn't be recognized properly and the console will throw us 'Cannot read property map/attributes from undefined', nevertheless we can still merge both geometries but not providing multiple materials (that's a terrible mistake I made).

希望这对任何人都有帮助。

Hope this helps to anyone.

这篇关于在Three.js中为多个材质使用合并的几何图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！