合并具有不同颜色的网格 [英] Merging meshes that have different colors

问题描述

使用Three.js r75

Using Three.js r75

我正在尝试显示根据从绿色到红色的整数值而改变颜色的多维数据集。由于存在这种问题，我尝试了多种方法。我无法使cubeMat.material.color.setRGB起作用，也无法创建新的Three.Color似乎也不起作用。请注意，我会在最后一次合并所有几何图形以进行一次绘图调用。我希望这不是问题。

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]
我确认使用getStyle正确设置了rgb值，但它们无法正确呈现。所有多维数据集堆栈都应使用不同的颜色。

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

推荐答案

您正在合并几何图形，因此可以使用单个图形进行渲染绘图调用和单一材质，但是您希望每个合并的几何图形具有不同的颜色。

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.

您可以通过定义 vertexColors （或 faceColor ）。这是要遵循的模式：

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

}

然后，当您为合并的几何体指定材质时，设置 vertexColors 像这样：

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

您的几何图形将通过一次绘制调用进行渲染。您可以通过在控制台中输入 renderer.info 来进行验证。 renderer.info.render.calls 应该为1。

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

three.js r.75

这篇关于合并具有不同颜色的网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！