Merging meshes that have different colors

问题

Using Three.js r75

I am trying to display cubes that change color depending on an integer value from green to red. I have tried multiple ways as I am stuck on this. I was unable to make cubeMat.material.color.setRGB work and creating a new Three.Color doesn't seem to work either. Please note I merge all the geometries at the end for one draw call. I am hoping this isn't the issue.

[UPDATE] I am confirming the rgb values are set correctly with getStyle however they do not render correctly. All cube stacks should be different colors.

    function colorData(percentage){
    var rgbString = "",
        r = parseInt(percentage * 25.5),
        g = parseInt(((percentage * 25.5) - 255) * -1),
        b = 0;

    rgbString = "rgb("+r+","+g+",0)";
    return rgbString;
}

...
var position = latLongToSphere(objectCoord[1], objectCoord[0], 300),
            rgb = colorData(objectMag),
            cubeColor = new THREE.Color(rgb),
            cubeMat = new THREE.MeshBasicMaterial({color: cubeColor}),
            cubeHeight = objectMag * 175,
            cubeGeom = new THREE.BoxGeometry(3,3,cubeHeight,1,1,1),
            cube = new THREE.Mesh(cubeGeom, cubeMat);

        // set position of cube on globe, point to center, merge together for one draw call
        cube.geometry.colorsNeedUpdate = true;
        cube.position.set(position.x, position.y, position.z);
        cube.lookAt(lookCenter);
        cube.updateMatrix();
        console.log(cube.material.color.getStyle());
        geom.merge(cube.geometry, cube.matrix);

回答1:

You are merging geometries so you can render with a single draw call and a single material, but you want each of the merged geometries to have a different color.

You can achieve that by defining vertexColors (or faceColor) in your geometry. Here is a pattern to follow:

// geometry
var geometry = new THREE.Geometry();

for ( var count = 0; count < 10; count ++ ) {

    var geo = new THREE.BoxGeometry( 5, 5, 5 );

    geo.translate( THREE.Math.randFloat( - 5, 5 ), THREE.Math.randFloat( - 5, 5 ), THREE.Math.randFloat( - 5, 5 ) );

    var color = new THREE.Color().setHSL( Math.random(), 0.5, 0.5 );

    for ( var i = 0; i < geo.faces.length; i ++ ) {

        var face = geo.faces[ i ];
        face.vertexColors.push( color, color, color ); // all the same in this case
        //face.color.set( color ); // this works, too; use one or the other

    }

    geometry.merge( geo );

}

Then, when you specify the material for the merged geometry, set vertexColors like so:

// material
var material = new THREE.MeshPhongMaterial( {
    color: 0xffffff, 
    vertexColors: THREE.VertexColors // or THREE.FaceColors, if defined
} );

Your geometry will be rendered with a single draw call. You can verify that by typing renderer.info into the console. renderer.info.render.calls should be 1.

three.js r.75

回答2:

cubeMat.material.color.setRGB won't work because it's like you're calling the material twice (cubeMat and material), try this instead:

cube.material.color.setRGB( value, value, value );

回答3:

Turns out if you merge the geometry the materials cant have different colors. I had to set the face color of each cube before merging.

See

Changing material color on a merged mesh with three js

Three js materials of different colors are showing up as one color

来源：https://stackoverflow.com/questions/36380358/merging-meshes-that-have-different-colors

标签

javascript

colors

three.js