iTowns · Exareyn · Jul 21, 2023 · Jul 26, 2023 · Jul 27, 2023 · Jul 27, 2023
diff --git a/CONTRIBUTORS.md b/CONTRIBUTORS.md
@@ -45,6 +45,9 @@ The following people have contributed to iTowns.
 * [Diginove](http://diginove.com/index.php/fr/diginove-lexpertise-en-traitement-dimages/):
   * [Michel Benet](https://github.com/mbenevole)
 
+* [Futurmap] (https://www.futurmap.com/)
+  * [Alexandre Calmels] (http://github.com/exareyn)
+
 The following organizations are the current maintainers of iTowns:
 * IGN (http://www.ign.fr)
 * Ciril Group (https://www.cirilgroup.com/)
diff --git a/examples/config.json b/examples/config.json
@@ -82,7 +82,8 @@
         "misc_custom_controls": "Define custom controls",
         "misc_custom_label": "Custom label popup",
         "misc_camera_traveling": "Camera traveling",
-        "misc_instancing": "3D objects instancing"
+        "misc_instancing": "3D objects instancing",
+        "misc_gltf_model": "Load gltf/glb model"
     },
 
     "Widgets": {

diff --git a/examples/misc_gltf_model.html b/examples/misc_gltf_model.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Display a Glb/Gltf object with iTowns</title>
+
+        <meta charset="UTF-8" />
+        <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="../dist/itowns.js"></script>
+        <script type="text/javascript">
+            var THREE = itowns.THREE;
+            // iTowns namespace defined here
+            var viewerDiv = document.getElementById("viewerDiv");
+
+            var placement = {
+                coord: new itowns.Coordinates(
+                    "EPSG:4326",
+                    4.829361189714537,
+                    45.78511422365657
+                ),
+                tilt: 30,
+                heading: 180,
+                range: 250,
+            };
+
+            var view = new itowns.GlobeView(viewerDiv, placement);
+
+            var orthoSource = new itowns.TMSSource({
+                crs: "EPSG:3857",
+                isInverted: true,
+                format: "image/png",
+                url: "http://osm.oslandia.io/styles/klokantech-basic/${z}/${x}/${y}.png",
+                attribution: {
+                    name: "OpenStreetMap",
+                    url: "http://www.openstreetmap.org/",
+                },
+                tileMatrixSet: "PM",
+            });
+
+            var orthoLayer = new itowns.ColorLayer("Ortho", {
+                source: orthoSource,
+            });
+
+            view.addLayer(orthoLayer);
+
+            // Load a new gltf object
+            itowns.glTFLoader.load(
+                "https://raw.githubusercontent.com/iTowns/iTowns2-sample-data/master/models/lampadaire/scene.gltf ",
+                (gltf) => {
+                    var model = gltf.scene;
+                    model.scale.set(10, 10, 10);
+
+                    // Set coordinates of the GLB
+                    coord = new itowns.Coordinates(
+                        "EPSG:4326",
+                        4.829501189714537,
+                        45.78510982365657,
+                        12
+                    );
+
+                    // Set position and angle of the glb
+                    model.position.copy(coord.as(view.referenceCrs));
+                    model.lookAt(model.position.clone().add(coord.geodesicNormal));
+                    model.rotateX(Math.PI / 2);
+
+                    // // Set his own position to work with Itowns referencement
+                    object = model;
+                    const boundingBox = new THREE.Box3();
+                    boundingBox.setFromObject(object);
+                    const center = boundingBox.getCenter(new THREE.Vector3());
+
+                    object.position.x += object.position.x - center.x;
+                    object.position.y += object.position.y - center.y;
+                    object.position.z += object.position.z - center.z;
+
+                    model.updateMatrixWorld();
+                    view.scene.add(model);
+                    view.notifyChange();
+                },
+                () => {},
+                (error) => {
+                    // eslint-disable-next-line no-console
+                    console.log("An error happened :");
+                    // eslint-disable-next-line no-console
+                    console.log(error);
+                }
+            );
+        </script>
+    </body>
+</html>
diff --git a/test/functional/misc_gltf_model.js b/test/functional/misc_gltf_model.js
@@ -0,0 +1,15 @@
+const assert = require('assert');
+
+describe('misc_glft_model', function _() {
+    let result;
+    before(async () => {
+        result = await loadExample(
+            'examples/misc_gltf_model',
+            this.fullTitle(),
+        );
+    });
+
+    it('should run', async () => {
+        assert.ok(result);
+    });
+});