前几篇博客我们了解了自定义点、线、面绘制,这篇我们接着学习cesium自定义纹理贴图。我们完成点线面的绘制,只是绘制出了对象的框架,没有逼真的外观。逼真外观是需要设置材质来实现:Material 。
再次查看appearance对象:
属性里面的material就是设置对象的材质,查看material:
我们发现,cesium提供很多材质接口,如果要自定义设置纹理贴图,我们使用fabric接口定义自己材质。
首先看cesium给出的demo:
我们看到在uniforms属性设置通过type设置类型、通过uniforms设置对应值。
1、首先我们新加着色代码,设置材质:
2、修改顶点着色器代码:
3、修改片源着色器源码:
4、修改CreateGeometry函数。这里,我们看到将颜色换成了UV坐标:
5、修改CreateAppearence函数,在uniform的url关联纹理:
直接上示例源码(因为我也不知道为何这样写):
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, 0.001,