three.js - 使用三个 js 更改合并网格上的 Material 颜色

Question

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

用一组网格做这样的事情很容易，但是用多种不同 Material 合并的网格呢？

Answer 1

@hgates，你最后的评论对我很有帮助，我几天来一直在寻找同样的东西!

Ok i set on each face a color, and set to true vertexColor on the material, that solve the problem ! :)

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

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

希望它能对我有所帮助! :)