关于编辑器:cesium编程使用渐变纹理

4次阅读

共计 1775 个字符，预计需要花费 5 分钟才能阅读完成。

举荐：将场景编辑器 (NSDT)
退出你的 3D 开发工具链官网示例在渲染地形的时候，咱们会应用突变的纹理，辨别不同的高度，官网给了一个示例, 本地门路：Globe Materials

剖析这里代码给了一坨，整体浏览一下，理一理思路，简略来讲是这样的加载数据–> 依据参数生成一张突变的图–> 将图赋值到纹理上，OK，那要害的函数就是生成图的函数 getColorRamp，增加物体和设置材质都是入门根底，能够在网上搜寻下教程。看看 fillRect 的成果 <script>
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.fillStyle=”#ff0000″;
ctx.fillRect(0,0,1,100);
</script>
能够看到 fillRect(0,0,1,100)是纵向的，fillRect(0,0,100,1)是横向的，好，上面来实际操作一下，当初咱们就来绘制一面墙，并应用突变来填充它 // 增加物体
var redWall = viewer.entities.add({

name: 'Red wall at height',
wall: {
    positions: Cesium.Cartesian3.fromDegreesArrayHeights([
        121.444409, 31.247417, 200.0,
        121.533521, 31.235685, 200.0,
        121.563273, 31.190347, 200.0,
        121.546744, 31.194054, 200.0,
        121.516705, 31.191459, 200.0,
        121.502188, 31.203074, 200.0
    ]),
    minimumHeights: [3000.0, 2000.0, 2000, 2000, 2000, 3000],
    material: getColorRamp([0.0, 0.045, 0.1, 0.15, 0.37, 0.54, 1.0],true)
}

});

// 纹理图绘制
function getColorRamp(elevationRamp) {

var ramp = document.createElement('canvas');
ramp.width = 1;
ramp.height = 100;
var ctx = ramp.getContext('2d');

var values = elevationRamp;
var grd = ctx.createLinearGradient(0, 0, 0, 100);
grd.addColorStop(values[0], '#000000'); //black
grd.addColorStop(values[1], '#2747E0'); //blue
grd.addColorStop(values[2], '#D33B7D'); //pink
grd.addColorStop(values[3], '#D33038'); //red
grd.addColorStop(values[4], '#FF9742'); //orange
grd.addColorStop(values[5], '#ffd700'); //yellow
grd.addColorStop(values[6], '#ffffff'); //white

ctx.fillStyle = grd;
ctx.fillRect(0, 0, 1, 100);
return ramp;

}

后果：

当然，也能够增加通明纹理，只须要这样 var redWall = viewer.entities.add({
name: ‘Red wall at height1’,
wall: {

positions: Cesium.Cartesian3.fromDegreesArrayHeights([...]),
minimumHeights: [...],
material:new Cesium.ImageMaterialProperty({
  // image:"2.png",
  image:getColorRamp([0.0, 0.045, 0.1, 0.15, 0.37, 0.54, 1.0], true),
  transparent:true
})

}
});

// 改几个色阶
grd.addColorStop(values[5], ‘transparent’); //yellow

参考源码

正文完