在 Three.js 中使用多种材料合并几何 [英] Use multiple materials for merged geometries in Three.js

问题描述

我想使用 2 个网格创建一个 Pine，一个用于树干，另一个用于灌木，这是我所做的:

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

松树按照我的需要正确定位，但是，整个合并的形状只使用 1 种材料而不是 2 种(整个形状被第一种覆盖)，我希望每个网格在合并时都有各自的材料.

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' 的额外参数，最后一个参数是 index 网格必须具有的材料数组，例如:0 -> 'materials' 数组中的第一个材料...等等.

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，但是如果我们想合并一个圆柱体和一个盒子并添加 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屋！