-
Notifications
You must be signed in to change notification settings - Fork 3.5k
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
Clipping Planes- Terrain & optimizations, and/or option, plane primitives, edge highlighting #5996
Changes from 41 commits
d188014
8ef6754
51f28d0
d142b0f
4dfea3a
ee8b97a
33eb86a
951a33b
8981779
a0932d5
c0ec2c4
5ec1058
48190c7
443f73a
910e1c6
6d67925
086a03b
af21899
7487847
ea2d8da
227698c
e8e14f2
4a37690
93a2940
8d41a56
b4c9a8d
627b8d4
fd151a0
5b75ee5
92fc2bb
0af0db6
77457f5
47e0ec3
5680c34
21c96e9
3b069ca
82a2780
ca40033
31079f7
b83e288
2d855b8
c8cd6fa
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,279 @@ | ||
<!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', 'Instanced', 'Model',]; | ||
var viewModel = { | ||
debugBoundingVolumesEnabled : false, | ||
edgeStylingEnabled : true, | ||
exampleTypes : clipObjects, | ||
currentExampleType : clipObjects[0] | ||
}; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I don't think There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 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 instancedUrl = '../../../Specs/Data/Cesium3DTiles/Instanced/InstancedOrientation/'; | ||
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 if (newValue === clipObjects[2]) { | ||
loadTileset(instancedUrl); | ||
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> |
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.