在Three.js中为网格分配非插值颜色

Question

我想创建一个颜色分配给每个面的表面，使它们显示为方形网格颜色图。

目前，我可以在无耻地复制@LeeStemkoski的一些工作后创建一个几何体，并使用数组（帧）分配颜色值，但是颜色是在面之间插值的。有没有办法可以强制颜色覆盖整数值xx和xx + 1，yy和yy + 1之间的面？或者有更好的方法来生成网格而不是THREE.ParametricGeometry

for ( var i = 0; i < graphGeometry.faces.length; i++ ) 
{
    face = graphGeometry.faces[ i ];
    numberOfSides = ( face instanceof THREE.Face3 ) ? 3 : 4;
    for( var j = 0; j < numberOfSides; j++ ) 
    {
        vertexIndex = face[ faceIndices[ j ] ];
        //face.vertexColors[ j ] = graphGeometry.colors[ vertexIndex ];
            point = graphGeometry.vertices[ vertexIndex ];
                    color = new THREE.Color( 0x0000ff );
                    xx = Math.round(point.x+nx/2);
                    yy = Math.round(point.y+ny/2);
                    ii = nx*yy+xx;

                color.setHSL( 0.7 * (max - frame[ii]) / (max-min), 1, 0.5 );
                    face.vertexColors[ j ] = color;
    }
}

Answer 1

是的，您可以：在该功能中，您可以看到每个顶点都分配了颜色（确保您无法为面部指定颜色）。因此，您所要做的就是获得用于计算每个面部颜色的平均颜色值。鉴于面部现在都是三个j中的Face3，你必须每次实际计算2个面。从你上面引用它给出（评论之前的for循环）：

for ( var i = 0; i < graphGeometry.faces.length; i+=2 ) 
{
    face1 = graphGeometry.faces[ i ];
    face2 = graphGeometry.faces[ i +1 ];
    numberOfSides = 3;
    var averageFaceZPosition=0;
    for( var j = 0; j < numberOfSides; j++ )averageFaceZPosition+= graphGeometry.vertices[face1[ faceIndices[ j ] ]].z;
    for( var j = 0; j < numberOfSides; j++ )averageFaceZPosition+= graphGeometry.vertices[face2[ faceIndices[ j ] ]].z;
    averageFaceZPosition/=numberOfSides*2;
    color=new THREE.Color(0x0000ff);
    color.setHSL( 0.7 * (zMax - averageFaceZPosition) / zRange, 1, 0.5 );
    for(var j=0;j<numberOfSides;j++){
        face1.vertexColors[j]=color;
        face2.vertexColors[j]=color;
    }
}

结果：