Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit ac9cea4

Browse files
DesplandisDesplandis
committed
chore(examples): ESMify multiple 2.5D maps
- Use an importmap to import OrbitControls addon from a CDN - Refactor this example's script as an ES6 module - Bump OrbitControls to 0.154.0
1 parent b82622d commit ac9cea4

File tree

1 file changed

+56
-50
lines changed

1 file changed

+56
-50
lines changed

‎examples/view_multi_25d.html‎

Lines changed: 56 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<!DOCTYPE html>
12
<html>
23
<head>
34
<title>Itowns - 6 planes on a cube</title>
@@ -12,30 +13,29 @@
1213
<div id="viewerDiv"></div>
1314
<script src="../dist/itowns.js"></script>
1415
<script src="js/GUI/LoadingScreen.js"></script>
15-
<script type="text/javascript">
16-
window.THREE = itowns.THREE;
16+
17+
<script type="importmap">
18+
{
19+
"imports": {
20+
"three": "https://unpkg.com/[email protected]/build/three.module.js",
21+
"three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
22+
}
23+
}
1724
</script>
18-
<script src="https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js"></script>
19-
<script type="text/javascript">
25+
26+
<script type="module">
27+
// Warning: For now, three is imported twice: in the itowns bundle
28+
// and from the unpkg CDN.
29+
import * as THREE from 'three';
30+
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
31+
32+
var view;
33+
2034
// Define crs projection that we will use (taken from https://epsg.io/3946, Proj4js section)
2135
itowns.proj4.defs('EPSG:3946', '+proj=lcc +lat_1=45.25 +lat_2=46.75 +lat_0=46 +lon_0=3 +x_0=1700000 +y_0=5200000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
2236
// # Planar (EPSG:3946) viewer
2337

24-
var extent;
25-
var viewerDiv;
26-
var view;
27-
var controls;
28-
var scale;
29-
var parent;
30-
var index;
31-
var wms;
32-
var wmsUrl;
33-
var obj;
34-
var offset;
35-
var tileLayer;
36-
var config;
37-
38-
var wmsSources = [
38+
const wmsSources = [
3939
{
4040
name: 'fpc_fond_plan_communaut.fpcilot',
4141
url: 'https://download.data.grandlyon.com/wms/grandlyon',
@@ -62,60 +62,60 @@
6262
},
6363
];
6464

65-
var cubeTransformations = [
65+
const cubeTransformations = [
6666
{
67-
position: new itowns.THREE.Vector3(0, 0, 0.5),
68-
rotation: new itowns.THREE.Euler(),
67+
position: new THREE.Vector3(0, 0, 0.5),
68+
rotation: new THREE.Euler(),
6969
},
7070
{
71-
position: new itowns.THREE.Vector3(0, 0, -0.5),
72-
rotation: new itowns.THREE.Euler().set(Math.PI, 0, 0),
71+
position: new THREE.Vector3(0, 0, -0.5),
72+
rotation: new THREE.Euler().set(Math.PI, 0, 0),
7373
},
7474
{
75-
position: new itowns.THREE.Vector3(0, 0.5, 0),
76-
rotation: new itowns.THREE.Euler().set(-Math.PI * 0.5, 0, 0),
75+
position: new THREE.Vector3(0, 0.5, 0),
76+
rotation: new THREE.Euler().set(-Math.PI * 0.5, 0, 0),
7777
},
7878
{
79-
position: new itowns.THREE.Vector3(0, -0.5, 0),
80-
rotation: new itowns.THREE.Euler().set(Math.PI * 0.5, 0, 0),
79+
position: new THREE.Vector3(0, -0.5, 0),
80+
rotation: new THREE.Euler().set(Math.PI * 0.5, 0, 0),
8181
},
8282
{
83-
position: new itowns.THREE.Vector3(0.5, 0, 0),
84-
rotation: new itowns.THREE.Euler().set(0, Math.PI * 0.5, 0),
83+
position: new THREE.Vector3(0.5, 0, 0),
84+
rotation: new THREE.Euler().set(0, Math.PI * 0.5, 0),
8585
},
8686
{
87-
position: new itowns.THREE.Vector3(-0.5, 0, 0),
88-
rotation: new itowns.THREE.Euler().set(0, -Math.PI * 0.5, 0),
87+
position: new THREE.Vector3(-0.5, 0, 0),
88+
rotation: new THREE.Euler().set(0, -Math.PI * 0.5, 0),
8989
},
9090
];
9191

9292
// Define geographic extent: CRS, min/max X, min/max Y
93-
extent = new itowns.Extent(
93+
const extent = new itowns.Extent(
9494
'EPSG:3946',
9595
1837900, 1837900 + 8000,
9696
5170100, 5170100 + 8000);
9797

9898
// `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
99-
viewerDiv = document.getElementById('viewerDiv');
99+
const viewerDiv = document.getElementById('viewerDiv');
100100

101-
itowns.THREE.Object3D.DEFAULT_UP.set(0, 0, 1);
101+
THREE.Object3D.DEFAULT_UP.set(0, 0, 1);
102102

103-
scale = new itowns.THREE.Vector3(1, 1, 1).divideScalar(extent.planarDimensions().x);
103+
const scale = new THREE.Vector3(1, 1, 1).divideScalar(extent.planarDimensions().x);
104104

105105
// Instanciate View
106106
view = new itowns.View(extent.crs, viewerDiv);
107107
setupLoadingScreen(viewerDiv, view);
108108

109109
view.mainLoop.gfxEngine.renderer.setClearColor(0x999999);
110110

111-
parent = new itowns.THREE.Mesh(
112-
new itowns.THREE.BoxGeometry(8000, 8000, 8000),
113-
new itowns.THREE.MeshBasicMaterial({ color: 0xdddddd }));
111+
const parent = new THREE.Mesh(
112+
new THREE.BoxGeometry(8000, 8000, 8000),
113+
new THREE.MeshBasicMaterial({ color: 0xdddddd }));
114114
parent.scale.copy(scale);
115115
parent.updateMatrixWorld(true);
116116

117117
view.scene.add(parent);
118-
var elevationSource = new itowns.WMSSource({
118+
const elevationSource = new itowns.WMSSource({
119119
extent,
120120
version: '1.3.0',
121121
name: 'MNT2018_Altitude_2m',
@@ -125,34 +125,34 @@
125125
url: 'https://imagerie.data.grandlyon.com/wms/grandlyon',
126126
});
127127

128-
for (index = 0; index < wmsSources.length; index++) {
129-
wms = wmsSources[index];
130-
obj = new itowns.THREE.Object3D();
131-
offset = extent.center().toVector3().negate().applyEuler(cubeTransformations[index].rotation);
128+
for (let index = 0; index < wmsSources.length; index++) {
129+
const wms = wmsSources[index];
130+
const obj = new THREE.Object3D();
131+
const offset = extent.center().toVector3().negate().applyEuler(cubeTransformations[index].rotation);
132132
offset.add(cubeTransformations[index].position.divide(scale));
133133
obj.position.copy(offset);
134134
obj.rotation.copy(cubeTransformations[index].rotation);
135135
parent.add(obj);
136136
obj.updateMatrixWorld(true);
137137

138-
tileLayer = new itowns.PlanarLayer('planar' + wms.name + index,
138+
const tileLayer = new itowns.PlanarLayer('planar' + wms.name + index,
139139
extent, obj, { disableSkirt: true });
140140

141141
view.addLayer(tileLayer);
142142

143-
var colorSource = new itowns.WMSSource({
143+
const colorSource = new itowns.WMSSource({
144144
url: wms.url,
145145
version: '1.3.0',
146146
name: wms.name,
147147
crs: 'EPSG:3946',
148148
format: 'image/jpeg',
149149
extent,
150150
});
151-
var colorLayer = new itowns.ColorLayer('wms_imagery' + wms.name + index, {
151+
const colorLayer = new itowns.ColorLayer('wms_imagery' + wms.name + index, {
152152
source: colorSource,
153153
});
154154
view.addLayer(colorLayer, tileLayer);
155-
var elevationLayer = new itowns.ElevationLayer('wms_elevation' + wms.name + index, {
155+
const elevationLayer = new itowns.ElevationLayer('wms_elevation' + wms.name + index, {
156156
source: elevationSource,
157157
useColorTextureElevation: true,
158158
colorTextureElevationMinZ: 144,
@@ -166,14 +166,20 @@
166166
// Position the camera at south-west corner
167167
view.camera3D.position.set(3, 2, 3);
168168
view.camera3D.updateMatrixWorld(true);
169-
view.camera3D.lookAt(new itowns.THREE.Vector3(0, 0, 0));
169+
view.camera3D.lookAt(new THREE.Vector3(0, 0, 0));
170170

171-
controls = new itowns.THREE.OrbitControls(view.camera3D, viewerDiv);
171+
const controls = new OrbitControls(view.camera3D, viewerDiv);
172172
controls.minDistance = 1;
173173
controls.addEventListener('change', function _() { view.notifyChange(view.camera3D); });
174174

175175
// Request redraw
176176
view.notifyChange();
177+
178+
179+
// Warning: the following code is not part of this example, those
180+
// variables are only exposed for internal functional test uses.
181+
window.view = view;
182+
177183
</script>
178184
</body>
179185
</html>

0 commit comments

Comments
 (0)