Clipping planes for models, tilesets, point clouds #5913
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,149 @@ | ||
| <!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); | ||
| #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"> | ||
| <table><tbody> | ||
| <tr> | ||
| <td>Type</td> | ||
| <td><select data-bind="options: exampleTypes, value: exampleType"></select></td> | ||
| </tr> | ||
| <tr> | ||
| <td>+-x</td> | ||
|
There was a problem hiding this comment. This name looks confusing. Just "x" is probably fine. There was a problem hiding this comment. Yeah the sandcastle example still needs updating. Should have put that on the TODO, sorry. |
||
| <td> | ||
| <input type="range" min="-100" max="100" step="1" data-bind="value: xOffset, valueUpdate: 'input'"> | ||
|
There was a problem hiding this comment. Reset x, y, and z when a new model is selected. After playing around with the BIM tileset I switched to the airplane and couldn't see it because the values were just too big. It might even be good to limit the range of these values per-model. The sliders are too shifty for the airplane model. Or just scale up the airplane if that's easier. There was a problem hiding this comment. So setting the scale on the model causes the clipping planes to behave differently- It will not be relative to the model anymore and move around when the camera changes position. But only when the model is set to a scale other than 1. Do you know why that might be? There was a problem hiding this comment. The scale component of the There was a problem hiding this comment. Instead I inverted, muliplied by scale, and inverted back. Is that ok? |
||
| <input type="text" size="5" data-bind="value: xOffset"> | ||
| </td> | ||
| </tr> | ||
| </tbody></table> | ||
| </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 viewModel = { | ||
| exampleType : 'BIM', | ||
| exampleTypes : ['BIM', 'Model', 'Point Cloud'], | ||
| xOffset : 0.0 | ||
| }; | ||
| Cesium.knockout.track(viewModel); | ||
|
|
||
| // Bind the viewModel to the DOM elements of the UI that call for it. | ||
| var toolbar = document.getElementById('toolbar'); | ||
| Cesium.knockout.applyBindings(viewModel, toolbar); | ||
|
|
||
| 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'; | ||
|
There was a problem hiding this comment. When I switch from Model to Point Cloud the camera is placed far away. I think this has to do with the model not being destroyed and still having focus. This is related to the comment below about a common cleanup function. |
||
|
|
||
| var clippingPlanes = loadTileset(bimUrl); | ||
|
|
||
| function loadTileset (url) { | ||
| var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ | ||
| url : url | ||
| })); | ||
|
|
||
| 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); | ||
| }); | ||
|
|
||
| tileset.clippingPlanes = [ new Cesium.Plane(Cesium.Cartesian3.UNIT_X, 0) ]; | ||
|
There was a problem hiding this comment. Eventually this demo may require different tilesets having different clipping planes. There should probably an array of clipping planes per-example above rather than here in tileset creation. |
||
| return tileset.clippingPlanes; | ||
| } | ||
|
|
||
| function loadModel (url, height) { | ||
| viewer.entities.removeAll(); | ||
|
There was a problem hiding this comment. Also need to call To keep is simple, these cleanup lines can go in their own function called from within |
||
|
|
||
| var position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height); | ||
| var heading = Cesium.Math.toRadians(135); | ||
| var pitch = 0; | ||
| var roll = 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, | ||
| minimumPixelSize : 128, | ||
| maximumScale : 20000 | ||
| } | ||
| }); | ||
|
|
||
| viewer.trackedEntity = entity; | ||
|
|
||
| entity.model.clippingPlanes = [ new Cesium.Plane(Cesium.Cartesian3.UNIT_X, 0) ]; | ||
| return entity.model.clippingPlanes.getValue(); | ||
| } | ||
|
|
||
| Cesium.knockout.getObservable(viewModel, 'xOffset').subscribe( | ||
| function(newValue) { | ||
|
There was a problem hiding this comment. In other demos these two lines are on the same line:
|
||
| clippingPlanes[0].distance = parseFloat(newValue); | ||
| } | ||
| ); | ||
|
|
||
| Cesium.knockout.getObservable(viewModel, 'exampleType').subscribe( | ||
| function(newValue) { | ||
| if (newValue === 'BIM') { | ||
| clippingPlanes = loadTileset(bimUrl); | ||
| } else if (newValue === 'Point Cloud') { | ||
| clippingPlanes = loadTileset(pointCloudUrl); | ||
| } else { | ||
| clippingPlanes = loadModel('../../SampleData/models/CesiumAir/Cesium_Air.glb', 20.0); | ||
| } | ||
| } | ||
| ); | ||
|
|
||
| //Sandcastle_End | ||
| Sandcastle.finishedLoading(); | ||
| } | ||
| if (typeof Cesium !== "undefined") { | ||
| startup(Cesium); | ||
| } else if (typeof require === "function") { | ||
| require(["Cesium"], startup); | ||
| } | ||
| </script> | ||
| </body> | ||
| </html> | ||
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.
Add an image for the demo.