前几篇博客我们了解了自定义点、线、面绘制，这篇我们接着学习cesium自定义纹理贴图。我们完成点线面的绘制，只是绘制出了对象的框架，没有逼真的外观。逼真外观是需要设置材质来实现：Material 。
再次查看appearance对象：
image.png
属性里面的material就是设置对象的材质，查看material：
image.png
我们发现，cesium提供很多材质接口，如果要自定义设置纹理贴图，我们使用fabric接口定义自己材质。
首先看cesium给出的demo：
image.png
我们看到在uniforms属性设置通过type设置类型、通过uniforms设置对应值。
1、首先我们新加着色代码，设置材质：
image.png
2、修改顶点着色器代码：
image.png
3、修改片源着色器源码：
image.png
4、修改CreateGeometry函数。这里，我们看到将颜色换成了UV坐标：
image.png
5、修改CreateAppearence函数,在uniform的url关联纹理：
image.png
直接上示例源码（因为我也不知道为何这样写）：
var viewer = new Cesium.Viewer('cesiumContainer');
//封装PrimitiveTexture
var PrimitiveTexture= (
function () {
var vertexShader;
var fragmentShader;
var materialShader;
var viewer;
var url;
function _(options) {
viewer = options.viewer;
vertexShader = getVS();
fragmentShader = getFS();
materialShader = getMS();
url = options.url ? options.url : 'sampledata/images/texture1';
if (options.Cartesians && options.Cartesians.length >= 3) {
var postionsTemp = [];
var stsTemp = [];
var indicesTesm = [];
for (var i = 0; i < options.Cartesians.length; i++) {
postionsTemp.push(options.Cartesians[i].x);
postionsTemp.push(options.Cartesians[i].y);
postionsTemp.push(options.Cartesians[i].z);
}
for (var i = 0; i < options.Cartesians.length; i+=3) {
indicesTesm.push(i);
indicesTesm.push(i+1);
indicesTesm.push(i + 2);
stsTemp.push(0);
stsTemp.push(1);
stsTemp.push(1);
stsTemp.push(1);
stsTemp.push(1);
stsTemp.push(0);
}
this.positionArr = new Float64Array(postionsTemp);
this.sts = new Uint8Array(stsTemp);
this.indiceArr = new Uint16Array(indicesTesm);
} else {
var p1 = Cesium.Cartesian3.fromDegrees(0, 0, -10);
var p2 = Cesium.Cartesian3.fromDegrees(0,