-
Notifications
You must be signed in to change notification settings - Fork 3.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
3D Tiles Sandcastle Demos #5578
Merged
Merged
Changes from 9 commits
Commits
Show all changes
11 commits
Select commit
Hold shift + click to select a range
cca2d01
adding nyc picking demo
rahwang 892f080
Merge pull request #5525 from rahwang/3dtile-picking-demo
lilleyse 734c0d0
Merge branch 'master' into 3d-tiles-demos
lilleyse 96a328d
nyc styling demo
rahwang c393c59
switching to a few simple examples
rahwang e960cfc
add comments
rahwang f0d0b3b
removing the time-dynamic styling for now
rahwang 475e5e2
Merge pull request #5553 from rahwang/3d-tiles-styling-demo
lilleyse 0e749b2
Added more 3D Tiles sandcastle demos
lilleyse b377a9e
Updated links and added attribution
lilleyse 10e63f7
Added San Miguel tileset
lilleyse File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,52 @@ | ||
| <!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 | ||
| var viewer = new Cesium.Viewer('cesiumContainer'); | ||
|
|
||
| var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ | ||
| url : 'https://beta.cesium.com/api/assets/1447?access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiODNmMjQzNy1mNGI4LTQ2ZTItOWI0NS0yZDUzMzMyNWMxNzQiLCJpZCI6OSwiaWF0IjoxNDgxODI5ODU0fQ.4fmVtksZ1CAzjPBprJ47uIuK0vr-8CcuDKM7M8a0mF4' | ||
| })); | ||
|
|
||
| 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> | ||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,160 @@ | ||
| <!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 | ||
| 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/1445?access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiODNmMjQzNy1mNGI4LTQ2ZTItOWI0NS0yZDUzMzMyNWMxNzQiLCJpZCI6OSwiaWF0IjoxNDgxODI5ODU0fQ.4fmVtksZ1CAzjPBprJ47uIuK0vr-8CcuDKM7M8a0mF4' | ||
| })); | ||
|
|
||
| // 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> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Perhaps don't put this one in a body of water?