Merge pull request #5578 from AnalyticalGraphicsInc/3d-tiles-demos

3D Tiles Sandcastle Demos
AnalyticalGraphicsInc · 5838c6ff8e98366b5d6d929bc29d2a5ff5d69ec6 · pjcozzi committed on GitHub Jul 5, 2017 · Jul 5, 2017 · 5838c6f
2 parents b9bb63c + 10e63f7
commit 5838c6ff8e98366b5d6d929bc29d2a5ff5d69ec6
diff --git a/Apps/Sandcastle/gallery/3D Tiles Adjust Height.html b/Apps/Sandcastle/gallery/3D Tiles Adjust Height.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">  <!-- Use Chrome Frame in IE -->
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+    <meta name="description" content="Adjust the height of a 3D Tiles tileset.">
+    <meta name="cesium-sandcastle-labels" content="3D Tiles">
+    <title>Cesium Demo</title>
+    <script type="text/javascript" src="../Sandcastle-header.js"></script>
+    <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
+    <script type="text/javascript">
+    require.config({
+        baseUrl : '../../../Source',
+        waitSeconds : 60
+    });
+    </script>
+</head>
+<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
+<style>
+    @import url(../templates/bucket.css);
+    #toolbar {
+        background: rgba(42, 42, 42, 0.8);
+        padding: 4px;
+        border-radius: 4px;
+    }
+    #toolbar input {
+        vertical-align: middle;
+        padding-top: 2px;
+        padding-bottom: 2px;
+    }
+</style>
+<div id="cesiumContainer" class="fullSize"></div>
+<div id="loadingOverlay"><h1>Loading...</h1></div>
+<div id="toolbar">
+    <div>Height</div>
+    <input type="range" min="-100.0" max="100.0" step="1" data-bind="value: height, valueUpdate: 'input'">
+    <input type="text" size="5" data-bind="value: height">
+</div>
+<script id="cesium_sandcastle_script">
+function startup(Cesium) {
+    'use strict';
+//Sandcastle_Begin
+var viewer = new Cesium.Viewer('cesiumContainer', {
+    shadows : true
+});
+
+viewer.scene.globe.depthTestAgainstTerrain = true;
+
+var viewModel = {
+    height: 0
+};
+
+Cesium.knockout.track(viewModel);
+
+var toolbar = document.getElementById('toolbar');
+Cesium.knockout.applyBindings(viewModel, toolbar);
+
+var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
+    url : '../../../Specs/Data/Cesium3DTiles/Tilesets/Tileset'
+}));
+
+tileset.readyPromise.then(function() {
+    var boundingSphere = tileset.boundingSphere;
+    viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0.0, -0.5, boundingSphere.radius * 2));
+    viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
+}).otherwise(function(error) {
+    throw(error);
+});
+
+Cesium.knockout.getObservable(viewModel, 'height').subscribe(function(height) {
+    height = Number(height);
+    if (isNaN(height)) {
+        return;
+    }
+
+    var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
+    var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
+    var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, height);
+    var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
+    tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
+});
+//Sandcastle_End
+Sandcastle.finishedLoading();
+}
+if (typeof Cesium !== "undefined") {
+    startup(Cesium);
+} else if (typeof require === "function") {
+    require(["Cesium"], startup);
+}
+</script>
+</body>
+</html>
diff --git a/Apps/Sandcastle/gallery/3D Tiles Adjust Height.jpg b/Apps/Sandcastle/gallery/3D Tiles Adjust Height.jpg
diff --git a/Apps/Sandcastle/gallery/3D Tiles BIM.html b/Apps/Sandcastle/gallery/3D Tiles BIM.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">  <!-- Use Chrome Frame in IE -->
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+    <meta name="description" content="A sample BIM dataset rendered with 3D Tiles.">
+    <meta name="cesium-sandcastle-labels" content="Showcases, 3D Tiles">
+    <title>Cesium Demo</title>
+    <script type="text/javascript" src="../Sandcastle-header.js"></script>
+    <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
+    <script type="text/javascript">
+    require.config({
+        baseUrl : '../../../Source',
+        waitSeconds : 60
+    });
+    </script>
+</head>
+<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
+<style>
+    @import url(../templates/bucket.css);
+</style>
+<div id="cesiumContainer" class="fullSize"></div>
+<div id="loadingOverlay"><h1>Loading...</h1></div>
+<script id="cesium_sandcastle_script">
+function startup(Cesium) {
+    'use strict';
+//Sandcastle_Begin
+// Power Plant design model provided by Bentley Systems
+var viewer = new Cesium.Viewer('cesiumContainer');
+
+var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
+    url : 'https://beta.cesium.com/api/assets/1459?access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzNjUyM2I5Yy01YmRhLTQ0MjktOGI0Zi02MDdmYzBjMmY0MjYiLCJpZCI6NDQsImFzc2V0cyI6WzE0NTldLCJpYXQiOjE0OTkyNjQ3ODF9.SW_rwY-ic0TwQBeiweXNqFyywoxnnUBtcVjeCmDGef4'
+}));
+
+tileset.readyPromise.then(function() {
+    var boundingSphere = tileset.boundingSphere;
+    viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0.5, -0.2, boundingSphere.radius * 4.0));
+    viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
+}).otherwise(function(error) {
+    throw(error);
+});
+//Sandcastle_End
+Sandcastle.finishedLoading();
+}
+if (typeof Cesium !== "undefined") {
+    startup(Cesium);
+} else if (typeof require === "function") {
+    require(["Cesium"], startup);
+}
+</script>
+</body>
+</html>
diff --git a/Apps/Sandcastle/gallery/3D Tiles BIM.jpg b/Apps/Sandcastle/gallery/3D Tiles BIM.jpg
diff --git a/Apps/Sandcastle/gallery/3D Tiles Batch Table Hierarchy.html b/Apps/Sandcastle/gallery/3D Tiles Batch Table Hierarchy.html
@@ -29,7 +29,7 @@
     'use strict';
 //Sandcastle_Begin
 
