小小林熬夜学编程

这个屌丝很懒，什么也没留下！

热门标签

Cesium 材质Fabric（一）_polylineglowmaterialproperty

作者：小小林熬夜学编程 | 2024-02-18 17:53:42

踩

polylineglowmaterialproperty

在线列子：https://github.com/AnalyticalGraphicsInc/cesium-materials-pack
Cesium 材质Fabric（二）（参数介绍）
常见材质：

ColorType
ImageType
DiffuseMapType
AlphaMapType
SpecularMapType
EmissionMapType
BumpMapType
NormalMapType
GridType
StripeType
CheckerboardType
DotType
WaterType
RimLightingType
FadeType
PolylineArrowType
PolylineGlowType
PolylineOutlineType

一、简介及使用

（一）简介

Fabric 是 Cesium 中用于描述材质的一种 JSON 规定。材质表现了多边形、折线、椭圆等形状的外观。使用 Fabric 和 GLSL，可以实现自定义材质。

（二）使用

1. 方法一（外设）

// 方法一
primitive.appearance..material = Material.fromType('Image');
primitive.appearance..uniforms.image = 'image.png';
1
2
3

2. 方法二（内置）

// 方法一
polygon.material = new Cesium.Material({
  fabric : {
    type : 'Image',
    uniforms : {
      image : 'image.png'
    }
  }
});
1
2
3
4
5
6
7
8
9

注：

uniforms --> 一种输入参数变量，在创建材质时或者创建材质后修改.
如：ColorType 类型材质，uniform ，它包含red, green, blue, 和alpha四个部件：

polygon.material.uniforms.color = new Cesium.Color(1.0, 1.0, 0.0, 1.0);
1

ImageType，ubiform，包含jpg或者png格式的图片，可以带透明通道，用rgb表示颜色，a表示透明度：

polygon.material.uniforms.image = 'image.png';
1

二、常用材质

（一）内置材质

内置材质

1.ColorMaterialProperty（颜色材质）

// 模型位置
var saturnPosition = Cesium.Cartesian3.fromDegrees(
  -95.0,
  45.0,
  300000.0
);
// 添加模型
viewer.entities.add({
  name: "Saturn",
  position: saturnPosition,
  ellipsoid: {
    radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
    // 材质
    material:  Cesium.Color.BLUE
  },
});
 // 视图缩放
viewer.zoomTo(viewer.entities);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

2.ImageMaterialProperty（贴图材质）

image 值可以是URL，Canvas,或者Video
repeat 值为一个二位数，分别表示X,y方向的重复次数，例如new Cartesian2(2.0,
1.0)表示x方向重复2次,y方向重复1次
color 设置颜色之后，会在图片上覆盖一层设置的颜色
transparent 是否透明，纹理为png图片的时候可以设置

// 模型位置
var saturnPosition = Cesium.Cartesian3.fromDegrees(
  -95.0,
  45.0,
  300000.0
);
// 添加模型
viewer.entities.add({
  name: "Saturn",
  position: saturnPosition,
  ellipsoid: {
    radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
    // 材质
    material:  new Cesium.ImageMaterialProperty({
      image: imgUrl,
      repeat: new Cesium.Cartesian2(4, 4),
      color: Cesium.Color.BLUE,
    })
  },
});
 // 视图缩放
viewer.zoomTo(viewer.entities);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

（二）程序生成的纹理

程序生成材质

1.CheckerboardMaterialProperty（棋盘纹理）

evenColor 默认白色，棋盘的第一个颜色
oddColor 默认黑色，第二个颜色
repeat 重复次数

// 模型位置
var saturnPosition = Cesium.Cartesian3.fromDegrees(
  -95.0,
  45.0,
  300000.0
);
// 添加模型
viewer.entities.add({
  name: "Saturn",
  position: saturnPosition,
  ellipsoid: {
    radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
    // 材质
    material:   new Cesium.CheckerboardMaterialProperty({
	  evenColor : Cesium.Color.WHITE,
	  oddColor : Cesium.Color.BLACK,
	  repeat : new Cesium.Cartesian2(4, 4)
	})
  },
});
 // 视图缩放
viewer.zoomTo(viewer.entities);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2.StripeMaterialProperty（条纹纹理）

evenColor 默认白色，棋盘的第一个颜色
oddColor 默认黑色，第二个颜色
repeat 条纹重复次数
offset 偏移量
orientation 水平或者垂直,默认水平

// 模型位置
var saturnPosition = Cesium.Cartesian3.fromDegrees(
  -95.0,
  45.0,
  300000.0
);
// 添加模型
viewer.entities.add({
  name: "Saturn",
  position: saturnPosition,
  ellipsoid: {
    radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
    // 材质
	    material:  new Cesium.StripeMaterialProperty({
	  evenColor : Cesium.Color.WHITE,
	  oddColor : Cesium.Color.BLACK,
	  repeat : 32,
	  offset:20,
	  orientation:Cesium.StripeOrientation.VERTICAL 
	})
  },
});
 // 视图缩放
