3D Tiles - Batch Table Hierarchy #4625
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,248 @@ | ||
| <!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="Use Viewer to start building new applications or easily embed Cesium into existing applications."> | ||
| <meta name="cesium-sandcastle-labels" content="Showcases"> | ||
| <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 button { display: block; } | ||
| </style> | ||
| <div id="cesiumContainer" class="fullSize"></div> | ||
| <div id="loadingOverlay"><h1>Loading...</h1></div> | ||
| <div id="toolbar"></div> | ||
| <script id="cesium_sandcastle_script"> | ||
| function startup(Cesium) { | ||
| 'use strict'; | ||
| //Sandcastle_Begin | ||
|
|
||
| var viewer = new Cesium.Viewer('cesiumContainer', { | ||
| scene3DOnly : true | ||
| }); | ||
|
|
||
| var scene = viewer.scene; | ||
| var tilesetUrl = '../../../Specs/Data/Cesium3DTiles/Hierarchy/BatchTableHierarchyMultipleParents'; | ||
| var tileset = scene.primitives.add(new Cesium.Cesium3DTileset({ | ||
| url : tilesetUrl | ||
| })); | ||
|
|
||
| tileset.readyPromise.then(function(tileset) { | ||
| var boundingSphere = tileset.boundingSphere; | ||
| viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0, -2.0, 0)); | ||
| viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY); | ||
| }); | ||
|
|
||
| var styles = []; | ||
| function addStyle(name, style) { | ||
| styles.push({ | ||
| name : name, | ||
| style : style | ||
| }); | ||
| } | ||
|
|
||
| addStyle('No style', {}); | ||
|
|
||
| addStyle('Color by building', { | ||
|
There was a problem hiding this comment. Can you add an example using There was a problem hiding this comment. Also, I think this example needs more context; it is a bit hard to hack on without knowing what the semantic hierarchy looks like. Perhaps there should be comments in this example with similar info to what you put in the opening comment of this PR. |
||
| "color" : { | ||
| "conditions" : [ | ||
| ["${building_name} === 'building0'", "color('purple')"], | ||
| ["${building_name} === 'building1'", "color('red')"], | ||
| ["${building_name} === 'building2'", "color('orange')"], | ||
| ["true", "color('blue')"] | ||
| ] | ||
| } | ||
| }); | ||
|
|
||
| addStyle('Color all doors', { | ||
| "color" : { | ||
| "conditions" : [ | ||
| ["isExactClass('door')", "color('orange')"], | ||
| ["true", "color('white')"] | ||
| ] | ||
| } | ||
| }); | ||
|
|
||
| addStyle('Color all features derived from door', { | ||
| "color" : { | ||
| "conditions" : [ | ||
| ["isClass('door')", "color('orange')"], | ||
| ["true", "color('white')"] | ||
| ] | ||
| } | ||
| }); | ||
|
|
||
| addStyle('Style by height', { | ||
| "color" : { | ||
| "conditions" : [ | ||
| ["${height} >= 10", "color('purple')"], | ||
| ["${height} >= 6", "color('red')"], | ||
| ["${height} >= 5", "color('orange')"], | ||
| ["true", "color('blue')"] | ||
| ] | ||
| } | ||
| }); | ||
|
|
||
| addStyle('Style by classifier', { | ||
| "color" : { | ||
| "conditions" : [ | ||
| ["isClass('classifier_new') && isClass('classifier_old')", "color('purple')"], | ||
| ["isClass('classifier_new')", "color('red')"], | ||
| ["isClass('classifier_old')", "color('blue')"], | ||
| ["true", "color()"] | ||
| ] | ||
| } | ||
| }); | ||
|
|
||
| function setStyle(style) { | ||
| return function() { | ||
| tileset.style = new Cesium.Cesium3DTileStyle(style); | ||
| }; | ||
| } | ||
|
|
||
| var styleOptions = []; | ||
| for (var j = 0; j < styles.length; ++j) { | ||
| var style = styles[j]; | ||
| styleOptions.push({ | ||
| text : style.name, | ||
| onselect : setStyle(style.style) | ||
| }); | ||
| } | ||
|
|
||
| Sandcastle.addToolbarMenu(styleOptions); | ||
|
|
||
| var canvas = viewer.canvas; | ||
| canvas.setAttribute('tabindex', '0'); // needed to put focus on the canvas | ||
| canvas.onclick = function() { | ||
| // To get key events | ||
| canvas.focus(); | ||
| }; | ||
|
|
||
| var handler = new Cesium.ScreenSpaceEventHandler(canvas); | ||
|
|
||
| var pickingEnabled = true; | ||
| var flags = { | ||
| // Mouse | ||
| leftDown : false, | ||
| middleDown : false, | ||
| rightDown : false | ||
| }; | ||
|
|
||
| handler.setInputAction(function(movement) { | ||
| flags.leftDown = true; | ||
| }, Cesium.ScreenSpaceEventType.LEFT_DOWN); | ||
|
|
||
| handler.setInputAction(function(movement) { | ||
| flags.middleDown = true; | ||
| }, Cesium.ScreenSpaceEventType.MIDDLE_DOWN); | ||
|
|
||
| handler.setInputAction(function(movement) { | ||
| flags.rightDown = true; | ||
| }, Cesium.ScreenSpaceEventType.RIGHT_DOWN); | ||
|
|
||
| handler.setInputAction(function(movement) { | ||
| flags.leftDown = false; | ||
| }, Cesium.ScreenSpaceEventType.LEFT_UP); | ||
|
|
||
| handler.setInputAction(function(movement) { | ||
| flags.middleDown = false; | ||
| }, Cesium.ScreenSpaceEventType.MIDDLE_UP); | ||
|
|
||
| handler.setInputAction(function(movement) { | ||
| flags.rightDown = false; | ||
| }, Cesium.ScreenSpaceEventType.RIGHT_UP); | ||
|
|
||
| var current = { | ||
| feature : undefined, | ||
| originalColor : new Cesium.Color() | ||
| }; | ||
|
|
||
| var HIGHLIGHT_COLOR = new Cesium.Color(1.0, 1.0, 0.0, 0.4); | ||
|
|
||
| // Highlight feature on mouse over | ||
| handler.setInputAction(function(movement) { | ||
| if (!pickingEnabled) { | ||
| return; | ||
| } | ||
|
|
||
| if (flags.leftDown || flags.middleDown || flags.rightDown) { | ||
| // Don't highlight when panning and zooming | ||
| return; | ||
| } | ||
|
|
||
| var pickedFeature = scene.pick(movement.endPosition); | ||
|
|
||
| if (Cesium.defined(current.feature) && (current.feature !== pickedFeature)) { | ||
| // Restore original color to feature that is no longer selected | ||
|
|
||
| // This assignment is necessary to work with the set property | ||
| current.feature.color = Cesium.Color.clone(current.originalColor, current.feature.color); | ||
| current.feature = undefined; | ||
| } | ||
|
|
||
| if (Cesium.defined(pickedFeature) && (pickedFeature !== current.feature)) { | ||
| // For testing re-evaluating a style when a property changes | ||
| //pickedFeature.setProperty('id', 1); | ||
|
|
||
| current.feature = pickedFeature; | ||
| Cesium.Color.clone(pickedFeature.color, current.originalColor); | ||
|
|
||
| // Highlight newly selected feature | ||
| pickedFeature.color = Cesium.Color.clone(HIGHLIGHT_COLOR, pickedFeature.color); | ||
| } | ||
| }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); | ||
|
|
||
| // When a feature is left clicked, print it's class name and properties | ||
| handler.setInputAction(function(movement) { | ||
| if (!pickingEnabled) { | ||
| return; | ||
| } | ||
|
|
||
| var feature = current.feature; | ||
| if (Cesium.defined(feature)) { | ||
| console.log('Class: ' + feature.getClassName()); | ||
| 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 double middle clicked, hide it | ||
| handler.setInputAction(function(movement) { | ||
| if (!pickingEnabled) { | ||
| return; | ||
| } | ||
|
|
||
| if (Cesium.defined(current.feature)) { | ||
| current.feature.show = false; | ||
| } | ||
| }, Cesium.ScreenSpaceEventType.MIDDLE_DOUBLE_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.
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
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
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.
Can you make a screenshot for this when ready?
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.
Minor, but can you please rename this to "3D Tiles Batch Table Hierarchy" or "3D Tiles Semantic Hierarchy", which ever you think is better aligned with the spec and what common 3D Tiles terminology will be.