Question

使用Three.js r75

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

[UPDATE] 我确认使用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

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

您可以通过在几何体中定义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 );

}

然后，当您为合并几何体指定材质时，请设置vertexColors，如下所示：

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

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

three.js r.75

Answer 2

cubeMat.material.color.setRGB不会起作用，因为它就像你两次调用材料一样（cubeMat和材质），试试这个：

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

Answer 3

如果合并几何体，则材料不能具有不同的颜色。我必须在合并之前设置每个立方体的面部颜色。

见

Changing material color on a merged mesh with three js

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

合并具有不同颜色的网格

3 个答案: