Clipping Planes- Terrain & optimizations, and/or option, plane primitives, edge highlighting #5996
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,273 @@ | ||
| <!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="User-defined clipping planes applied to a batched 3D Tileset, point cloud, and model."> | ||
| <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); | ||
| #toolbar { | ||
| background: rgba(42, 42, 42, 0.8); | ||
| padding: 4px; | ||
| border-radius: 4px; | ||
| } | ||
| #toolbar input { | ||
| vertical-align: middle; | ||
| padding-top: 2px; | ||
| padding-bottom: 2px; | ||
| } | ||
| #toolbar .header { | ||
| font-weight: bold; | ||
| } | ||
| </style> | ||
| <div id="cesiumContainer" class="fullSize"></div> | ||
| <div id="loadingOverlay"><h1>Loading...</h1></div> | ||
| <div id="toolbar"> | ||
| <select data-bind="options: exampleTypes, value: currentExampleType"></select> | ||
| <input type="checkbox" value="false" data-bind="checked: debugBoundingVolumesEnabled, valueUpdate: 'input'"> Show bounding volume | ||
| <input type="checkbox" value="true" data-bind="checked: edgeStylingEnabled, valueUpdate: 'input'"> Enable edge styling | ||
| </div> | ||
|
|
||
| <script id="cesium_sandcastle_script"> | ||
| function startup(Cesium) { | ||
| 'use strict'; | ||
| //Sandcastle_Begin | ||
|
|
||
| // Add a clipping plane, a plane geometry to show the representation of the | ||
| // plane, and control the magnitude of the plane distance with the mouse. | ||
|
|
||
| var viewer = new Cesium.Viewer('cesiumContainer', { | ||
| infoBox: false, | ||
| selectionIndicator: false | ||
| }); | ||
| var scene = viewer.scene; | ||
|
|
||
| var clipObjects = ['BIM', 'Point Cloud', 'Model']; | ||
| var viewModel = { | ||
| debugBoundingVolumesEnabled : false, | ||
| edgeStylingEnabled : true, | ||
| exampleTypes : clipObjects, | ||
| currentExampleType : clipObjects[0] | ||
| }; | ||
|
There was a problem hiding this comment. Maybe its also worth adding a checkbox for toggling the edge coloring. |
||
|
|
||
| var targetY = 0.0; | ||
| var planeEntities = []; | ||
| var selectedPlane; | ||
|
|
||
| // Select plane when mouse down | ||
| var downHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); | ||
| downHandler.setInputAction(function(movement) { | ||
| var pickedObject = scene.pick(movement.position); | ||
| if (Cesium.defined(pickedObject) && | ||
| Cesium.defined(pickedObject.id) && | ||
| Cesium.defined(pickedObject.id.plane)) { | ||
| selectedPlane = pickedObject.id.plane; | ||
| selectedPlane.material = Cesium.Color.WHITE.withAlpha(0.05); | ||
| selectedPlane.outlineColor = Cesium.Color.WHITE; | ||
| scene.screenSpaceCameraController.enableInputs = false; | ||
| } | ||
| }, Cesium.ScreenSpaceEventType.LEFT_DOWN); | ||
|
|
||
| // Release plane on mouse up | ||
| var upHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); | ||
| upHandler.setInputAction(function() { | ||
| if (Cesium.defined(selectedPlane)) { | ||
| selectedPlane.material = Cesium.Color.WHITE.withAlpha(0.1); | ||
| selectedPlane.outlineColor = Cesium.Color.WHITE; | ||
| selectedPlane = undefined; | ||
| } | ||
|
|
||
| scene.screenSpaceCameraController.enableInputs = true; | ||
| }, Cesium.ScreenSpaceEventType.LEFT_UP); | ||
|
|
||
| // Update plane on mouse move | ||
| var moveHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); | ||
| moveHandler.setInputAction(function(movement) { | ||
| if (Cesium.defined(selectedPlane)) { | ||
| var deltaY = movement.endPosition.y - movement.startPosition.y; | ||
| targetY += deltaY; | ||
| } | ||
| }, Cesium.ScreenSpaceEventType.MOUSE_MOVE); | ||
|
|
||
| var scratchPlane = new Cesium.Plane(Cesium.Cartesian3.UNIT_X, 0.0); | ||
| function createPlaneUpdateFunction(plane, transform) { | ||
| return function () { | ||
| plane.distance = Cesium.Math.lerp(plane.distance, targetY, 0.1); | ||
|
There was a problem hiding this comment. I don't think There was a problem hiding this comment. I'll remove it. It is there to make the plane movement smooth since reflecting the mouse movement directly can be shaky. |
||
|
|
||
| var transformedPlane = Cesium.Plane.transform(plane, transform, scratchPlane); | ||
| transformedPlane.distance = -transformedPlane.distance; | ||
| return transformedPlane; | ||
| }; | ||
| } | ||
|
|
||
| var tileset; | ||
| function loadTileset(url) { | ||
| var clippingPlanes = [ | ||
| new Cesium.Plane(new Cesium.Cartesian3(0.0, 0.0, -1.0), -100.0) | ||
| ]; | ||
|
|
||
| tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ | ||
| url : url, | ||
| clippingPlanes : new Cesium.ClippingPlanesCollection({ | ||
| planes : clippingPlanes, | ||
| edgeWidth : viewModel.edgeStylingEnabled ? 1.0 : 0.0 | ||
| }) | ||
| })); | ||
|
|
||
| tileset.readyPromise.then(function() { | ||
| var boundingSphere = tileset.boundingSphere; | ||
| var radius = boundingSphere.radius; | ||
|
|
||
| viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0.5, -0.2, radius * 4.0)); | ||
| viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY); | ||
|
|
||
| for (var i = 0; i < clippingPlanes.length; ++i) { | ||
| var plane = clippingPlanes[i]; | ||
| var planeEntity = viewer.entities.add({ | ||
| position : boundingSphere.center, | ||
| plane : { | ||
| dimensions : new Cesium.Cartesian2(radius * 2.5, radius * 2.5), | ||
| material : Cesium.Color.WHITE.withAlpha(0.1), | ||
| plane : new Cesium.CallbackProperty(createPlaneUpdateFunction(plane, tileset.modelMatrix), false), | ||
| outline : true, | ||
| outlineColor : Cesium.Color.WHITE | ||
| } | ||
| }); | ||
|
|
||
| planeEntities.push(planeEntity); | ||
| } | ||
| }).otherwise(function(error) { | ||
| throw(error); | ||
| }); | ||
|
|
||
| tileset.debugShowBoundingVolume = viewModel.debugBoundingVolumesEnabled; | ||
| } | ||
|
|
||
| var modelEntityClippingPlanes; | ||
| function loadModel(url) { | ||
| var clippingPlanes = [ | ||
| new Cesium.Plane(new Cesium.Cartesian3(0.0, 0.0, -1.0), -100.0) | ||
| ]; | ||
|
|
||
| modelEntityClippingPlanes = new Cesium.ClippingPlanesCollection({ | ||
| planes : clippingPlanes, | ||
| edgeWidth : viewModel.edgeStylingEnabled ? 1.0 : 0.0 | ||
| }); | ||
|
|
||
| function updateClippingPlanes() { | ||
| return modelEntityClippingPlanes; | ||
| } | ||
|
|
||
| var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 100.0); | ||
| var heading = Cesium.Math.toRadians(135.0); | ||
| var pitch = 0.0; | ||
| var roll = 0.0; | ||
| var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll); | ||
| var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr); | ||
| var entity = viewer.entities.add({ | ||
| name : url, | ||
| position : position, | ||
| orientation : orientation, | ||
| model : { | ||
| uri : url, | ||
| scale : 8, | ||
| minimumPixelSize : 100.0, | ||
| clippingPlanes : new Cesium.CallbackProperty(updateClippingPlanes, false) | ||
| } | ||
| }); | ||
|
|
||
| viewer.trackedEntity = entity; | ||
|
|
||
| for (var i = 0; i < clippingPlanes.length; ++i) { | ||
| var plane = clippingPlanes[i]; | ||
| var planeEntity = viewer.entities.add({ | ||
| position : position, | ||
| plane : { | ||
| dimensions : new Cesium.Cartesian2(300.0, 300.0), | ||
| material : Cesium.Color.WHITE.withAlpha(0.1), | ||
| plane : new Cesium.CallbackProperty(createPlaneUpdateFunction(plane, Cesium.Matrix4.IDENTITY), false), | ||
| outline : true, | ||
| outlineColor : Cesium.Color.WHITE | ||
| } | ||
| }); | ||
|
|
||
| planeEntities.push(planeEntity); | ||
| } | ||
| } | ||
|
|
||
| // Power Plant design model provided by Bentley Systems | ||
| var bimUrl = 'https://beta.cesium.com/api/assets/1459?access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzNjUyM2I5Yy01YmRhLTQ0MjktOGI0Zi02MDdmYzBjMmY0MjYiLCJpZCI6NDQsImFzc2V0cyI6WzE0NTldLCJpYXQiOjE0OTkyNjQ3ODF9.SW_rwY-ic0TwQBeiweXNqFyywoxnnUBtcVjeCmDGef4'; | ||
| var pointCloudUrl = 'https://beta.cesium.com/api/assets/1460?access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyMzk2YzJiOS1jZGFmLTRlZmYtYmQ4MS00NTA3NjEwMzViZTkiLCJpZCI6NDQsImFzc2V0cyI6WzE0NjBdLCJpYXQiOjE0OTkyNjQ3NTV9.oWjvN52CRQ-dk3xtvD4e8ZnOHZhoWSpJLlw115mbQJM'; | ||
| var modelUrl = '../../SampleData/models/CesiumAir/Cesium_Air.glb'; | ||
|
|
||
| loadTileset(bimUrl); | ||
|
|
||
| // Track and create the bindings for the view model | ||
| var toolbar = document.getElementById('toolbar'); | ||
| Cesium.knockout.track(viewModel); | ||
| Cesium.knockout.applyBindings(viewModel, toolbar); | ||
|
|
||
| Cesium.knockout.getObservable(viewModel, 'currentExampleType').subscribe(function(newValue) { | ||
| reset(); | ||
|
|
||
| if (newValue === clipObjects[0]) { | ||
| loadTileset(bimUrl); | ||
| } else if (newValue === clipObjects[1]) { | ||
| loadTileset(pointCloudUrl); | ||
| tileset.readyPromise.then(function () { | ||
| tileset.clippingPlanes.modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(tileset.boundingSphere.center); | ||
| }); | ||
| } else { | ||
| loadModel(modelUrl); | ||
| } | ||
| }); | ||
|
|
||
| Cesium.knockout.getObservable(viewModel, 'debugBoundingVolumesEnabled').subscribe(function(value) { | ||
| if (Cesium.defined(tileset)) { | ||
| tileset.debugShowBoundingVolume = value; | ||
| } | ||
| }); | ||
|
|
||
| Cesium.knockout.getObservable(viewModel, 'edgeStylingEnabled').subscribe(function(value) { | ||
| var edgeWidth = value ? 1.0 : 0.0; | ||
|
|
||
| if (Cesium.defined(tileset)) { | ||
| tileset.clippingPlanes.edgeWidth = edgeWidth; | ||
| } | ||
|
|
||
| if (Cesium.defined(modelEntityClippingPlanes)) { | ||
| modelEntityClippingPlanes.edgeWidth = edgeWidth; | ||
| } | ||
| }); | ||
|
|
||
| function reset() { | ||
| viewer.entities.removeAll(); | ||
| viewer.scene.primitives.removeAll(); | ||
| planeEntities = []; | ||
| targetY = 0.0; | ||
| } | ||
|
|
||
| //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.
Maybe add a short comment at the top that says in this demo the clipping plane is controlled with the mouse.