使用三个 js 更改合并网格上的材质颜色

Question

是否可以与合并多个网格以更改所选单个网格的颜色时使用的缓冲区进行交互？

使用一组网格很容易做到这一点，但是具有多种不同材质的合并网格呢？

Answer 1

@hgates，您的上一条评论对我很有帮助，我这几天一直在寻找同样的东西！

好的，我在每个面上设置了一种颜色，并在 材料，解决问题！ :)

我在这里写下我使用的整个概念，以便为处于相同情况的人添加正确的答案：

// Define a main Geometry used for the final mesh
var mainGeometry = new THREE.Geometry();

// Create a Geometry, a Material and a Mesh shared by all the shapes you want to merge together (here I did 1000 cubes)
var cubeGeometry = new THREE.CubeGeometry( 1, 1, 1 );
var cubeMaterial = new THREE.MeshBasicMaterial({vertexColors: true});
var cubeMesh = new THREE.Mesh( cubeGeometry );

var i = 0;

for ( i; i<1000; i++ ) {

    // I set the color to the material for each of my cubes individually, which is just random here
    cubeMaterial.color.setHex(Math.random() * 0xffffff);

    // For each face of the cube, I assign the color
    for ( var j = 0; j < cubeGeometry.faces.length; j ++ ) {
        cubeGeometry.faces[ j ].color = cubeMaterial.color;
}

    // Each cube is merged to the mainGeometry
    THREE.GeometryUtils.merge(mainGeometry, cubeMesh);
 }

 // Then I create my final mesh, composed of the mainGeometry and the cubeMaterial
 var finalMesh = new THREE.Mesh( mainGeometry, cubeMaterial );
 scene.add( finalMesh );

希望它对我有所帮助！ :)

Answer 2

取决于“改变颜色”的含义。请注意，合并后的网格与任何其他未合并的网格一样。

如果您指的是顶点颜色，则可能是迭代面并根据材质索引确定要更改颜色的顶点。

如果您的意思是为材质本身设置颜色，请确保这是可能的。合并后的网格仍然可以像普通网格一样具有多种材质 - 在MeshFaceMaterial 中，但如果您要自己合并，则需要为每个几何体传入一个材质索引偏移参数。

Answer 3

this.meshMaterials.push(new THREE.MeshBasicMaterial(
    {color:0x00ff00 * Math.random(), side:THREE.DoubleSide}));

for ( var face in geometry.faces ) {
  geometry.faces[face].materialIndex = this.meshMaterials.length-1;
}

var mesh = new THREE.Mesh(geometry);

THREE.GeometryUtils.merge(this.globalMesh, mesh);
var mesh = new THREE.Mesh(this.globalMesh, new THREE.MeshFaceMaterial(this.meshMaterials));

对于那些需要榜样的人来说就像一个魅力，但是！这会创建多个额外的缓冲区（索引和顶点数据），并且还会调用多个 drawElements :(，我使用 webgl 检查器检查绘图调用，在添加 MeshFaceMaterial 之前：75 调用 opengl api 轻松以 60fps 运行， after : 3490 call opengl api fps 下降大约 20 % 45-50 fps，这意味着每个网格都会调用 drawElements，我们失去了合并网格的上下文，我在这里错过了什么吗？我想在同一个缓冲区上共享不同的材料