Introduction to cesium programming (8) set material

There are several ways to set materials for geometry in Cesium

The first method Material

Build the Cesium.Material object directly, and control it by setting the properties of the Material. The official examples and API descriptions are relatively clear.

API description

Material example

The second method MaterialProperty

Today we introduce the setting through MaterialProperty:

The class related to the Cesium material is MaterialProperty, which has the following subclasses:

ColorMaterialProperty
ImageMaterialProperty
CheckerboardMaterialProperty
StripeMaterialProperty
GridMaterialProperty
PolylineGlowMaterialProperty
PolylineOutlineMaterialProperty

Here , the Geometry introduced in Section 5 is used to represent the change of the material. The example is as follows:

//方法一，构造时赋材质
var entity = viewer.entities.add({
  position: Cesium.Cartesian3.fromDegrees(-103.0, 40.0),
  ellipse : {
    semiMinorAxis : 250000.0,
    semiMajorAxis : 400000.0,
    material : Cesium.Color.BLUE.withAlpha(0.5)//可设置不同的MaterialProperty
  }
});

//方法二，构造后赋材质
var ellipse = entity.ellipse;
ellipse.material = Cesium.Color.RED;

The following will introduce

ColorMaterialProperty--color material

Color is the most common material. The geometric shape can be modified to different solid colors to achieve the purpose of distinction. It can also be completed such as moving the mouse to a certain building, building discoloration, etc.; it is relatively simple to use, just assign a color, for example : ellipse.material = Cesium.Color.BLUE.withAlpha(0.5)

ImageMaterialProperty--image

Image texture functions are relatively rich, mainly including the following attributes:

The image value can be a URL, Canvas, or Video
The repeat value is a two-digit number, representing the number of repetitions in the X and y directions respectively. For example, new Cartesian2(2.0, 1.0) means that the x direction is repeated twice and the y direction is repeated once.
After the color is set, it will overlay a layer of the set color on the image
transparent Whether it is transparent or not, it can be set when the texture is a png image

//完整的这么写
ellipse.material = new Cesium.ImageMaterialProperty({
    image:'../images/cats.jpg',
    color: Cesium.Color.BLUE,
    repeat : new Cesium.Cartesian2(4, 4)
});

//也可以简单的写成
ellipse.material = '../images/cats.jpg';

Note that calling the https URL image in the http URL may fail to call

CheckerboardMaterialProperty--checkerboard texture

There are three properties,

evenColor default white, the first color of the chessboard
oddColor default black, second color
repeat number of repetitions

ellipse.material = new Cesium.CheckerboardMaterialProperty({
  evenColor : Cesium.Color.WHITE,
  oddColor : Cesium.Color.BLACK,
  repeat : new Cesium.Cartesian2(4, 4)
});

StripeMaterialProperty--stripe texture

The property descriptions are as follows:

evenColor default white, the first color of the chessboard
oddColor default black, second color
repeat stripe repetitions
offset offset
orientation horizontal or vertical, default horizontal

ellipse.material = new Cesium.StripeMaterialProperty({
  evenColor : Cesium.Color.WHITE,
  oddColor : Cesium.Color.BLACK,
  repeat : 32,
  offset:20,
  orientation:Cesium.StripeOrientation.VERTICAL 
});

GridMaterialProperty--Grid

The property descriptions are as follows:

color grid color
cellAlpha cell transparency
lineCount number of lines and columns
lineThickness Line thickness
lineOffset line offset

ellipse.material = new Cesium.GridMaterialProperty({
  color : Cesium.Color.YELLOW,
  cellAlpha : 0.2,
  lineCount : new Cesium.Cartesian2(8, 8),
  lineThickness : new Cesium.Cartesian2(2.0, 2.0)
});

The following two textures need to use Polyline, first add a Polyline

var entity = viewer.entities.add({
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([-77, 35,
                                                        -77.1, 35]),
    width : 5,
    material : Cesium.Color.RED
}});
viewer.zoomTo(viewer.entities);

PolylineGlowMaterialProperty

The property descriptions are as follows:

color The color of the light (the center color is white)
glowPower The length of the glow, the value is a percentage of the line width (0~1.0)

polyline.material = new Cesium.PolylineGlowMaterialProperty({
    glowPower : 0.2,
    color : Cesium.Color.BLUE
});

PolylineOutlineMaterialProperty

The property descriptions are as follows:

color line color
outlineWidth line texture width
outlineColor line texture color

polyline.material = new Cesium.PolylineOutlineMaterialProperty({
    color : Cesium.Color.ORANGE,
    outlineWidth : 3,
    outlineColor : Cesium.Color.BLACK
});

Personal homepage http://cesium.xin