Skip to content

Commit 3919b72

Browse files
DesplandisDesplandis
committed
fix(examples): Fix stereo effects example
Cause: Since v148, three's addon are only available as ES6 modules (see https://github.com/mrdoob/three.js/wiki/Migration-Guide#147--148). This causes runtime errors when setting a new post-processing effect. Fix: - Use an importmap to import three's addons from a CDN - Refactor this example's script as an ES6 module
1 parent 6737c93 commit 3919b72

File tree

1 file changed

+56
-38
lines changed

1 file changed

+56
-38
lines changed

‎examples/effects_stereo.html

+56-38
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
<!DOCTYPE html>
12
<html>
23
<head>
34
<title>Itowns - Stereo</title>
@@ -18,36 +19,47 @@
1819
<script src="../dist/itowns.js"></script>
1920
<script src="js/GUI/LoadingScreen.js"></script>
2021
<script src="../dist/debug.js"></script>
21-
<script type="text/javascript">
22-
var THREE = itowns.THREE;
22+
23+
<script type="importmap">
24+
{
25+
"imports": {
26+
"three": "https://unpkg.com/[email protected]/build/three.module.js",
27+
"three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
28+
}
29+
}
2330
</script>
24-
<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/effects/AnaglyphEffect.js"></script>
25-
<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/effects/ParallaxBarrierEffect.js"></script>
26-
<script src="https://cdn.rawgit.com/mrdoob/three.js/dev/examples/js/effects/StereoEffect.js"></script>
27-
<script type="text/javascript">
31+
32+
<script type="module">
33+
// Warning: For now, three is imported twice: in the itowns bundle
34+
// and from the unpkg CDN.
35+
import * as THREE from 'three';
36+
import { AnaglyphEffect } from 'three/addons/effects/AnaglyphEffect.js';
37+
import { ParallaxBarrierEffect } from 'three/addons/effects/ParallaxBarrierEffect.js';
38+
import { StereoEffect } from 'three/addons/effects/StereoEffect.js';
39+
2840
// Define initial camera position
29-
var placement = {
41+
const placement = {
3042
coord: new itowns.Coordinates('EPSG:4326', 2.351323, 48.856712),
3143
range: 25000000,
3244
}
33-
var promises = [];
34-
var effect;
45+
const promises = [];
46+
let effect;
3547

3648
// `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
37-
var viewerDiv = document.getElementById('viewerDiv');
49+
const viewerDiv = document.getElementById('viewerDiv');
3850

3951
// Instanciate iTowns GlobeView*
40-
var view = new itowns.GlobeView(viewerDiv, placement);
52+
const view = new itowns.GlobeView(viewerDiv, placement);
4153

4254
// Eye separation value
43-
var eyeSep = 0.064;
55+
let eyeSep = 0.064;
4456

4557
// Save StereoCamera update function
46-
var fnUpdateStereoCamera = itowns.THREE.StereoCamera.prototype.update;
58+
const fnUpdateStereoCamera = THREE.StereoCamera.prototype.update;
4759

4860
setupLoadingScreen(viewerDiv, view);
4961

50-
itowns.THREE.StereoCamera.prototype.update = function _update(camera) {
62+
THREE.StereoCamera.prototype.update = function _update(camera) {
5163
this.cameraL.far = camera.far;
5264
this.cameraR.far = camera.far;
5365
this.cameraL.layers = camera.layers;
@@ -61,15 +73,15 @@
6173
// This layer is defined in a json file but it could be defined as a plain js
6274
// object. See Layer* for more info.
6375
itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(function _(config) {
64-
var source = new itowns.WMTSSource(config.source);
65-
var layer = new itowns.ColorLayer(config.id, { source });
76+
const source = new itowns.WMTSSource(config.source);
77+
const layer = new itowns.ColorLayer(config.id, { source });
6678
view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
6779
});
6880
// Add two elevation layers.
6981
// These will deform iTowns globe geometry to represent terrain elevation.
7082
function addElevationLayerFromConfig(config) {
7183
config.source = new itowns.WMTSSource(config.source);
72-
var layer = new itowns.ElevationLayer(config.id, config);
84+
const layer = new itowns.ElevationLayer(config.id, config);
7385
view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
7486
}
7587
itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);
@@ -88,18 +100,18 @@
88100
if (effect && effect.dispose) {
89101
effect.dispose();
90102
}
91-
var g = view.mainLoop.gfxEngine;
92-
var size = g.getWindowSize();
103+
const g = view.mainLoop.gfxEngine;
104+
const size = g.getWindowSize();
93105
effect = null;
94106
view.render = null;
95107
g.renderer.setViewport(0, 0, size.x, size.y);
96108
view.notifyChange();
97109
}
98110

99111
function enableEffect(_eff) {
100-
var size;
101-
var g = view.mainLoop.gfxEngine;
102-
var r = g.renderer;
112+
let size;
113+
const g = view.mainLoop.gfxEngine;
114+
const r = g.renderer;
103115

104116
if (effect) {
105117
disableEffect();
@@ -123,9 +135,9 @@
123135
* for more information about this effect.
124136
*/
125137
function enableAnaglyph() {
126-
var _eff;
127-
if (effect instanceof THREE.AnaglyphEffect) return;
128-
_eff = new THREE.AnaglyphEffect(view.mainLoop.gfxEngine.renderer, view.camera3D);
138+
let _eff;
139+
if (effect instanceof AnaglyphEffect) return;
140+
_eff = new AnaglyphEffect(view.mainLoop.gfxEngine.renderer, view.camera3D);
129141
enableEffect(_eff);
130142
}
131143

@@ -136,26 +148,26 @@
136148
* about this effect.
137149
*/
138150
function enableParallax() {
139-
var _eff;
140-
if (effect instanceof THREE.ParallaxBarrierEffect) return;
141-
_eff = new THREE.ParallaxBarrierEffect(view.mainLoop.gfxEngine.renderer, view.camera3D);
151+
let _eff;
152+
if (effect instanceof ParallaxBarrierEffect) return;
153+
_eff = new ParallaxBarrierEffect(view.mainLoop.gfxEngine.renderer, view.camera3D);
142154
enableEffect(_eff);
143155
}
144156

145157
/**
146158
* Activate a stereo effect to the view.
147159
*/
148160
function enableStereo() {
149-
var _eff;
150-
if (effect instanceof THREE.StereoEffect) return;
151-
_eff = new THREE.StereoEffect(view.mainLoop.gfxEngine.renderer, view.camera3D);
161+
let _eff;
162+
if (effect instanceof StereoEffect) return;
163+
_eff = new StereoEffect(view.mainLoop.gfxEngine.renderer, view.camera3D);
152164
enableEffect(_eff);
153165
}
154166

155-
var menuGlobe = new GuiTools('menuDiv', view);
156-
var divScaleWidget = document.getElementById('divScaleWidget');
167+
const menuGlobe = new GuiTools('menuDiv', view);
168+
const divScaleWidget = document.getElementById('divScaleWidget');
157169

158-
var d = new debug.Debug(view, menuGlobe.gui);
170+
const d = new debug.Debug(view, menuGlobe.gui);
159171
debug.createTileDebugUI(menuGlobe.gui, view, view.tileLayer, d);
160172

161173
const stereoeffect = {
@@ -177,12 +189,12 @@
177189
guiEyeSep.onChange(updateEyeSep);
178190

179191
function updateScaleWidget() {
180-
var value = view.getPixelsToMeters(200);
192+
let value = view.getPixelsToMeters(200);
181193
value = Math.floor(value);
182-
var digit = Math.pow(10, value.toString().length - 1);
194+
const digit = Math.pow(10, value.toString().length - 1);
183195
value = Math.round(value / digit) * digit;
184-
var pix = view.getMetersToPixels(value);
185-
var unit = 'm';
196+
const pix = view.getMetersToPixels(value);
197+
let unit = 'm';
186198
if (value >= 1000) {
187199
value /= 1000;
188200
unit = 'km';
@@ -200,6 +212,12 @@
200212
view.controls.addEventListener(itowns.CONTROL_EVENTS.RANGE_CHANGED, () => {
201213
updateScaleWidget();
202214
});
215+
216+
217+
// Warning: the following code is not part of this example, those
218+
// variables are only exposed for internal functional test uses.
219+
window.view = view;
220+
203221
</script>
204222
</body>
205223
</html>

0 commit comments

Comments
 (0)