How to show floors to on a polygon using CesiumJs

Question

I am new to CesiumJs and I want to add 12 floors to a building. I have created the building using polygon.

Here is the code I have used to create the polygon

var viewer = new Cesium.Viewer('cesiumContainer');
	var wyoming = viewer.entities.add({
	name : 'My location',
	polygon : {
    hierarchy : Cesium.Cartesian3.fromDegreesArray([cordinates of location]),
		material : Cesium.Color.WHITE.withAlpha(0.5),
		outline : true,
		fill : true,
		outlineColor : Cesium.Color.BLACK,
	  }
	});
	wyoming.polygon.extrudedHeight = 50;
	viewer.camera.flyTo({
  destination : Cesium.Cartesian3.fromDegrees(-79.38443,43.64843, 144.00),
  orientation : {
    heading : Cesium.Math.toRadians(121.00),
    pitch : Cesium.Math.toRadians(60.00 - 90.0),
    roll : 0.0
  },
  duration : 4.0, // in seconds
  complete : function() {
  },
  
   point : {
    pixelSize : 5,
	color : Cesium.Color.RED,
	outlineColor : Cesium.Color.WHITE,
	outlineWidth : 2
  },
  label : {
	text : 'My another location',
    font : '14pt monospace',
    style: Cesium.LabelStyle.FILL_AND_OUTLINE,
    outlineWidth : 2,
    verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
    pixelOffset : new Cesium.Cartesian2(0, -9)
  }
});

Thanks in advance

Answer 1

In this case you will need something more complex than extruded polygon.

If you need a simple building with floors of alternating color you can construct it from Wall entity with stripe material and putting a polygon on top of it as a "roof" (use same coordinates, put height property to the height of the wall, and not set extrudedHeight).

This will create wall with alternating black and white floors:

function createBuildingWalls(coordinates, floors)
{
  var floorHeight = 4;
  var height = floors * floorHeight;
  var low = Array.apply(null, Array(coordinates.length/2)).map(function() { return 0 });
  var high = Array.apply(null, Array(coordinates.length/2)).map(function() { return height });
  var buildingWalls = new Cesium.Entity({
    name : 'Wall',
    wall : {
        positions : Cesium.Cartesian3.fromDegreesArray(coordinates),
        maximumHeights : high,
        minimumHeights : low,
        material : new Cesium.StripeMaterialProperty({
                        evenColor : Cesium.Color.WHITE,
                        oddColor : Cesium.Color.BLACK,
                        repeat : 20
        })
    }});
    return buildingWalls;
}

And this roof (might run into an issue with very large polygons, but should be fine for buildings):

function createBuildingRoof(coordinates, floors)
{
  var floorHeight = 4;
  var buildingHeight = floors * floorHeight;
  var buildingRoof = new Cesium.Entity({
     name : 'My location',
    polygon : {
      hierarchy : Cesium.Cartesian3.fromDegreesArray(coordinates),
      material : Cesium.Color.RED.withAlpha(0.9),
      outline : true,
      height : buildingHeight,
      fill : true,
      outlineColor : Cesium.Color.BLACK,
    }
  });

  return  buildingRoof;
}

You can also use a texture (image) as a material and apply it to the wall, but it is more complex. You would need to set ImageMaterial property and according propably set repeat property depending on the type of your texture (ie repeat a single floor verticaly, or single 12 floor stripe horizontaly or some other combination) http://cesiumjs.org/Cesium/Build/Documentation/ImageMaterialProperty.html

Other solution would be to use 3D models of the buildings: http://cesiumjs.org/2014/03/03/Cesium-3D-Models-Tutorial/