iTowns · jailln · Jul 5, 2023 · Jun 2, 2023 · Jun 2, 2023 · Jun 19, 2023
diff --git a/config/threeExamples.mjs b/config/threeExamples.mjs
@@ -4,6 +4,7 @@ export default {
         './loaders/GLTFLoader.js',
         './loaders/DRACOLoader.js',
         './loaders/DDSLoader.js',
+        './utils/BufferGeometryUtils.js',
         './capabilities/WebGL.js',
     ],
 };
diff --git a/examples/itowns-potree.html b/examples/itowns-potree.html
@@ -34,7 +34,7 @@
              with `itowns.THREE` or `itowns.proj4`. -->
         <script type="text/javascript">
             const THREE = itowns.THREE;
-            THREE.Object3D.DefaultUp.set(0, 0, 1);
+            THREE.Object3D.DEFAULT_UP.set(0, 0, 1);
 
             const proj4 = itowns.proj4;
         </script>

diff --git a/examples/js/ThreeLoader.js b/examples/js/ThreeLoader.js
@@ -41,7 +41,7 @@ ThreeLoader.getThreeJsLoader = function getThreeJsLoader(format) {
     const deferredPromise = defer();
     // eslint-disable-next-line no-undef
     THREE = itowns.THREE;
-    loadScriptAsync('https://cdn.rawgit.com/mrdoob/three.js/r' + itowns.THREE.REVISION + '/examples/js/loaders/' + format + 'Loader.js')
+    loadScriptAsync('https://cdn.rawgit.com/mrdoob/three.js/r147/examples/js/loaders/' + format + 'Loader.js')
         .then(function createLoader() {
             deferredPromise.resolve(new itowns.THREE[format + 'Loader'](manager));
         }).catch(function error(e) {

diff --git a/examples/libs/draco/draco_decoder.js b/examples/libs/draco/draco_decoder.js
diff --git a/examples/libs/draco/draco_decoder.wasm b/examples/libs/draco/draco_decoder.wasm
diff --git a/examples/libs/draco/draco_encoder.js b/examples/libs/draco/draco_encoder.js
diff --git a/examples/libs/draco/draco_wasm_wrapper.js b/examples/libs/draco/draco_wasm_wrapper.js
diff --git a/examples/libs/draco/gltf/draco_decoder.js b/examples/libs/draco/gltf/draco_decoder.js
diff --git a/examples/libs/draco/gltf/draco_decoder.wasm b/examples/libs/draco/gltf/draco_decoder.wasm
diff --git a/examples/libs/draco/gltf/draco_encoder.js b/examples/libs/draco/gltf/draco_encoder.js
diff --git a/examples/libs/draco/gltf/draco_wasm_wrapper.js b/examples/libs/draco/gltf/draco_wasm_wrapper.js
diff --git a/examples/misc_collada.html b/examples/misc_collada.html
@@ -3,73 +3,97 @@
         <title>Itowns - collada</title>
 
         <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
         <link rel="stylesheet" type="text/css" href="css/example.css">
         <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
 
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>
     </head>
     <body>
         <div id="viewerDiv"></div>
-        <script src="js/GUI/GuiTools.js"></script>
+
+        <!-- Import iTowns source code -->
         <script src="../dist/itowns.js"></script>
-        <script src="js/ThreeLoader.js"></script>
-        <script src="js/GUI/LoadingScreen.js"></script>
         <script src="../dist/debug.js"></script>
+
+        <!-- Import iTowns LoadingScreen and GuiTools plugins -->
+        <script src="js/GUI/GuiTools.js"></script>
+        <script src="js/GUI/LoadingScreen.js"></script>
+
+        <!-- Import ThreeLoader plugin to get ColladaLoader from three.js -->
+        <script src="js/ThreeLoader.js"></script>
+
         <script type="text/javascript">
-            // # Simple Globe viewer
 
-            // Define initial camera position
-            // Coordinate can be found on https://www.geoportail.gouv.fr/carte
-            // setting is "coordonnée geographiques en degres decimaux"
 
-            // Position near Gerbier mountain.
-            var placement = {
+
+
+            // ---------- CREATE A GlobeView FOR SUPPORTING DATA VISUALIZATION : ----------
+
+            // Define camera initial position
+            const placement = {
                 coord: new itowns.Coordinates('EPSG:4326', 4.21655, 44.84415),
                 range: 500,
                 heading: 180,
                 tilt: 60,
-            }
+            };
 
             // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
-            var viewerDiv = document.getElementById('viewerDiv');
+            const viewerDiv = document.getElementById('viewerDiv');
 
-            // Instanciate iTowns GlobeView*
-            var view = new itowns.GlobeView(viewerDiv, placement);
-
-            var menuGlobe = new GuiTools('menuDiv', view);
+            // Create a GlobeView
+            const view = new itowns.GlobeView(viewerDiv, placement);
 
+            // Setup loading screen and debug menu
             setupLoadingScreen(viewerDiv, view);
+            const debugMenu = new GuiTools('menuDiv', view);
 
-            function addLayerCb(layer) {
-                view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
-            }
 
-            // Add one imagery layer to the scene
-            // This layer is defined in a json file but it could be defined as a plain js
-            // object. See Layer* for more info.
-            itowns.Fetcher.json('./layers/JSONLayers/Ortho.json').then(function _(config) {
-                config.source = new itowns.WMTSSource(config.source);
-                var layer = new itowns.ColorLayer(config.id, config);
-                view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
-            });
-            // Add two elevation layers.
-            // These will deform iTowns globe geometry to represent terrain elevation.
+
+            // ---------- DISPLAY CONTEXTUAL DATA : ----------
+
+            // Display ortho-images
+            itowns.Fetcher.json('./layers/JSONLayers/Ortho.json')
+                .then(function _(config) {
+                    config.source = new itowns.WMTSSource(config.source);
+                    view.addLayer(
+                        new itowns.ColorLayer('Ortho', config),
+                    ).then(debugMenu.addLayerGUI.bind(debugMenu));
+                });
+
+            // Display elevation data
             function addElevationLayerFromConfig(config) {
                 config.source = new itowns.WMTSSource(config.source);
-                var layer = new itowns.ElevationLayer(config.id, config);
-                view.addLayer(layer).then(menuGlobe.addLayerGUI.bind(menuGlobe));
+                view.addLayer(
+                    new itowns.ElevationLayer(config.id, config),
+                ).then(debugMenu.addLayerGUI.bind(debugMenu));
             }
-            itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json').then(addElevationLayerFromConfig);
-            itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json').then(addElevationLayerFromConfig);
+            itowns.Fetcher.json('./layers/JSONLayers/IGN_MNT_HIGHRES.json')
+                .then(addElevationLayerFromConfig);
+            itowns.Fetcher.json('./layers/JSONLayers/WORLD_DTM.json')
+                .then(addElevationLayerFromConfig);
+
+
 
-            // ThreeLoader can load each format proposed in ThreeJs examples loaders : https://github.com/mrdoob/three.js/tree/dev/examples/js/loaders
-            var promiseCollada = ThreeLoader.load('Collada', 'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/models/collada/building.dae')
-            .then(collada => {
-                var model = collada.scene;
+
+            // ---------- DISPLAY COLLADA DATA : ----------
+
+            // ThreeLoader can load each format proposed in ThreeJs examples loaders : 
+            // https://github.com/mrdoob/three.js/tree/dev/examples/js/loaders
+            // Note : As this previous folder has been removed in three r148,
+            // TheeLoader will only use loaders from three r147 version. This
+            // is a temporary solution and shall be updated.
+            const promiseCollada = ThreeLoader.load(
+                'Collada', 
+                'https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/models/collada/building.dae',
+            ).then(collada => {
+                const model = collada.scene;
 
                 // building coordinate
-                var coord = new itowns.Coordinates('EPSG:4326', 4.2165, 44.844, 1417);
+                const coord = new itowns.Coordinates(
+                    'EPSG:4326', 4.2165, 44.844, 1417,
+                );
 
                 model.position.copy(coord.as(view.referenceCrs));
                 // align up vector with geodesic normal
@@ -84,6 +108,7 @@
                 view.scene.add(model);
                 view.notifyChange();
             });
+
         </script>
     </body>
 </html>
diff --git a/examples/view_multi_25d.html b/examples/view_multi_25d.html
@@ -79,7 +79,7 @@
             // `viewerDiv` will contain iTowns' rendering area (`<canvas>`)
             viewerDiv = document.getElementById('viewerDiv');
 
-            itowns.THREE.Object3D.DefaultUp.set(0, 0, 1);
+            itowns.THREE.Object3D.DEFAULT_UP.set(0, 0, 1);
 
             scale = new itowns.THREE.Vector3(1, 1, 1).divideScalar(extent.planarDimensions().x);
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -70,7 +70,7 @@
   },
   "peerDependencies": {
     "proj4": "^2.8.0",
-    "three": "0.146.0"
+    "three": "0.153.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.17.10",
@@ -109,7 +109,7 @@
     "puppeteer": "^14.1.1",
     "q": "^1.5.1",
     "replace-in-file": "^6.3.2",
-    "three": "0.146.0",
+    "three": "0.153.0",
     "url-polyfill": "^1.1.12",
     "webpack": "^5.72.1",
     "webpack-cli": "^4.9.2",

diff --git a/src/Converter/Feature2Texture.js b/src/Converter/Feature2Texture.js
@@ -210,7 +210,7 @@ export default {
             data[0] = backgroundColor.r * 255;
             data[1] = backgroundColor.g * 255;
             data[2] = backgroundColor.b * 255;
-            texture = new THREE.DataTexture(data, 1, 1, THREE.RGBFormat);
+            texture = new THREE.DataTexture(data, 1, 1, THREE.RGBAFormat);
         } else {
             texture = new THREE.Texture();
         }

diff --git a/src/Core/Prefab/Globe/SkyShader.js b/src/Core/Prefab/Globe/SkyShader.js
@@ -274,7 +274,7 @@ class Sky extends THREE.Mesh {
             depthWrite: false,
         });
 
-        const skyGeo = new THREE.SphereBufferGeometry(40000, 32, 15);
+        const skyGeo = new THREE.SphereGeometry(40000, 32, 15);
         super(skyGeo, skyMat);
     }
 }

diff --git a/src/Core/Prefab/GlobeView.js b/src/Core/Prefab/GlobeView.js
@@ -94,7 +94,7 @@ class GlobeView extends View {
      * @param {Object} options.controls - See options of {@link GlobeControls}
      */
     constructor(viewerDiv, placement = {}, options = {}) {
-        THREE.Object3D.DefaultUp.set(0, 0, 1);
+        THREE.Object3D.DEFAULT_UP.set(0, 0, 1);
         // Setup View
         super('EPSG:4978', viewerDiv, options);
         this.isGlobeView = true;

diff --git a/src/Core/Prefab/PlanarView.js b/src/Core/Prefab/PlanarView.js
@@ -33,7 +33,7 @@ class PlanarView extends View {
      * initialization. By default, camera will display the view's extent (given in `extent` parameter).
      */
     constructor(viewerDiv, extent, options = {}) {
-        THREE.Object3D.DefaultUp.set(0, 0, 1);
+        THREE.Object3D.DEFAULT_UP.set(0, 0, 1);
 
         // Setup View
         super(extent.crs, viewerDiv, options);

diff --git a/src/Parser/LASParser.js b/src/Parser/LASParser.js
@@ -45,7 +45,7 @@ export default {
             geometry.userData.vertexCount = parsedData.header.vertexCount;
             geometry.userData.boundingBox = parsedData.header.boundingBox;
 
-            const positionBuffer = new THREE.BufferAttribute(parsedData.attributes.POSITION.value, 3, false);
+            const positionBuffer = new THREE.BufferAttribute(parsedData.attributes.POSITION.value, 3);
             geometry.setAttribute('position', positionBuffer);
 
             const intensityBuffer = new THREE.BufferAttribute(parsedData.attributes.intensity.value, 1, true);

diff --git a/src/Parser/deprecated/LegacyGLTFLoader.js b/src/Parser/deprecated/LegacyGLTFLoader.js
@@ -452,7 +452,7 @@ threeExamples.LegacyGLTFLoader = ( function () {
 
 	var WEBGL_TEXTURE_FORMATS = {
 		6406: THREE.AlphaFormat,
-		6407: THREE.RGBFormat,
+		6407: THREE.RGBAFormat,
 		6408: THREE.RGBAFormat,
 		6409: THREE.LuminanceFormat,
 		6410: THREE.LuminanceAlphaFormat

diff --git a/src/Renderer/OrientedImageMaterial.js b/src/Renderer/OrientedImageMaterial.js
@@ -4,7 +4,7 @@ import textureVS from 'Renderer/Shader/ProjectiveTextureVS.glsl';
 import textureFS from 'Renderer/Shader/ProjectiveTextureFS.glsl';
 import ShaderUtils from 'Renderer/Shader/ShaderUtils';
 
-const ndcToTextureMatrix = new THREE.Matrix4().set(
+const ndcToTextureMatrix = new THREE.Matrix4(
     1, 0, 0, 1,
     0, 1, 0, 1,
     0, 0, 2, 0,

diff --git a/src/Utils/CameraUtils.js b/src/Utils/CameraUtils.js
@@ -7,7 +7,7 @@ import Ellipsoid from 'Core/Math/Ellipsoid';
 import OBB from 'Renderer/OBB';
 import { VIEW_EVENTS } from 'Core/View';
 
-THREE.Object3D.DefaultUp.set(0, 0, 1);
+THREE.Object3D.DEFAULT_UP.set(0, 0, 1);
 const targetPosition = new THREE.Vector3();
 const targetCoord = new Coordinates('EPSG:4326', 0, 0, 0);
 const ellipsoid = new Ellipsoid();

diff --git a/test/unit/cameraUtils.js b/test/unit/cameraUtils.js
@@ -15,7 +15,7 @@ function equalToFixed(value1, value2, toFixed) {
 }
 
 describe('Camera utils unit test', function () {
-    THREE.Object3D.DefaultUp = new THREE.Vector3(0, 0, 1);
+    THREE.Object3D.DEFAULT_UP = new THREE.Vector3(0, 0, 1);
 
     const original = DEMUtils.getElevationValueAt;