TOEDIT(examples): Add COPC url loader

iTowns · Jul 13, 2023 · 4af901d · 4af901d
1 parent 65a79b8
commit 4af901d
Show file tree

Hide file tree

Showing 2 changed files with 183 additions and 1 deletion.
diff --git a/examples/config.json b/examples/config.json
@@ -26,7 +26,8 @@
         "potree_3d_map": "Potree 3D map",
         "laz_dragndrop": "LAS/LAZ viewer",
         "entwine_simple_loader": "Entwine loader",
-        "entwine_3d_loader": "Entwine 3D loader"
+        "entwine_3d_loader": "Entwine 3D loader",
+        "copc_simple_loader": "COPC loader",
     },
 
     "Vector tiles": {

diff --git a/examples/copc_simple_loader.html b/examples/copc_simple_loader.html
@@ -0,0 +1,181 @@
+<html>
+    <head>
+        <meta charset="UTF-8">
+
+        <title>Itowns - COPC loader</title>
+
+        <link rel="stylesheet" type="text/css" href="css/example.css">
+        <link rel="stylesheet" type="text/css" href="css/LoadingScreen.css">
+
+        <style type="text/css">
+            #description {
+                z-index: 2;
+                left: 10px;
+            }
+        </style>
+
+        <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="description">Specify the URL of a COPC file to load:
+            <input type="text" id="url" />
+            <button onclick="readURL()">Load</button>
+            <div id="share"></div>
+        </div>
+        <div id="viewerDiv">
+        <!--div id="description">
+            <h2>COPC Loader</h2>
+            <input type="text" id="url" />
+            <select>
+                <option value="A">A</option>
+                <option value="B">B</option>
+                <option value="C">C</option>
+            </select>
+        </div-->
+
+        <script src="../dist/itowns.js"></script>
+        <script src="js/GUI/LoadingScreen.js"></script>
+        <script src="../dist/debug.js"></script>
+        <script type="text/javascript">
+            const url = new URL(location);
+
+            const gui = new dat.GUI();
+
+            const viewerDiv = document.getElementById('viewerDiv');
+            const view = new itowns.View('EPSG:4326', viewerDiv);
+            const controls = new itowns.PlanarControls(view);
+            viewerDiv.style.display = 'block';
+            view.mainLoop.gfxEngine.renderer.setClearColor(0xcccccc);
+
+            setUrl(url.searchParams.get('copc'));
+
+
+            function setUrl(url) {
+                if (!url) return;
+
+                const input_url = document.getElementById('url');
+                if (!input_url) return;
+
+                input_url.value = url;
+                loadCOPC(url);
+            }
+
+            // TODO: Pass layer as argument
+            function onLayerReady(l) {
+                console.log(l);
+                var camera = view.camera.camera3D;
+
+                var lookAt = new itowns.THREE.Vector3();
+                var size = new itowns.THREE.Vector3();
+                layer.root.bbox.getSize(size);
+                layer.root.bbox.getCenter(lookAt);
+
+                camera.far = 2.0 * size.length();
+
+                var position = layer.root.bbox.min.clone().add(size.multiply({ x: 0, y: 0, z: size.x / size.z }));
+
+                camera.position.copy(position);
+                camera.lookAt(lookAt);
+
+                view.notifyChange(camera);
+            }
+
+
+            function readURL() {
+
+                var url = document.getElementById('url').value;
+
+                if (url) {
+                    navigator.clipboard.writeText(url);
+
+                    loadCOPC(url);
+                }
+            }
+
+            function loadCOPC(url) {
+                source = new itowns.CopcSource({ url });
+
+                // if (layer) {
+                //     view.removeLayer('COPC');
+                //     view.notifyChange();
+                // }
+
+                layer = new itowns.CopcLayer('COPC', {
+                    source,
+                    crs: view.referenceCrs,
+                });
+                view.addLayer(layer).then(onLayerReady);
+                debug.PotreeDebug.initTools(view, layer, gui);
+            }
+        </script>
+    </body>
+
+    <!--body>
+        <div id="description">Specify the URL of a COPC file to load:
+            <input type="text" id="url" />
+            <button onclick="readURL()">Load</button>
+            <div id="share"></div>
+        </div>
+        <div id="viewerDiv" />
+
+        <script src="../dist/itowns.js"></script>
+        <script src="js/GUI/LoadingScreen.js"></script>
+        <script src="../dist/debug.js"></script>
+        <script type="text/javascript">
+            itowns.proj4.defs("EPSG:3946","+proj=lcc +lat_0=46 +lon_0=3 +lat_1=45.25 +lat_2=46.75 +x_0=1700000 +y_0=5200000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs +type=crs");
+
+            var gui = new dat.GUI();
+            var viewerDiv = document.getElementById('viewerDiv');
+            viewerDiv.style.display = 'block';
+            var view = new itowns.View('EPSG:3946', viewerDiv);
+            view.mainLoop.gfxEngine.renderer.setClearColor(0xcccccc);
+
+            var controls = new itowns.FirstPersonControls(view, { focusOnClick: true });
+
+            function onLayerReady() {
+                var camera = view.camera.camera3D;
+
+                var lookAt = new itowns.THREE.Vector3();
+                var size = new itowns.THREE.Vector3();
+                layer.root.bbox.getSize(size);
+                layer.root.bbox.getCenter(lookAt);
+
+                camera.far = 2.0 * size.length();
+
+                var position = layer.root.bbox.min.clone().add(size.multiply({ x: 0, y: 0, z: size.x / size.z }));
+
+                camera.position.copy(position);
+                camera.lookAt(lookAt);
+
+                view.notifyChange(camera);
+            }
+
+
+            function readURL() {
+                var url = document.getElementById('url').value;
+
+                if (url) {
+                    loadCOPC(url);
+                }
+            }
+
+            function loadCOPC(url) {
+                source = new itowns.CopcSource({ url });
+
+                // if (layer) {
+                //     view.removeLayer('COPC');
+                //     view.notifyChange();
+                // }
+
+                layer = new itowns.CopcLayer('COPC', {
+                    source,
+                    crs: view.referenceCrs,
+                });
+                view.addLayer(layer).then(onLayerReady);
+                debug.PotreeDebug.initTools(view, layer, gui);
+            }
+        </script>
+    </body-->
+</html>
+