javascript - 合并具有不同颜色的网格

Question

使用 Three.js r75

我正在尝试显示根据从绿色到红色的整数值改变颜色的立方体。我尝试了多种方法，因为我被困在这个问题上。我无法使cubeMat.material.color.setRGB工作并且创建一个新的Three.Color似乎也不起作用。请注意，我在一次绘制调用最后合并了所有几何图形。我希望这不是问题所在。

[更新]我确认使用 getStyle 正确设置了 RGB 值，但它们无法正确渲染。所有立方体堆叠应该是不同的颜色。

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

Answer 1

您正在合并几何图形，以便可以使用单个绘制调用和单个 Material 进行渲染，但您希望每个合并的几何图形具有不同的颜色。

您可以通过在几何体中定义vertexColors(或faceColor)来实现这一点。以下是要遵循的模式:

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

}

然后，当您指定合并几何体的 Material 时，请像这样设置vertexColors:

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

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

三.js r.75