-// In this demo doorknobs, doors, roofs, and walls are styled via the batch table hierarchy.
+// Doorknobs, doors, roofs, and walls are styled with the batch table hierarchy.
 // Since buildings and zones are not backed by geometry they are not styled directly. However
 // styles may be written that take building and zone properties into account.
 //
@@ -82,17 +82,11 @@
 //     * doorknob_name
 
 var viewer = new Cesium.Viewer('cesiumContainer');
-viewer.extend(Cesium.viewerCesium3DTilesInspectorMixin);
-var inspectorViewModel = viewer.cesium3DTilesInspector.viewModel;
-
 viewer.clock.currentTime = new Cesium.JulianDate(2457522.154792);
 
-var scene = viewer.scene;
-var url = '../../../Specs/Data/Cesium3DTiles/Hierarchy/BatchTableHierarchy';
-var tileset = scene.primitives.add(new Cesium.Cesium3DTileset({
-    url : url
+var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
+    url : '../../../Specs/Data/Cesium3DTiles/Hierarchy/BatchTableHierarchy'
 }));
-inspectorViewModel.tileset = tileset;
 
 tileset.readyPromise.then(function() {
     var boundingSphere = tileset.boundingSphere;
@@ -185,33 +179,28 @@
 
 // When a feature is left clicked, print its class name and properties
 handler.setInputAction(function(movement) {
-    if (!inspectorViewModel.picking) {
+    var feature = viewer.scene.pick(movement.position);
+    if (!Cesium.defined(feature)) {
         return;
     }
-
-    var feature = inspectorViewModel.feature;
-    if (Cesium.defined(feature)) {
-        console.log('Class: ' + feature.getExactClassName());
-        console.log('Properties:');
-        var propertyNames = feature.getPropertyNames();
-        var length = propertyNames.length;
-        for (var i = 0; i < length; ++i) {
-            var name = propertyNames[i];
-            var value = feature.getProperty(name);
-            console.log('  ' + name + ': ' + value);
-        }
+    console.log('Class: ' + feature.getExactClassName());
+    console.log('Properties:');
+    var propertyNames = feature.getPropertyNames();
+    var length = propertyNames.length;
+    for (var i = 0; i < length; ++i) {
+        var name = propertyNames[i];
+        var value = feature.getProperty(name);
+        console.log('  ' + name + ': ' + value);
     }
 }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
 
 // When a feature is middle clicked, hide it
 handler.setInputAction(function(movement) {
-    if (!inspectorViewModel.picking) {
+    var feature = viewer.scene.pick(movement.position);
+    if (!Cesium.defined(feature)) {
         return;
     }
-
-    if (Cesium.defined(inspectorViewModel.feature)) {
-        inspectorViewModel.feature.show = false;
-    }
+    feature.show = false;
 }, Cesium.ScreenSpaceEventType.MIDDLE_CLICK);
 
 //Sandcastle_End
diff --git a/Apps/Sandcastle/gallery/3D Tiles Feature Picking.html b/Apps/Sandcastle/gallery/3D Tiles Feature Picking.html
@@ -0,0 +1,161 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">  <!-- Use Chrome Frame in IE -->
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
+    <meta name="description" content="Pick features in a 3D Tiles tileset.">
+    <meta name="cesium-sandcastle-labels" content="Showcases, 3D Tiles">
+    <title>Cesium Demo</title>
+    <script type="text/javascript" src="../Sandcastle-header.js"></script>
+    <script type="text/javascript" src="../../../ThirdParty/requirejs-2.1.20/require.js"></script>
+    <script type="text/javascript">
+    require.config({
+        baseUrl : '../../../Source',
+        waitSeconds : 60
+    });
+    </script>
+</head>
+<body class="sandcastle-loading" data-sandcastle-bucket="bucket-requirejs.html">
+<style>
+    @import url(../templates/bucket.css);
+</style>
+<div id="cesiumContainer" class="fullSize"></div>
+<div id="loadingOverlay"><h1>Loading...</h1></div>
+<script id="cesium_sandcastle_script">
+function startup(Cesium) {
+    'use strict';
+//Sandcastle_Begin
+// A simple demo of 3D Tiles feature picking with hover and select behavior
+// Building data courtesy of NYC OpenData portal: http://www1.nyc.gov/site/doitt/initiatives/3d-building.page
+var viewer = new Cesium.Viewer('cesiumContainer');
+
+// Set the initial camera view to look at Manhattan
+var initialPosition = Cesium.Cartesian3.fromDegrees(-74.01881302800248, 40.69114333714821, 753);
+var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(21.27879878293835, -21.34390550872461, 0.0716951918898415);
+viewer.scene.camera.setView({
+    destination: initialPosition,
+    orientation: initialOrientation,
+    endTransform: Cesium.Matrix4.IDENTITY
+});
+
+// Load the NYC buildings tileset
+var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
+    url: 'https://beta.cesium.com/api/assets/1461?access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkYWJmM2MzNS02OWM5LTQ3OWItYjEyYS0xZmNlODM5ZDNkMTYiLCJpZCI6NDQsImFzc2V0cyI6WzE0NjFdLCJpYXQiOjE0OTkyNjQ3NDN9.vuR75SqPDKcggvUrG_vpx0Av02jdiAxnnB1fNf-9f7s'
+}));
+
+// HTML overlay for showing feature name on mouseover
+var nameOverlay = document.createElement('div');
+viewer.container.appendChild(nameOverlay);
+nameOverlay.className = 'backdrop';
+nameOverlay.style.display = 'none';
+nameOverlay.style.position = 'absolute';
+nameOverlay.style.bottom = '0';
+nameOverlay.style.left = '0';
+nameOverlay.style['pointer-events'] = 'none';
+nameOverlay.style.padding = '4px';
+nameOverlay.style.backgroundColor = 'black';
+
+// Information about the currently selected feature
+var selected = {
+    feature: undefined,
+    originalColor: new Cesium.Color()
+};
+
+// Information about the currently highlighted feature
+var highlighted = {
+    feature: undefined,
+    originalColor: new Cesium.Color()
+};
+
+// An entity object which will hold info about the currently selected feature for infobox display
+var selectedEntity = new Cesium.Entity();
+
+// Color a feature yellow on hover.
+viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
+    // If a feature was previously highlighted, undo the highlight
+    if (Cesium.defined(highlighted.feature)) {
+        highlighted.feature.color = highlighted.originalColor;
+        highlighted.feature = undefined;
+    }
+
+    // Pick a new feature
+    var pickedFeature = viewer.scene.pick(movement.endPosition);
+    if (!Cesium.defined(pickedFeature)) {
+        nameOverlay.style.display = 'none';
+        return;
+    }
+
+    // A feature was picked, so show it's overlay content
+    nameOverlay.style.display = 'block';
+    nameOverlay.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + 'px';
+    nameOverlay.style.left = movement.endPosition.x + 'px';
+    var name = pickedFeature.getProperty('name');
+    if (!Cesium.defined(name)) {
+        name = pickedFeature.getProperty('id');
+    }
+    nameOverlay.textContent = name;
+
+    // Highlight the feature if it's not already selected.
+    if (pickedFeature !== selected.feature) {
+        highlighted.feature = pickedFeature;
+        Cesium.Color.clone(pickedFeature.color, highlighted.originalColor);
+        pickedFeature.color = Cesium.Color.YELLOW;
+    }
+}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
+
+// Color a feature on selection and show metadata in the InfoBox.
+var clickHandler = viewer.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
+viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
+    // If a feature was previously selected, undo the highlight
+    if (Cesium.defined(selected.feature)) {
+        selected.feature.color = selected.originalColor;
+        selected.feature = undefined;
+    }
+
+    // Pick a new feature
+    var pickedFeature = viewer.scene.pick(movement.position);
+    if (!Cesium.defined(pickedFeature)) {
+        clickHandler(movement);
+        return;
+    }
+
+    // Select the feature if it's not already selected
+    if (selected.feature === pickedFeature) {
+        return;
+    }
+    selected.feature = pickedFeature;
+
+    // Save the selected feature's original color
+    if (pickedFeature === highlighted.feature) {
+        Cesium.Color.clone(highlighted.originalColor, selected.originalColor);
+        highlighted.feature = undefined;
+    } else {
+        Cesium.Color.clone(pickedFeature.color, selected.originalColor);
+    }
+
+    // Highlight newly selected feature
+    pickedFeature.color = Cesium.Color.LIME;
+
+    // Set feature infobox description
+    var featureName = pickedFeature.getProperty('name');
+    selectedEntity.name = featureName;
+    selectedEntity.description = 'Loading <div class="cesium-infoBox-loading"></div>';
+    viewer.selectedEntity = selectedEntity;
+    selectedEntity.description = '<table class="cesium-infoBox-defaultTable"><tbody>' +
+                                 '<tr><th>BIN</th><td>' + pickedFeature.getProperty('BIN') + '</td></tr>' +
+                                 '<tr><th>DOITT ID</th><td>' + pickedFeature.getProperty('DOITT_ID') + '</td></tr>' +
+                                 '<tr><th>SOURCE ID</th><td>' + pickedFeature.getProperty('SOURCE_ID') + '</td></tr>' +
+                                 '</tbody></table>';
+}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+//Sandcastle_End
+Sandcastle.finishedLoading();
+}
+if (typeof Cesium !== "undefined") {
+    startup(Cesium);
+} else if (typeof require === "function") {
+    require(["Cesium"], startup);
+}
+</script>
+</body>
+</html>
diff --git a/Apps/Sandcastle/gallery/3D Tiles Feature Picking.jpg b/Apps/Sandcastle/gallery/3D Tiles Feature Picking.jpg