前几篇博客咱们了解了自定义点、线、面绘制,这篇咱们接着学习cesium自定义纹理贴图。咱们完成点线面的绘制,只是绘制出了对象的框架,没有逼真的外观。逼真外观是须要设置材质来实现:Material 。
再次查看appearance对象:app
属性里面的material就是设置对象的材质,查看material:框架
咱们发现,cesium提供不少材质接口,若是要自定义设置纹理贴图,咱们使用fabric接口定义本身材质。
首先看cesium给出的demo:async
咱们看到在uniforms属性设置经过type设置类型、经过uniforms设置对应值。函数
直接上示例源码(由于我也不知道为什么这样写):post
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, -10