viewer.zoomTo(viewer.entities);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

3.GridMaterialProperty（网格）

color 网格颜色
cellAlpha 单元格透明度
lineCount 行列个数
lineThickness 线粗细
lineOffset 线偏移

// 模型位置
var saturnPosition = Cesium.Cartesian3.fromDegrees(
  -95.0,
  45.0,
  300000.0
);
// 添加模型
viewer.entities.add({
  name: "Saturn",
  position: saturnPosition,
  ellipsoid: {
    radii: new Cesium.Cartesian3(200000.0, 200000.0, 200000.0),
    // 材质
	    material:  Cesium.GridMaterialProperty({
		  color : Cesium.Color.YELLOW,
		  cellAlpha : 0.2,
		  lineCount : new Cesium.Cartesian2(8, 8),
		  lineThickness : new Cesium.Cartesian2(2.0, 2.0)
		})
  },
});
 // 视图缩放
viewer.zoomTo(viewer.entities);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

（三）基本材质

名称	效果图	描述
漫反射贴图DiffuseMap		一张图片定义了光在所有方向上的散射颜色，一般是个三维向量（vec3）
高光反射贴图 SpecularMap		一张图片，定义了光在某一个方向上的反射颜色，一般是个标量（scalar)，通常用来模拟某个光亮的平面，比如陆地上的水面。
透明贴图AlphaMap		一张图片，定义了材质透明度，一般是个标量（scalar)。通常让一部分表面透明或者半透明，比如栅栏
法向贴图NormalMap		一张图片，定义了在切线空间定义了表面的法向量，一般是个三维向量（ vec3）。法向贴图在不增加几何体复杂度的前提下，提升了表面渲染的细节
凹凸贴图BumpMap		一张图片，定义了表面的高度，一般是个标量（scalar)。就像法向贴图，也可以在不增加几何体复杂度的前提下，提升了表面渲染的细节，它通过相邻像素之间的差异来微调法向量
自发光贴图 EmissionMap		一张图片，定义了材质在所有方向上发光颜色，一般是个三维向量（vec3）。比如走廊里的灯泡

（四）折线材质

这只一种只能添加到折线几何体上的材质。
在这里插入图片描述

1.PolylineGlowMaterialProperty（发光线）

color 发光的颜色(中心颜色为白色)
glowPower 发光的长度，值为线宽的百分比(0~1.0)
taperPower 渐缩效果的强度，以占总线长的百分比表示。如果为1.0或更高，则不使用锥度效果(1.0)

var saturnPosition = Cesium.Cartesian3.fromDegrees(
  -95.0,
  45.0,
  300000.0
);

var entity = viewer.entities.add({
  name: "line",
  position: Cesium.Cartesian3.fromDegrees(-95.0, 34.0),
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([-77, 35,
                                                        -77.1, 35]),
    width : 15,
    material : new Cesium.PolylineGlowMaterialProperty({
     // 渐缩效果的强度，以占总线长的百分比表示。如果为1.0或更高，则不使用锥度效果(1.0)  
    //taperPower: 0.1,
    glowPower : 0.2,
    color : Cesium.Color.BLUE
})
}});
viewer.zoomTo(viewer.entities);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

2. PolylineOutlineMaterialProperty（外轮廓线材质）

var saturnPosition = Cesium.Cartesian3.fromDegrees(
  -95.0,
  45.0,
  300000.0
);

var entity = viewer.entities.add({
  name: "line",
  position: Cesium.Cartesian3.fromDegrees(-95.0, 34.0),
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([-77, 35,
                                                        -77.1, 35]),
    width : 15,
    material :  new Cesium.PolylineOutlineMaterialProperty({
          color: Cesium.Color.ORANGE,
          outlineWidth: 5,
          outlineColor: Cesium.Color.BLACK,
        }),
}});
viewer.zoomTo(viewer.entities);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

3.PolylineArrowMaterialProperty（带有箭头的线）

var saturnPosition = Cesium.Cartesian3.fromDegrees(
  -95.0,
  45.0,
  300000.0
);

var entity = viewer.entities.add({
  name: "line",
  position: Cesium.Cartesian3.fromDegrees(-95.0, 34.0),
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([-77, 35,
                                                        -77.1, 35]),
    width : 15,
    material : new Cesium.PolylineArrowMaterialProperty(Cesium.Color.PURPLE),
}});
viewer.zoomTo(viewer.entities);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4.PolylineDashMaterialProperty（虚线）

var saturnPosition = Cesium.Cartesian3.fromDegrees(
  -95.0,
  45.0,
  300000.0
);

var entity = viewer.entities.add({
  name: "line",
  position: Cesium.Cartesian3.fromDegrees(-95.0, 34.0),
    polyline : {
        positions : Cesium.Cartesian3.fromDegreesArray([-77, 35,
                                                        -77.1, 35]),
    width : 15,
    material :  new Cesium.PolylineDashMaterialProperty({
          color: Cesium.Color.CYAN,
        }),
}});
viewer.zoomTo(viewer.entities);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

（五）其他材质

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/109555