SuperMap iClient3D for WebGL教程-BoxGraphics

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

BoxGraphics属性

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例子.png

BoxGraphics位置的方式是通过enitity的position进行控制，position在BoxGraphics的底面中心点位置。
Box除了使用纯色填充外，也可以使用纹理材质、格网材质和渐变色材质进行填充。

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'
        })
    }
});

boximg.png

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)
        })
    }
});

boxgrid.png

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
        })
    }
});

Box渐变.png

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