本文共 1728 字，大约阅读时间需要 5 分钟。

作者：桔子

本文同步更新于简书文章https://www.jianshu.com/p/132f8b62cab2

BoxGraphics是WebGL中常用的几何对象，本节教程将介绍如何使用这个对象。

heightReference：高度模式

dimensions：维度设置，也就是长宽高，单位为米

show：显示控制

fill：填充设置

material：材质设置

outline：外边框线显示设置

outlineColor：外边框线颜色

outlineWidth：外边框线线框

shadows：太阳阴影模式

distanceDisplayCondition：可见距离控制

下面我们来看如何加载：

var redBox = viewer.entities.add({    name : 'Red box with black outline',    position: Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0),    box : {        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),        material : Cesium.Color.RED.withAlpha(0.5),        outline : true,        outlineColor : Cesium.Color.BLACK    }});

BoxGraphics位置的方式是通过enitity的position进行控制，position在BoxGraphics的底面中心点位置。

var blueBox = viewer.entities.add({    name : 'Blue box',    position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),    box : {        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),        material : new Cesium.ImageMaterialProperty({			image:'Box.jpg'		})    }});

var blueBox = viewer.entities.add({    name : 'Blue box',    position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),    box : {        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),		material:new Cesium.GridMaterialProperty({			lineCount:new Cesium.Cartesian2(4, 4)		})    }});

var blueBox = viewer.entities.add({    name : 'Blue box',    position: Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),    box : {        dimensions : new Cesium.Cartesian3(400000.0, 300000.0, 500000.0),		material:new Cesium.StripeMaterialProperty({			evenColor:Cesium.Color.WHITE.withAlpha(0.2),			repeat:2,			oddColor:Cesium.Color.BLUE		})    }});

本节教程就到这里，下节教程再见。

转载地址：http://mcvxi.baihongyu.com/