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

Question

在合并多个网格以更改选定单独网格上的颜色时，可以与缓冲区交互使用吗？

用网格集合很容易做到这样的事情，但是如何用多种不同的材质合并网格呢？

Answer 1

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

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

如果你的意思是为材料本身设置一种颜色，确定它是可能的。合并后的网格物体仍然可以使用与普通网格物体相同方式的多种材质 - 在MeshFaceMaterial中，尽管如果要合并自己，您需要为每个几何体传入材料索引偏移量参数。

Answer 2

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 inpector，之前添加MeshFaceMaterial：75调用opengl api容易在60fps运行，之后：3490调用opengl api fps下降约20％45-50 fps，这意味着drawElements被称为每个网格，我们没有合并网格的上下文，我错过了这里的东西吗？我想在同一个缓冲区上共享不同的材质

Answer 3

@hgates，你最近的评论对我很有帮助，我一直在寻找相同的东西！

好吧我设置了每个面对一种颜色，并在 材质上设置为true vertexColor，即可解决问题！ :)

这里我写的整个概念是我为了增加一个合适的回答为那些谁是在相同的情况下使用：

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

希望这将有助于它帮我！ :)