Skip to content

Commit 08dbd3d

Browse files
mgermeriejailln
mgermerie
authored and
jailln
committed
examples(Collada): clean and update
1 parent 00b6db5 commit 08dbd3d

File tree

2 files changed

+64
-39
lines changed

2 files changed

+64
-39
lines changed

‎examples/js/ThreeLoader.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ ThreeLoader.getThreeJsLoader = function getThreeJsLoader(format) {
4141
const deferredPromise = defer();
4242
// eslint-disable-next-line no-undef
4343
THREE = itowns.THREE;
44-
loadScriptAsync('https://cdn.rawgit.com/mrdoob/three.js/r' + itowns.THREE.REVISION + '/examples/js/loaders/' + format + 'Loader.js')
44+
loadScriptAsync('https://cdn.rawgit.com/mrdoob/three.js/r147/examples/js/loaders/' + format + 'Loader.js')
4545
.then(function createLoader() {
4646
deferredPromise.resolve(new itowns.THREE[format + 'Loader'](manager));
4747
}).catch(function error(e) {

‎examples/misc_collada.html

+63-38
Original file line numberDiff line numberDiff line change
@@ -3,73 +3,97 @@
33
<title>Itowns - collada</title>
44

55
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
68
<link rel="stylesheet" type="text/css" href="css/example.css">
79
<link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
810

9-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
1011
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
1112
</head>
1213
<body>
1314
<div id="viewerDiv"></div>
14-
<script src="js/GUI/GuiTools.js"></script>
15+
16+
<!-- Import iTowns source code -->
1517
<script src="../dist/itowns.js"></script>
16-
<script src="js/ThreeLoader.js"></script>
17-
<script src="js/GUI/LoadingScreen.js"></script>
1818
<script src="../dist/debug.js"></script>
19+
20+
<!-- Import iTowns LoadingScreen and GuiTools plugins -->
21+
<script src="js/GUI/GuiTools.js"></script>
22+
<script src="js/GUI/LoadingScreen.js"></script>
23+
24+
<!-- Import ThreeLoader plugin to get ColladaLoader from three.js -->
25+
<script src="js/ThreeLoader.js"></script>
26+
1927
<script type="text/javascript">
20-
// # Simple Globe viewer
2128

22-
// Define initial camera position
23-
// Coordinate can be found on https://www.geoportail.gouv.fr/carte
24-
// setting is "coordonnée geographiques en degres decimaux"
2529

26-
// Position near Gerbier mountain.
27-
var placement = {
30+
31+
32+
// ---------- CREATE A GlobeView FOR SUPPORTING DATA VISUALIZATION : ----------
33+
34+
// Define camera initial position
35+
const placement = {
2836
coord: new itowns.Coordinates('EPSG:4326', 4.21655, 44.84415),
2937
range: 500,
3038
heading: 180,
3139
tilt: 60,
32-
}
40+
};
3341

3442
// `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
35-
var viewerDiv = document.getElementById('viewerDiv');
43+
const viewerDiv = document.getElementById('viewerDiv');
3644

37-
// Instanciate iTowns GlobeView*
38-
var view = new itowns.GlobeView(viewerDiv, placement);
39-
40-
var menuGlobe = new GuiTools('menuDiv', view);
45+
// Create a GlobeView
46+
const view = new itowns.GlobeView(viewerDiv, placement);
4147

48+
// Setup loading screen and debug menu
4249
setupLoadingScreen(viewerDiv, view);
50+
const debugMenu = new GuiTools('menuDiv', view);
4351

44-
function addLayerCb(layer) {
45-
view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
46-
}
4752

48-
// Add one imagery layer to the scene
49-
// This layer is defined in a json file but it could be defined as a plain js
50-
// object. See Layer* for more info.
51-
itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(function _(config) {
52-
config.source = new itowns.WMTSSource(config.source);
53-
var layer = new itowns.ColorLayer(config.id, config);
54-
view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
55-
});
56-
// Add two elevation layers.
57-
// These will deform iTowns globe geometry to represent terrain elevation.
53+
54+
// ---------- DISPLAY CONTEXTUAL DATA : ----------
55+
56+
// Display ortho-images
57+
itowns.Fetcher.json('./layers/JSONLayers/Ortho.json')
58+
.then(function _(config) {
59+
config.source = new itowns.WMTSSource(config.source);
60+
view.addLayer(
61+
new itowns.ColorLayer('Ortho', config),
62+
).then(debugMenu.addLayerGUI.bind(debugMenu));
63+
});
64+
65+
// Display elevation data
5866
function addElevationLayerFromConfig(config) {
5967
config.source = new itowns.WMTSSource(config.source);
60-
var layer = new itowns.ElevationLayer(config.id, config);
61-
view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
68+
view.addLayer(
69+
new itowns.ElevationLayer(config.id, config),
70+
).then(debugMenu.addLayerGUI.bind(debugMenu));
6271
}
63-
itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);
64-
itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json').then(addElevationLayerFromConfig);
72+
itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json')
73+
.then(addElevationLayerFromConfig);
74+
itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json')
75+
.then(addElevationLayerFromConfig);
76+
77+
6578

66-
// ThreeLoader can load each format proposed in ThreeJs examples loaders : https://github.com/mrdoob/three.js/tree/dev/examples/js/loaders
67-
var promiseCollada = ThreeLoader.load('Collada', 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/models/collada/building.dae')
68-
.then(collada => {
69-
var model = collada.scene;
79+
80+
// ---------- DISPLAY COLLADA DATA : ----------
81+
82+
// ThreeLoader can load each format proposed in ThreeJs examples loaders :
83+
// https://github.com/mrdoob/three.js/tree/dev/examples/js/loaders
84+
// Note : As this previous folder has been removed in three r148,
85+
// TheeLoader will only use loaders from three r147 version. This
86+
// is a temporary solution and shall be updated.
87+
const promiseCollada = ThreeLoader.load(
88+
'Collada',
89+
'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/models/collada/building.dae',
90+
).then(collada => {
91+
const model = collada.scene;
7092

7193
// building coordinate
72-
var coord = new itowns.Coordinates('EPSG:4326', 4.2165, 44.844, 1417);
94+
const coord = new itowns.Coordinates(
95+
'EPSG:4326', 4.2165, 44.844, 1417,
96+
);
7397

7498
model.position.copy(coord.as(view.referenceCrs));
7599
// align up vector with geodesic normal
@@ -84,6 +108,7 @@
84108
view.scene.add(model);
85109
view.notifyChange();
86110
});
111+
87112
</script>
88113
</body>
89114
</html>

0 commit comments

Comments
 (0)