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

Initial commit

parents
(The MIT License)
Copyright (C) 2014-2017 by Vitaly Puzrin and Andrei Tuputcyn
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
This diff is collapsed.
<!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="Change color of 3D models." />
<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="../../../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">
<table>
<tbody>
<tr>
<td class="header">Model Color</td>
</tr>
<tr>
<td>Mode</td>
<td>
<select
data-bind="options: colorBlendModes, value: colorBlendMode"
></select>
</td>
</tr>
<tr>
<td>Color</td>
<td><select data-bind="options: colors, value: color"></select></td>
</tr>
<tr>
<td>Alpha</td>
<td>
<input
type="range"
min="0.0"
max="1.0"
step="0.01"
data-bind="value: alpha, valueUpdate: 'input'"
/>
<input type="text" size="5" data-bind="value: alpha" />
</td>
</tr>
<tr>
<td
data-bind="style: { color: colorBlendAmountEnabled ? '' : 'gray'}"
>
Mix
</td>
<td>
<input
type="range"
min="0.0"
max="1.0"
step="0.01"
data-bind="value: colorBlendAmount, valueUpdate: 'input', enable: colorBlendAmountEnabled"
/>
<input
type="text"
size="5"
data-bind="value: colorBlendAmount, enable: colorBlendAmountEnabled"
/>
</td>
</tr>
<tr>
<td class="header">Model Silhouette</td>
</tr>
<tr>
<td>Color</td>
<td>
<select
data-bind="options: silhouetteColors, value: silhouetteColor"
></select>
</td>
</tr>
<tr>
<td>Alpha</td>
<td>
<input
type="range"
min="0.0"
max="1.0"
step="0.01"
data-bind="value: silhouetteAlpha, valueUpdate: 'input'"
/>
<input type="text" size="5" data-bind="value: silhouetteAlpha" />
</td>
</tr>
<tr>
<td>Size</td>
<td>
<input
type="range"
min="0.0"
max="10.0"
step="0.01"
data-bind="value: silhouetteSize, valueUpdate: 'input'"
/>
<input type="text" size="5" data-bind="value: silhouetteSize" />
</td>
</tr>
</tbody>
</table>
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer", {
infoBox: false,
selectionIndicator: false,
shadows: true,
shouldAnimate: true,
});
var entity;
function getColorBlendMode(colorBlendMode) {
return Cesium.ColorBlendMode[colorBlendMode.toUpperCase()];
}
function getColor(colorName, alpha) {
var color = Cesium.Color[colorName.toUpperCase()];
return Cesium.Color.fromAlpha(color, parseFloat(alpha));
}
// The viewModel tracks the state of our mini application.
var viewModel = {
color: "Red",
colors: ["White", "Red", "Green", "Blue", "Yellow", "Gray"],
alpha: 1.0,
colorBlendMode: "Highlight",
colorBlendModes: ["Highlight", "Replace", "Mix"],
colorBlendAmount: 0.5,
colorBlendAmountEnabled: false,
silhouetteColor: "Red",
silhouetteColors: ["Red", "Green", "Blue", "Yellow", "Gray"],
silhouetteAlpha: 1.0,
silhouetteSize: 2.0,
};
// 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, "color")
.subscribe(function (newValue) {
entity.model.color = getColor(newValue, viewModel.alpha);
});
Cesium.knockout
.getObservable(viewModel, "alpha")
.subscribe(function (newValue) {
entity.model.color = getColor(viewModel.color, newValue);
});
Cesium.knockout
.getObservable(viewModel, "colorBlendMode")
.subscribe(function (newValue) {
var colorBlendMode = getColorBlendMode(newValue);
entity.model.colorBlendMode = colorBlendMode;
viewModel.colorBlendAmountEnabled =
colorBlendMode === Cesium.ColorBlendMode.MIX;
});
Cesium.knockout
.getObservable(viewModel, "colorBlendAmount")
.subscribe(function (newValue) {
entity.model.colorBlendAmount = parseFloat(newValue);
});
Cesium.knockout
.getObservable(viewModel, "silhouetteColor")
.subscribe(function (newValue) {
entity.model.silhouetteColor = getColor(
newValue,
viewModel.silhouetteAlpha
);
});
Cesium.knockout
.getObservable(viewModel, "silhouetteAlpha")
.subscribe(function (newValue) {
entity.model.silhouetteColor = getColor(
viewModel.silhouetteColor,
newValue
);
});
Cesium.knockout
.getObservable(viewModel, "silhouetteSize")
.subscribe(function (newValue) {
entity.model.silhouetteSize = parseFloat(newValue);
});
function createModel(url, height) {
viewer.entities.removeAll();
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
);
entity = viewer.entities.add({
name: url,
position: position,
orientation: orientation,
model: {
uri: url,
minimumPixelSize: 128,
maximumScale: 20000,
color: getColor(viewModel.color, viewModel.alpha),
colorBlendMode: getColorBlendMode(viewModel.colorBlendMode),
colorBlendAmount: parseFloat(viewModel.colorBlendAmount),
silhouetteColor: getColor(
viewModel.silhouetteColor,
viewModel.silhouetteAlpha
),
silhouetteSize: parseFloat(viewModel.silhouetteSize),
},
});
viewer.trackedEntity = entity;
}
var options = [
{
text: "Aircraft",
onselect: function () {
createModel(
"../../SampleData/models/CesiumAir/Cesium_Air.glb",
5000.0
);
},
},
{
text: "Ground Vehicle",
onselect: function () {
createModel(
"../../SampleData/models/GroundVehicle/GroundVehicle.glb",
0
);
},
},
{
text: "Hot Air Balloon",
onselect: function () {
createModel(
"../../SampleData/models/CesiumBalloon/CesiumBalloon.glb",
1000.0
);
},
},
{
text: "Milk Truck",
onselect: function () {
createModel(
"../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck.glb",
0
);
},
},
{
text: "Skinned Character",
onselect: function () {
createModel(
"../../SampleData/models/CesiumMan/Cesium_Man.glb",
0
);
},
},
];
Sandcastle.addToolbarMenu(options);
Sandcastle.addToggleButton("Shadows", viewer.shadows, function (
checked
) {
viewer.shadows = checked;
});
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
<!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="Create 3D models using glTF." />
<meta name="cesium-sandcastle-labels" content="Tutorials,Showcases" />
<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", {
infoBox: false,
selectionIndicator: false,
shadows: true,
shouldAnimate: true,
});
function createModel(url, height) {
viewer.entities.removeAll();
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;
}
var options = [
{
text: "Aircraft",
onselect: function () {
createModel(
"../../SampleData/models/CesiumAir/Cesium_Air.glb",
5000.0
);
},
},
{
text: "Ground Vehicle",
onselect: function () {
createModel(
"../../SampleData/models/GroundVehicle/GroundVehicle.glb",
0
);
},
},
{
text: "Hot Air Balloon",
onselect: function () {
createModel(
"../../SampleData/models/CesiumBalloon/CesiumBalloon.glb",
1000.0
);
},
},
{
text: "Milk Truck",
onselect: function () {
createModel(
"../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck.glb",
0
);
},
},
{
text: "Skinned Character",
onselect: function () {
createModel(
"../../SampleData/models/CesiumMan/Cesium_Man.glb",
0
);
},
},
{
text: "Draco Compressed Model",
onselect: function () {
createModel(
"../../SampleData/models/DracoCompressed/CesiumMilkTruck.gltf",
0
);
},
},
];
Sandcastle.addToolbarMenu(options);
//Sandcastle_End
Sandcastle.finishedLoading();
}
if (typeof Cesium !== "undefined") {
window.startupCalled = true;
startup(Cesium);
}
</script>
</body>
</html>
<!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="Adjust the height of a 3D Tiles 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 {
background: rgba(42, 42, 42, 0.8);
padding: 4px;
border-radius: 4px;
}
#toolbar input {
vertical-align: middle;
padding-top: 2px;
padding-bottom: 2px;
}
</style>
<div id="cesiumContainer" class="fullSize"></div>
<div id="loadingOverlay"><h1>Loading...</h1></div>
<div id="toolbar">
<div>Height</div>
<input
type="range"
min="-100.0"
max="100.0"
step="1"
data-bind="value: height, valueUpdate: 'input'"
/>
<input type="text" size="5" data-bind="value: height" />
</div>
<script id="cesium_sandcastle_script">
function startup(Cesium) {
"use strict";
//Sandcastle_Begin
var viewer = new Cesium.Viewer("cesiumContainer", {
shadows: true,
});
viewer.scene.globe.depthTestAgainstTerrain = true;
var viewModel = {
height: 0,
};
Cesium.knockout.track(viewModel);
var toolbar = document.getElementById("toolbar");
Cesium.knockout.applyBindings(viewModel, toolbar);
var tileset = new Cesium.Cesium3DTileset({
url: "../../SampleData/Cesium3DTiles/Tilesets/Tileset/tileset.json",
});
tileset.readyPromise
.then(function (tileset) {
viewer.scene.primitives.add(tileset);
viewer.zoomTo(
tileset,
new Cesium.HeadingPitchRange(
0.0,
-0.5,
tileset.boundingSphere.radius * 2.0
)
);
})
.otherwise(function (error) {
console.log(error);
});
Cesium.knockout
.getObservable(viewModel, "height")
.subscribe(function (height) {
height = Number(height);
if (isNaN(height)) {
return