Skip to content

Commit 2cc3558

Browse files
ggetzggetz
authored
Merge pull request #12752 from CesiumGS/gallery-conversion
Gallery conversion for Sandcastle v2
2 parents e29f69f + b3895a6 commit 2cc3558

File tree

1,083 files changed

+45204
-10
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

1,083 files changed

+45204
-10
lines changed

‎eslint.config.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ export default [
2020
"Apps/Sandcastle/gallery/gallery-index.js",
2121
"Apps/Sandcastle2/",
2222
"packages/sandcastle/public/",
23+
"packages/sandcastle/templates/Sandcastle.d.ts",
24+
"packages/sandcastle/templates/Sandcastle.js",
2325
"packages/engine/Source/Scene/GltfPipeline/**/*",
2426
"packages/engine/Source/Shaders/**/*",
2527
"Specs/jasmine/*",
@@ -114,6 +116,13 @@ export default [
114116
"no-alert": "off",
115117
},
116118
},
119+
{
120+
files: ["packages/sandcastle/gallery/hello-world/main.js"],
121+
rules: {
122+
// ignore this rule here to avoid the excessive eslint-disable comment in our bare minimum example
123+
"no-unused-vars": "off",
124+
},
125+
},
117126
{
118127
files: ["Specs/**/*", "packages/**/Specs/**/*"],
119128
languageOptions: {

‎packages/sandcastle/gallery/3d-models-articulations-dev/index.html‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<style>
2+
@import url(../templates/bucket.css);
3+
#toolbar {
4+
background: rgba(42, 42, 42, 0.8);
5+
padding: 4px;
6+
border-radius: 4px;
7+
}
8+
#toolbar input {
9+
vertical-align: middle;
10+
padding-top: 2px;
11+
padding-bottom: 2px;
12+
}
13+
</style>
14+
<div id="cesiumContainer" class="fullSize"></div>
15+
<div id="loadingOverlay"><h1>Loading...</h1></div>
16+
<div id="toolbar">
17+
<div>
18+
Articulation:
19+
<select
20+
class="cesium-button"
21+
data-bind="options: articulations,
22+
optionsText: 'name',
23+
value: selectedArticulation"
24+
></select>
25+
</div>
26+
<table>
27+
<tbody data-bind="foreach: stages">
28+
<tr>
29+
<td data-bind="text: name"></td>
30+
<td>
31+
<input
32+
type="range"
33+
min="-3"
34+
max="3"
35+
step="0.01"
36+
data-bind="value: current,
37+
valueUpdate: 'input',
38+
attr: {
39+
min: minimum,
40+
max: maximum
41+
}"
42+
/>
43+
<input type="text" size="2" data-bind="value: currentText" />
44+
</td>
45+
</tr>
46+
</tbody>
47+
</table>
48+
</div>

‎packages/sandcastle/gallery/3d-models-articulations-dev/main.js‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import * as Cesium from "cesium";
2+
3+
// this can be changed to any glTF model
4+
const modelUrl = "https://assets.agi.com/models/launchvehicle.glb";
5+
6+
const viewModel = {
7+
articulations: [],
8+
stages: [],
9+
selectedArticulation: undefined,
10+
};
11+
12+
Cesium.knockout.track(viewModel);
13+
14+
Cesium.knockout
15+
.getObservable(viewModel, "selectedArticulation")
16+
.subscribe(function (newArticulation) {
17+
viewModel.stages = newArticulation.stages;
18+
});
19+
20+
const toolbar = document.getElementById("toolbar");
21+
Cesium.knockout.applyBindings(viewModel, toolbar);
22+
23+
const viewer = new Cesium.Viewer("cesiumContainer");
24+
const scene = viewer.scene;
25+
26+
const height = 220000.0;
27+
const origin = Cesium.Cartesian3.fromDegrees(-74.693, 28.243, height);
28+
const modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(
29+
origin,
30+
new Cesium.HeadingPitchRoll(),
31+
);
32+
33+
try {
34+
const model = scene.primitives.add(
35+
await Cesium.Model.fromGltfAsync({
36+
url: modelUrl,
37+
modelMatrix: modelMatrix,
38+
minimumPixelSize: 128,
39+
}),
40+
);
41+
42+
model.readyEvent.addEventListener(() => {
43+
const camera = viewer.camera;
44+
45+
// Zoom to model
46+
const controller = scene.screenSpaceCameraController;
47+
const r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
48+
controller.minimumZoomDistance = r * 0.2;
49+
50+
const center = Cesium.Matrix4.multiplyByPoint(
51+
model.modelMatrix,
52+
Cesium.Cartesian3.ZERO,
53+
new Cesium.Cartesian3(),
54+
);
55+
const heading = Cesium.Math.toRadians(0.0);
56+
const pitch = Cesium.Math.toRadians(-10.0);
57+
camera.lookAt(
58+
center,
59+
new Cesium.HeadingPitchRange(heading, pitch, r * 0.8),
60+
);
61+
62+
const articulations = model.sceneGraph._runtimeArticulations;
63+
viewModel.articulations = Object.keys(articulations).map(
64+
function (articulationName) {
65+
return {
66+
name: articulationName,
67+
stages: articulations[articulationName]._runtimeStages.map(
68+
function (stage) {
69+
const stageModel = {
70+
name: stage.name,
71+
minimum: stage.minimumValue,
72+
maximum: stage.maximumValue,
73+
current: stage.currentValue,
74+
};
75+
Cesium.knockout.track(stageModel);
76+
Cesium.knockout.defineProperty(stageModel, "currentText", {
77+
get: function () {
78+
return stageModel.current.toString();
79+
},
80+
set: function (value) {
81+
// coerce values to number
82+
stageModel.current = +value;
83+
},
84+
});
85+
Cesium.knockout
86+
.getObservable(stageModel, "current")
87+
.subscribe(function (newValue) {
88+
model.setArticulationStage(
89+
`${articulationName} ${stage.name}`,
90+
+stageModel.current,
91+
);
92+
model.applyArticulations();
93+
});
94+
return stageModel;
95+
},
96+
),
97+
};
98+
},
99+
);
100+
viewModel.selectedArticulation = viewModel.articulations[0];
101+
});
102+
} catch (error) {
103+
console.log(`Error loading model: ${error}`);
104+
}

‎packages/sandcastle/gallery/3d-models-articulations-dev/sandcastle.yaml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
legacyId: development/3D Models Articulations.html
2+
title: 3D Models Articulations - Dev
3+
description: Explore node transformations of 3D models.
4+
labels:
5+
- Development
6+
thumbnail: thumbnail.jpg
7+
development: true

‎packages/sandcastle/gallery/3d-models-articulations-dev/thumbnail.jpg‎

14.6 KB
Loading

‎packages/sandcastle/gallery/3d-models-coloring/sandcastle.yaml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,4 +3,4 @@ title: 3D Models Coloring
33
description: Change color of 3D models.
44
labels:
55
- Showcases
6-
thumbnail: ./thumbnail.jpg
6+
thumbnail: thumbnail.jpg

‎packages/sandcastle/gallery/3d-models-dev/index.html‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<style>
2+
@import url(../templates/bucket.css);
3+
#toolbar {
4+
background: rgba(42, 42, 42, 0.8);
5+
padding: 4px;
6+
border-radius: 4px;
7+
}
8+
#toolbar input {
9+
vertical-align: middle;
10+
padding-top: 2px;
11+
padding-bottom: 2px;
12+
}
13+
</style>
14+
<div id="cesiumContainer" class="fullSize"></div>
15+
<div id="loadingOverlay"><h1>Loading...</h1></div>
16+
<div id="toolbar">
17+
<table>
18+
<tbody>
19+
<tr>
20+
<td>Mode</td>
21+
<td>
22+
<select
23+
data-bind="options: colorBlendModes, value: colorBlendMode"
24+
></select>
25+
</td>
26+
</tr>
27+
<tr>
28+
<td>Color</td>
29+
<td><select data-bind="options: colors, value: color"></select></td>
30+
</tr>
31+
<tr>
32+
<td>Alpha</td>
33+
<td>
34+
<input
35+
type="range"
36+
min="0.0"
37+
max="1.0"
38+
step="0.01"
39+
data-bind="value: alpha, valueUpdate: 'input'"
40+
/>
41+
<input type="text" size="5" data-bind="value: alpha" />
42+
</td>
43+
</tr>
44+
<tr>
45+
<td data-bind="style: { color: colorBlendAmountEnabled ? '' : 'gray'}">
46+
Mix
47+
</td>
48+
<td>
49+
<input
50+
type="range"
51+
min="0.0"
52+
max="1.0"
53+
step="0.01"
54+
data-bind="value: colorBlendAmount, valueUpdate: 'input', enable: colorBlendAmountEnabled"
55+
/>
56+
<input
57+
type="text"
58+
size="5"
59+
data-bind="value: colorBlendAmount, enable: colorBlendAmountEnabled"
60+
/>
61+
</td>
62+
</tr>
63+
</tbody>
64+
</table>
65+
</div>

0 commit comments

Comments
 (0)