Skip to content

GitLab

Commit 2dbd8f1f authored by Schaaf's avatar Schaaf
Browse files

Initial commit

parents
Show whitespace changes
Inline Side-by-side
Sandcastle/gallery/3D Tiles Inspector.html 0 → 100644
View file @ 2dbd8f1f
<!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 the 3D Tiles inspector as a debugging tool for different tilesets."
/>
<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="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></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>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
// Building data courtesy of NYC OpenData portal: http://www1.nyc.gov/site/doitt/initiatives/3d-building.page
var viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: Cesium.createWorldTerrain(),
});
viewer.scene.globe.depthTestAgainstTerrain = true;
viewer.extend(Cesium.viewerCesium3DTilesInspectorMixin);
var inspectorViewModel = viewer.cesium3DTilesInspector.viewModel;
var tileset = new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(75343),
});
viewer.scene.primitives.add(tileset);
tileset.readyPromise.then(function () {
viewer.zoomTo(
tileset,
new Cesium.HeadingPitchRange(
0.0,
-0.5,
tileset.boundingSphere.radius / 4.0
)
);
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/3D Tiles Interactivity.html 0 → 100644
View file @ 2dbd8f1f
<!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="Interaction examples with 3D Tiles." />
<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="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></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 .header {
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
}
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
<div class="header">Right click action:</div>
<div>
<input
type="radio"
value="annotate"
data-bind="checked: rightClickAction"
/>Annotate
</div>
<div>
<input
type="radio"
value="properties"
data-bind="checked: rightClickAction"
/>Print metadata
</div>
<div>
<input
type="radio"
value="zoom"
data-bind="checked: rightClickAction"
/>Zoom to feature
</div>
<div class="header">Middle click action:</div>
<div>
<input
type="radio"
value="hide"
data-bind="checked: middleClickAction"
/>Hide feature
</div>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: Cesium.createWorldTerrain(),
});
var scene = viewer.scene;
if (!scene.pickPositionSupported) {
window.alert("This browser does not support pickPosition.");
}
scene.globe.depthTestAgainstTerrain = true;
var viewModel = {
rightClickAction: "annotate",
middleClickAction: "hide",
};
Cesium.knockout.track(viewModel);
var toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);
var annotations = scene.primitives.add(new Cesium.LabelCollection());
// 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
);
scene.camera.setView({
destination: initialPosition,
orientation: initialOrientation,
endTransform: Cesium.Matrix4.IDENTITY,
});
// Load the NYC buildings tileset.
var tileset = new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(75343),
});
scene.primitives.add(tileset);
tileset.style = new Cesium.Cesium3DTileStyle({
meta: {
description: "'Building ${BIN} has height ${Height}.'",
},
});
var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
handler.setInputAction(function (movement) {
var feature = scene.pick(movement.position);
if (!Cesium.defined(feature)) {
return;
}
var action = viewModel.rightClickAction;
if (action === "annotate") {
annotate(movement, feature);
} else if (action === "properties") {
printProperties(movement, feature);
} else if (action === "zoom") {
zoom(movement, feature);
}
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
handler.setInputAction(function (movement) {
var feature = scene.pick(movement.position);
if (!Cesium.defined(feature)) {
return;
}
var action = viewModel.middleClickAction;
if (action === "hide") {
feature.show = false;
}
}, Cesium.ScreenSpaceEventType.MIDDLE_CLICK);
function annotate(movement, feature) {
if (scene.pickPositionSupported) {
var cartesian = scene.pickPosition(movement.position);
if (Cesium.defined(cartesian)) {
var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
var height = cartographic.height.toFixed(2) + " m";
annotations.add({
position: cartesian,
text: height,
showBackground: true,
font: "14px monospace",
horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
disableDepthTestDistance: Number.POSITIVE_INFINITY,
});
}
}
}
function printProperties(movement, feature) {
console.log("Properties:");
var propertyNames = feature.getPropertyNames();
var length = propertyNames.length;
for (var i = 0; i < length; ++i) {
var propertyName = propertyNames[i];
console.log(
" " + propertyName + ": " + feature.getProperty(propertyName)
);
}
// Evaluate feature description
console.log(
"Description : " + tileset.style.meta.description.evaluate(feature)
);
}
function zoom(movement, feature) {
var longitude = Cesium.Math.toRadians(
feature.getProperty("Longitude")
);
var latitude = Cesium.Math.toRadians(feature.getProperty("Latitude"));
var height = feature.getProperty("Height");
var positionCartographic = new Cesium.Cartographic(
longitude,
latitude,
height * 0.5
);
var position = scene.globe.ellipsoid.cartographicToCartesian(
positionCartographic
);
var camera = scene.camera;
var heading = camera.heading;
var pitch = camera.pitch;
var offset = offsetFromHeadingPitchRange(
heading,
pitch,
height * 2.0
);
var transform = Cesium.Transforms.eastNorthUpToFixedFrame(position);
Cesium.Matrix4.multiplyByPoint(transform, offset, position);
camera.flyTo({
destination: position,
orientation: {
heading: heading,
pitch: pitch,
},
easingFunction: Cesium.EasingFunction.QUADRATIC_OUT,
});
}
function offsetFromHeadingPitchRange(heading, pitch, range) {
pitch = Cesium.Math.clamp(
pitch,
-Cesium.Math.PI_OVER_TWO,
Cesium.Math.PI_OVER_TWO
);
heading = Cesium.Math.zeroToTwoPi(heading) - Cesium.Math.PI_OVER_TWO;
var pitchQuat = Cesium.Quaternion.fromAxisAngle(
Cesium.Cartesian3.UNIT_Y,
-pitch
);
var headingQuat = Cesium.Quaternion.fromAxisAngle(
Cesium.Cartesian3.UNIT_Z,
-heading
);
var rotQuat = Cesium.Quaternion.multiply(
headingQuat,
pitchQuat,
headingQuat
);
var rotMatrix = Cesium.Matrix3.fromQuaternion(rotQuat);
var offset = Cesium.Cartesian3.clone(Cesium.Cartesian3.UNIT_X);
Cesium.Matrix3.multiplyByVector(rotMatrix, offset, offset);
Cesium.Cartesian3.negate(offset, offset);
Cesium.Cartesian3.multiplyByScalar(offset, range, offset);
return offset;
}
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/3D Tiles Interior.html 0 → 100644
View file @ 2dbd8f1f
<!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 interior 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="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></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>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
// San Miguel model created by Guillermo M. Leal Llaguno. Cleaned up and hosted by Morgan McGuire: http://graphics.cs.williams.edu/data/meshes.xml
var viewer = new Cesium.Viewer("cesiumContainer");
var tileset = new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(19365),
});
viewer.scene.primitives.add(tileset);
var initialPosition = new Cesium.Cartesian3(
-1111583.3721328347,
-5855888.151574568,
2262561.444696748
);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(
100.0,
-15.0,
0.0
);
viewer.scene.camera.setView({
destination: initialPosition,
orientation: initialOrientation,
endTransform: Cesium.Matrix4.IDENTITY,
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/3D Tiles Photogrammetry Classification.html 0 → 100644
View file @ 2dbd8f1f
<!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="Sample photogrammetry and classification datasets both 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="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></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>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
// An example of using a b3dm tilset to classify another b3dm tileset.
var viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: Cesium.createWorldTerrain(),
});
// A normal b3dm tileset of photogrammetry
var tileset = new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(40866),
});
viewer.scene.primitives.add(tileset);
viewer.zoomTo(tileset);
var classifcationTilesetUrl =
"../../SampleData/Cesium3DTiles/Classification/Photogrammetry/tileset.json";
// A b3dm tileset used to classify the photogrammetry tileset
var classificationTileset = new Cesium.Cesium3DTileset({
url: classifcationTilesetUrl,
classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
});
classificationTileset.style = new Cesium.Cesium3DTileStyle({
color: "rgba(255, 0, 0, 0.5)",
});
viewer.scene.primitives.add(classificationTileset);
// The same b3dm tileset used for classification, but rendered normally for comparison.
var nonClassificationTileset = new Cesium.Cesium3DTileset({
url: classifcationTilesetUrl,
show: false,
});
nonClassificationTileset.style = new Cesium.Cesium3DTileStyle({
color: "rgba(255, 0, 0, 0.5)",
});
viewer.scene.primitives.add(nonClassificationTileset);
Sandcastle.addToggleButton("Show classification", true, function (
checked
) {
classificationTileset.show = checked;
nonClassificationTileset.show = !checked;
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/3D Tiles Photogrammetry.html 0 → 100644
View file @ 2dbd8f1f
<!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 photogrammetry 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="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></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>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: Cesium.createWorldTerrain(),
});
var tileset = new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(40866),
});
viewer.scene.primitives.add(tileset);
viewer.zoomTo(tileset);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/3D Tiles Point Cloud Classification.html 0 → 100644
View file @ 2dbd8f1f
<!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 Vector dataset on terrain 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="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></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>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
// An example showing a point cloud tileset classified by a Geometry tileset.
var viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: Cesium.createWorldTerrain(),
});
//Point Cloud by Prof. Peter Allen, Columbia University Robotics Lab. Scanning by Alejandro Troccoli and Matei Ciocarlie.
var tileset = new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(16421),
});
viewer.scene.primitives.add(tileset);
// Geometry Tiles are experimental and the format is subject to change in the future.
// For more details, see:
// https://github.com/CesiumGS/3d-tiles/tree/3d-tiles-next/TileFormats/Geometry
var classificationTileset = new Cesium.Cesium3DTileset({
url:
"../../SampleData/Cesium3DTiles/Classification/PointCloud/tileset.json",
classificationType: Cesium.ClassificationType.CESIUM_3D_TILE,
});
viewer.scene.primitives.add(classificationTileset);
classificationTileset.style = new Cesium.Cesium3DTileStyle({
color: {
conditions: [
["${id} === 'roof1'", "color('#004FFF', 0.5)"],
["${id} === 'towerBottom1'", "color('#33BB66', 0.5)"],
["${id} === 'towerTop1'", "color('#0099AA', 0.5)"],
["${id} === 'roof2'", "color('#004FFF', 0.5)"],
["${id} === 'tower3'", "color('#FF8833', 0.5)"],
["${id} === 'tower4'", "color('#FFAA22', 0.5)"],
["true", "color('#FFFF00', 0.5)"],
],
},
});
viewer.scene.camera.setView({
destination: new Cesium.Cartesian3(
4401744.644145314,
225051.41078911052,
4595420.374784433
),
orientation: new Cesium.HeadingPitchRoll(
5.646733805039757,
-0.276607153839886,
6.281110875400085
),
});
// Information about the currently highlighted feature
var highlighted = {
feature: undefined,
originalColor: new Cesium.Color(),
};
// 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)) {
return;
}
// Highlight the feature
highlighted.feature = pickedFeature;
Cesium.Color.clone(pickedFeature.color, highlighted.originalColor);
pickedFeature.color = Cesium.Color.YELLOW.withAlpha(0.5);
},
Cesium.ScreenSpaceEventType.MOUSE_MOVE);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/3D Tiles Point Cloud Shading.html 0 → 100644
View file @ 2dbd8f1f
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<meta
name="description"
content="Point Cloud Attenuation and Eye Dome Lighting example."
/>
<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="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></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>
<table>
<tbody>
<tr>
<td>Maximum Screen Space Error</td>
<td>
<input
type="range"
min="0.0"
max="64.0"
step="0.1"
data-bind="value: maximumScreenSpaceError, valueUpdate: 'input'"
/>
<input
type="text"
size="5"
data-bind="value: maximumScreenSpaceError"
/>
</td>
</tr>
<tr>
<td class="header">Attenuation</td>
</tr>
<tr>
<td>Geometric Error Scale</td>
<td>
<input
type="range"
min="0.0"
max="2.0"
step="0.1"
data-bind="value: geometricErrorScale, valueUpdate: 'input'"
/>
<input
type="text"
size="5"
data-bind="value: geometricErrorScale"
/>
</td>
</tr>
<tr>
<td>Maximum Attenuation</td>
<td>
<input
type="range"
min="0.0"
max="32.0"
step="1.0"
data-bind="value: maximumAttenuation, valueUpdate: 'input'"
/>
<input
type="text"
size="5"
data-bind="value: maximumAttenuation"
/>
</td>
</tr>
<tr>
<td>Base Resolution</td>
<td>
<input
type="range"
min="0.0"
max="10.0"
step="0.01"
data-bind="value: baseResolution, valueUpdate: 'input'"
/>
<input type="text" size="5" data-bind="value: baseResolution" />
</td>
</tr>
<tr>
<td class="header">Eye Dome Lighting</td>
</tr>
<tr>
<td>Eye Dome Lighting Strength</td>
<td>
<input
type="range"
min="0.0"
max="10.0"
step="0.1"
data-bind="value: eyeDomeLightingStrength, valueUpdate: 'input'"
/>
<input
type="text"
size="5"
data-bind="value: eyeDomeLightingStrength"
/>
</td>
</tr>
<tr>
<td>Eye Dome Lighting Radius</td>
<td>
<input
type="range"
min="0.0"
max="10.0"
step="0.1"
data-bind="value: eyeDomeLightingRadius, valueUpdate: 'input'"
/>
<input
type="text"
size="5"
data-bind="value: eyeDomeLightingRadius"
/>
</td>
</tr>
</tbody>
</table>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: Cesium.createWorldTerrain(),
});
var scene = viewer.scene;
var viewModelTileset;
if (!Cesium.PointCloudShading.isSupported(scene)) {
window.alert("This browser does not support point cloud shading");
}
function reset() {
viewer.scene.primitives.remove(viewModelTileset);
viewModelTileset = undefined;
}
// The viewModel tracks the state of our mini application.
var pointClouds = ["St. Helens", "Church"];
var viewModel = {
exampleTypes: pointClouds,
currentExampleType: pointClouds[0],
maximumScreenSpaceError: 16.0,
geometricErrorScale: 1.0,
maximumAttenuation: 0, // Equivalent to undefined
baseResolution: 0, // Equivalent to undefined
eyeDomeLightingStrength: 1.0,
eyeDomeLightingRadius: 1.0,
};
function tilesetToViewModel(tileset) {
viewModelTileset = tileset;
var pointCloudShading = tileset.pointCloudShading;
viewModel.maximumScreenSpaceError = tileset.maximumScreenSpaceError;
viewModel.geometricErrorScale = pointCloudShading.geometricErrorScale;
viewModel.maximumAttenuation = pointCloudShading.maximumAttenuation
? pointCloudShading.maximumAttenuation
: 0;
viewModel.baseResolution = pointCloudShading.baseResolution
? pointCloudShading.baseResolution
: 0;
viewModel.eyeDomeLightingStrength =
pointCloudShading.eyeDomeLightingStrength;
viewModel.eyeDomeLightingRadius =
pointCloudShading.eyeDomeLightingRadius;
}
function loadStHelens() {
// Set the initial camera view to look at Mt. St. Helens
var initialPosition = Cesium.Cartesian3.fromRadians(
-2.1344873183780484,
0.8071380277370774,
5743.394497982162
);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(
112.99596671210358,
-21.34390550872461,
0.0716951918898415
);
viewer.scene.camera.setView({
destination: initialPosition,
orientation: initialOrientation,
endTransform: Cesium.Matrix4.IDENTITY,
});
// Mt. St. Helens 3D Tileset generated from LAS provided by https://www.liblas.org/samples/
// This tileset uses replacement refinement and has geometric error approximately equal to
// the average interpoint distance in each tile.
var tileset = new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(5713),
});
viewer.scene.primitives.add(tileset);
tileset.maximumScreenSpaceError = 16.0;
tileset.pointCloudShading.maximumAttenuation = undefined; // Will be based on maximumScreenSpaceError instead
tileset.pointCloudShading.baseResolution = undefined;
tileset.pointCloudShading.geometricErrorScale = 1.0;
tileset.pointCloudShading.attenuation = true;
tileset.pointCloudShading.eyeDomeLighting = true;
tilesetToViewModel(tileset);
}
function loadChurch() {
// Point Cloud by Prof. Peter Allen, Columbia University Robotics Lab. Scanning by Alejandro Troccoli and Matei Ciocarlie.
// This tileset uses additive refinement and has geometric error based on the bounding box size for each tile.
var tileset = new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(16421),
});
viewer.scene.primitives.add(tileset);
tileset.maximumScreenSpaceError = 16.0;
tileset.pointCloudShading.maximumAttenuation = 4.0; // Don't allow points larger than 4 pixels.
tileset.pointCloudShading.baseResolution = 0.05; // Assume an original capture resolution of 5 centimeters between neighboring points.
tileset.pointCloudShading.geometricErrorScale = 0.5; // Applies to both geometric error and the base resolution.
tileset.pointCloudShading.attenuation = true;
tileset.pointCloudShading.eyeDomeLighting = true;
viewer.scene.camera.setView({
destination: new Cesium.Cartesian3(
4401744.644145314,
225051.41078911052,
4595420.374784433
),
orientation: new Cesium.HeadingPitchRoll(
5.646733805039757,
-0.276607153839886,
6.281110875400085
),
});
tilesetToViewModel(tileset);
}
function checkZero(newValue) {
var newValueFloat = parseFloat(newValue);
return newValueFloat === 0.0 ? undefined : newValueFloat;
}
loadStHelens();
// Convert the viewModel members into knockout observables.
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);
Cesium.knockout
.getObservable(viewModel, "currentExampleType")
.subscribe(function (newValue) {
reset();
if (newValue === pointClouds[0]) {
loadStHelens();
} else if (newValue === pointClouds[1]) {
loadChurch();
}
});
Cesium.knockout
.getObservable(viewModel, "maximumScreenSpaceError")
.subscribe(function (newValue) {
if (Cesium.defined(viewModelTileset)) {
viewModelTileset.maximumScreenSpaceError = parseFloat(newValue);
}
});
Cesium.knockout
.getObservable(viewModel, "geometricErrorScale")
.subscribe(function (newValue) {
if (Cesium.defined(viewModelTileset)) {
viewModelTileset.pointCloudShading.geometricErrorScale = parseFloat(
newValue
);
}
});
Cesium.knockout
.getObservable(viewModel, "maximumAttenuation")
.subscribe(function (newValue) {
if (Cesium.defined(viewModelTileset)) {
viewModelTileset.pointCloudShading.maximumAttenuation = checkZero(
newValue
);
}
});
Cesium.knockout
.getObservable(viewModel, "baseResolution")
.subscribe(function (newValue) {
if (Cesium.defined(viewModelTileset)) {
viewModelTileset.pointCloudShading.baseResolution = checkZero(
newValue
);
}
});
Cesium.knockout
.getObservable(viewModel, "eyeDomeLightingStrength")
.subscribe(function (newValue) {
if (Cesium.defined(viewModelTileset)) {
viewModelTileset.pointCloudShading.eyeDomeLightingStrength = parseFloat(
newValue
);
}
});
Cesium.knockout
.getObservable(viewModel, "eyeDomeLightingRadius")
.subscribe(function (newValue) {
if (Cesium.defined(viewModelTileset)) {
viewModelTileset.pointCloudShading.eyeDomeLightingRadius = parseFloat(
newValue
);
}
});
Sandcastle.addToggleButton("Enable Attenuation", true, function (
checked
) {
if (Cesium.defined(viewModelTileset)) {
viewModelTileset.pointCloudShading.attenuation = checked;
}
});
Sandcastle.addToggleButton("Enable Eye Dome Lighting", true, function (
checked
) {
if (Cesium.defined(viewModelTileset)) {
viewModelTileset.pointCloudShading.eyeDomeLighting = checked;
}
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/3D Tiles Point Cloud Styling.html 0 → 100644
View file @ 2dbd8f1f
<!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="Example styles for a point cloud 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="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></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");
viewer.clock.currentTime = new Cesium.JulianDate(2457522.154792);
var tileset = new Cesium.Cesium3DTileset({
url:
"../../SampleData/Cesium3DTiles/PointCloud/PointCloudWithPerPointProperties/tileset.json",
});
viewer.scene.primitives.add(tileset);
viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.0, -1.0, 50.0));
var styles = [];
function addStyle(name, style) {
style.pointSize = Cesium.defaultValue(style.pointSize, 5.0);
styles.push({
name: name,
style: style,
});
}
addStyle("No Style", {});
addStyle("Red", {
color: "color('#ff0000')",
});
addStyle("Color Gradient", {
color: "color() * ${temperature}",
});
addStyle("Step Red/Blue", {
color: "${temperature} > 0.5 ? color('red') : color('blue')",
});
addStyle("Interpolate Red/Blue", {
color:
"color('red') * ${temperature} + color('blue') * (1.0 - ${temperature})",
});
addStyle("Color Ramp", {
color: {
conditions: [
["${temperature} < 0.1", "color('#000099')"],
["${temperature} < 0.2", "color('#00cc99', 1.0)"],
["${temperature} < 0.3", "color('#66ff33', 0.5)"],
["${temperature} < 0.4", "rgba(255, 255, 0, 0.1)"],
["${temperature} < 0.5", "rgb(255, 128, 0)"],
["${temperature} < 0.6", "color('red')"],
["${temperature} < 0.7", "color('rgb(255, 102, 102)')"],
["${temperature} < 0.8", "hsl(0.875, 1.0, 0.6)"],
["${temperature} < 0.9", "hsla(0.83, 1.0, 0.5, 0.1)"],
["true", "color('#FFFFFF', 1.0)"],
],
},
});
addStyle("Transparency", {
color: "rgba(0, 255, 0, ${temperature})",
});
addStyle("Hide Low Temperature", {
color: "rgb(${temperature}*255, 0, 0)",
show: "${temperature} > 0.3",
});
addStyle("Show Subsections", {
show: "${id} === 1 || ${id} > 250 && ${id} < 300",
});
addStyle("Mod", {
show: "${id} % 2 === 0",
});
addStyle("Abs", {
color: "color() * abs(${temperature} - 0.5)",
});
addStyle("Trigonometric Functions", {
color:
"color() * radians(cos(${temperature})) + color() * sin(${temperature}) + color() * tan(${temperature})",
});
addStyle("Arc Trigonometric Functions", {
color:
"color() * acos(degrees(${temperature})) + color() * asin(${temperature}) + color() * atan(${temperature}) + color() * atan2(${POSITION}[0],${temperature})",
});
addStyle("Sqrt", {
color: "color() * sqrt(${temperature})",
});
addStyle("Sign", {
color:
"rgb(sign(${POSITION}[0]) * 255, sign(${POSITION}[1]) * 255, sign(${POSITION}[2]) * 255)",
});
addStyle("Rounding Functions", {
color:
"rgb(floor(${POSITION}[0]) * 255, ceil(${POSITION}[1]) * 255, round(${POSITION}[2]) * 255)",
});
addStyle("Exp and Log Functions", {
color:
"rgb(log(${POSITION}[0]) * 255, log2(${POSITION}[1]) * 255 + exp2(${POSITION}[1]) * 255, exp(${POSITION}[2]) * 255)",
});
addStyle("Fractional Part", {
color:
"rgb(fract(${POSITION}[0]) * 255, fract(${POSITION}[1]) * 255, fract(${POSITION}[2]) * 255)",
});
addStyle("Pow", {
color: "color() * pow(${temperature}, 3)",
});
addStyle("Min and Max", {
color:
"rgb(min(${POSITION}.x, 0.75) * 255, max(${POSITION}.z, 0.25) * 255, 255)",
});
addStyle("Clamp and Mix", {
color: "color() * clamp(${temperature}, 0.1, 0.2)",
});
addStyle("Secondary Color", {
color: {
conditions: [
["${id} < 250", "vec4(${secondaryColor}, 1.0)"],
[
"${id} < 500",
"vec4(${secondaryColor} * ${secondaryColor}, 1.0)",
],
["${id} < 750", "vec4(${secondaryColor} / 5.0, 1.0)"],
[
"${id} < 1000",
"rgb(0, 0, Number(${secondaryColor}.x < 0.5) * 255)",
],
],
},
});
addStyle("Use point colors", {
color: "${COLOR} * ${temperature} + rgb(128,128,128)",
});
addStyle("Use point positions", {
show:
"${POSITION}[0] > 0.5 || ${POSITION}[1] > 0.5 || ${POSITION}[2] > 0.5",
});
// POSITION contains 0 as its last component, so add 1.0 to make the point cloud opaque
addStyle("Color based on position", {
color: "vec4(${POSITION}, 1.0)",
});
addStyle("Style point size", {
color: "color('red')",
pointSize: "${temperature} * 10",
});
addStyle("Multiple defines", {
defines: {
length: "length(${POSITION})",
time: "${tiles3d_tileset_time} * 3.0",
},
color: {
conditions: [
["${length} < 0.5", "${length} * color('red')"],
[
"${length} < 1.0",
"vec4(vec3(${temperature} * fract(${time})), 1.0)",
],
["true", "${COLOR}"],
],
},
pointSize: "5.0 - ${length} * 2.0",
show: "${length} < 2.0",
});
function setStyle(style) {
return function () {
tileset.style = new Cesium.Cesium3DTileStyle(style);
};
}
var styleOptions = [];
for (var i = 0; i < styles.length; ++i) {
var style = styles[i];
styleOptions.push({
text: style.name,
onselect: setStyle(style.style),
});
}
Sandcastle.addToolbarMenu(styleOptions);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/3D Tiles Point Cloud.html 0 → 100644
View file @ 2dbd8f1f
<!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 point cloud 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="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></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>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
//Point Cloud by Prof. Peter Allen, Columbia University Robotics Lab. Scanning by Alejandro Troccoli and Matei Ciocarlie.
var viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: Cesium.createWorldTerrain(),
});
var tileset = new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(16421),
});
viewer.scene.primitives.add(tileset);
viewer.scene.camera.setView({
destination: new Cesium.Cartesian3(
4401744.644145314,
225051.41078911052,
4595420.374784433
),
orientation: new Cesium.HeadingPitchRoll(
5.646733805039757,
-0.276607153839886,
6.281110875400085
),
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Sandcastle/gallery/3D Tiles Terrain Classification.html 0 → 100644
View file @ 2dbd8f1f
<!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 Vector dataset on terrain 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="../../../Build/CesiumUnminified/Cesium.js"
nomodule
></script>
<script type="module" src="../load-cesium-es6.js"></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>
<div id="toolbar"></div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer", {
terrainProvider: Cesium.createWorldTerrain(),
});
var geocoder = viewer.geocoder.viewModel;
geocoder.searchText = "Vienna";
geocoder.flightDuration = 0.0;
geocoder.search();
// Vector 3D Tiles are experimental and the format is subject to change in the future.
// For more details, see:
// https://github.com/CesiumGS/3d-tiles/tree/3d-tiles-next/TileFormats/VectorData
var tileset = new Cesium.Cesium3DTileset({
url: Cesium.IonResource.fromAssetId(5737),
});
viewer.scene.primitives.add(tileset);
tileset.style = new Cesium.Cesium3DTileStyle({
color: "rgba(255, 255, 255, 0.5)",
});
// Information about the currently highlighted feature
var highlighted = {
feature: undefined,
originalColor: new Cesium.Color(),
};
// 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)) {
return;
}
// Highlight the feature
highlighted.feature = pickedFeature;
Cesium.Color.clone(pickedFeature.color, highlighted.originalColor);
pickedFeature.color = Cesium.Color.YELLOW;
},
Cesium.ScreenSpaceEventType.MOUSE_MOVE);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal