这个例子显示了一个3D网格表面，有各种不同的动态样式可以从用户界面上选择。
图表是用SurfaceMeshSeries3D渲染的，这是一个serie类型，可以渲染一个连续的三维网格，每个单独的数据点都可以配置自己的颜色（也可以从一个附加的颜色表中动态查询）。
网格的几何形状是通过将一个数据点矩阵扭曲成XYZ坐标来定义的。
在这个例子中，假想矩阵的行被扭曲成YX平面上的一个角度，列被扭曲成Z坐标以及一个半径，形成一个三维管。
这个例子中的网格有150*150（22 500）个数据点。
SurfaceMeshSeries3D的数据格式
SurfaceMeshSeries3D存储3种用户可修改的数据。
每种类型的数据都有自己的失效方法。所有这些方法都可以被调用。
回调函数。
对网格的每个数据点进行回调。
然后函数返回与该数据点相关的值。
数据矩阵。
数据值的多维数组。
也可以不废止整个网格，而只废止其中的一部分。这可以通过附加第二个参数来实现，这个参数指定了修改的范围（GridRangeOptions）。
几何图形地图
网格上的每个数据点都与一个三维坐标（Point3D）有关。
使用SurfaceMeshSeries3D.invalidateGeometryOnly可以使几何坐标失效。
// Invalidate full meshes geometry coordinates by callback.
SurfaceMeshSeries3D.invalidateGeometryOnly(( row, column, prev ) => ({
x: row,
y: column,
z: Math.pow(row + column * rowsAmount, 2) / (rowsAmount * columnsAmount)
}))
查询值图
网格上的每个数据点都可以与一个数字查询值（Number）相关联。
这可以用来根据一个附加的颜色查找表（LUT）动态地给每个数据点着色。
请注意，需要通过设置系列的FillStyle为PalettedFill来启用查找值的着色。
Look-Up-Values是用SurfaceMeshSeries3D.invalidateValuesOnly进行无效处理。
// Define Color Look-Up-Table.
const lut = new LUT( {
steps: [
{ value: 0, color: ColorRGBA( 0, 0, 0 ) },
{ value: 50, color: ColorRGBA( 255, 0, 0 ) }
],
interpolate: true
} )
// Invalidate Look-Up-Values by data matrix.
SurfaceMeshSeries3D.invalidateValuesOnly(
[
// First row.
[0,0,0,0,0],
// Second row.
[10,10,10,10,10],
// and so forth...
[20,20,20,20,20],
[30,30,30,30,30],
[40,40,40,40,40],
]
)
// Configure Series fill style as look up from table.
SurfaceMeshSeries3D.setFillStyle( new PalettedFill({ lut }) )
颜色图
网格上的每个数据点都可以与一个颜色相关联。
这可以用来给每个数据点涂上它自己的颜色。
请注意，需要通过设置系列的FillStyle为IndividualPointFill来启用各个颜色的着色。
用SurfaceMeshSeries3D.invalidateColorsOnly可以使颜色值失效。
// Invalidate first row of Colors by callback.
SurfaceMeshSeries3D.invalidateColorsOnly(
( row, column, prev ) => new ColorHSV( column * 10 ),
{
row: { start: 0, end: 1 },
column: { start: 0, end: numberOfColumns }
}
)
// Configure Series fill style as individual colors.
SurfaceMeshSeries3D.setFillStyle( new IndividualPointFill() )