examples/api.html

<!DOCTYPE html>
<html lang="en">
<head>
	<!-- Use correct character set. -->
	<meta charset="utf-8">
	<!-- Tell IE to use the latest, best version (or Chrome Frame if pre-IE11). -->
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
	<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
	<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
	<title>Cesium Sensor Volumes Example</title>

	<link rel="stylesheet" href="../node_modules/cesium/Build/Cesium/Widgets/widgets.css" />
	<script src="../node_modules/cesium/Build/Cesium/Cesium.js"></script>
	<script src="../dist/cesium-sensor-volumes.js"></script>

	<style>
		#cesiumContainer {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;
			margin: 0;
			overflow: hidden;
			padding: 0;
			font-family: sans-serif;
		}

		html {
			height: 100%;
		}

		body {
			padding: 0;
			margin: 0;
			overflow: hidden;
			height: 100%;
		}

		#toolbar {
			margin: 5px;
			padding: 2px 5px;
			position: absolute;
		}
	</style>
</head>
<body>
<div id="cesiumContainer"></div>
<div id="toolbar"></div>
<script>
	var viewer = new Cesium.Viewer('cesiumContainer', {
		sceneModePicker : false
	});

	var longitude = Cesium.Math.toRadians(-90.0);
	var latitude = Cesium.Math.toRadians(30.0);
	var altitude = 3000000.0;
	var clock = 0.0;
	var cone = Cesium.Math.toRadians(15.0);
	var twist = 0.0;

	function getModelMatrix() {
		var ellipsoid = viewer.scene.globe.ellipsoid;
		var location = ellipsoid.cartographicToCartesian(new Cesium.Cartographic(longitude, latitude, altitude));
		var modelMatrix = Cesium.Transforms.northEastDownToFixedFrame(location);
		var orientation = Cesium.Matrix3.multiply(
			Cesium.Matrix3.multiply(Cesium.Matrix3.fromRotationZ(clock), Cesium.Matrix3.fromRotationY(cone), new Cesium.Matrix3()),
			Cesium.Matrix3.fromRotationX(twist), new Cesium.Matrix3()
		);
		return Cesium.Matrix4.multiply(modelMatrix, Cesium.Matrix4.fromRotationTranslation(orientation, Cesium.Cartesian3.ZERO), new Cesium.Matrix4());
	}

	function addRectangularSensor() {
		viewer.scene.primitives.removeAll();
		var rectangularPyramidSensor = new CesiumSensorVolumes.RectangularPyramidSensorVolume();

		rectangularPyramidSensor.modelMatrix = getModelMatrix();
		rectangularPyramidSensor.radius = 20000000.0;
		rectangularPyramidSensor.xHalfAngle = Cesium.Math.toRadians(40.0);
		rectangularPyramidSensor.yHalfAngle = Cesium.Math.toRadians(20.0);

		rectangularPyramidSensor.lateralSurfaceMaterial = Cesium.Material.fromType('Color');
		rectangularPyramidSensor.lateralSurfaceMaterial.uniforms.color = new Cesium.Color(0.0, 1.0, 1.0, 0.5);
		viewer.scene.primitives.add(rectangularPyramidSensor);
	}

	function addCustomSensor() {
		viewer.scene.primitives.removeAll();
		var customSensor = new CesiumSensorVolumes.CustomSensorVolume();

		var directions = [];
		for (var i = 0; i < 8; ++i) {
			var clock = Cesium.Math.toRadians(45.0 * i);
			var cone = Cesium.Math.toRadians(25.0);
			directions.push(new Cesium.Spherical(clock, cone));
		}

		customSensor.modelMatrix = getModelMatrix();
		customSensor.radius = 20000000.0;
		customSensor.directions = directions;
		viewer.scene.primitives.add(customSensor);
	}

	function addToolbarButton(text, onclick) {
		var button = document.createElement('button');
		button.type = 'button';
		button.className = 'cesium-button';
		button.onclick = onclick;
		button.textContent = text;
		document.getElementById('toolbar').appendChild(button);
	}

	addToolbarButton('Rectangular', addRectangularSensor);
	addToolbarButton('Custom', addCustomSensor);

	addRectangularSensor();
</script>
</body>
</html>