- npm install proj4 --save

- npm uninstall --save axios
- rename DxfLayer to TinLayer
- add DoubleSide material to TinLayer
- add control for coordinates

package-lock.json

@@ -5,7 +5,7 @@
     "packages": {
         "": {
             "dependencies": {
-                "axios": "^0.21.0",
+                "proj4": "^2.6.3",
                 "three": "^0.122.0"
             },
             "devDependencies": {
@@ -1644,14 +1644,6 @@
                 "node": ">=8"
             }
         },
-        "node_modules/axios": {
-            "version": "0.21.0",
-            "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz",
-            "integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==",
-            "dependencies": {
-                "follow-redirects": "^1.10.0"
-            }
-        },
         "node_modules/babel-loader": {
             "version": "8.2.1",
             "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.1.tgz",
@@ -2469,20 +2461,6 @@
                 "node": ">=6"
             }
         },
-        "node_modules/follow-redirects": {
-            "version": "1.13.0",
-            "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.0.tgz",
-            "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==",
-            "funding": [
-                {
-                    "type": "individual",
-                    "url": "https://github.com/sponsors/RubenVerborgh"
-                }
-            ],
-            "engines": {
-                "node": ">=4.0"
-            }
-        },
         "node_modules/fs.realpath": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3287,6 +3265,11 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/mgrs": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/mgrs/-/mgrs-1.0.0.tgz",
+            "integrity": "sha1-+5FYjnjJACVnI5XLQLJffNatGCk="
+        },
         "node_modules/micromatch": {
             "version": "4.0.2",
             "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
@@ -3778,6 +3761,15 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/proj4": {
+            "version": "2.6.3",
+            "resolved": "https://registry.npmjs.org/proj4/-/proj4-2.6.3.tgz",
+            "integrity": "sha512-XRqnLmHWlvi7jqKNTqaOUrVy72JEtOUrnlLki99yZUOSvcSeBaZ1I/EGnQ2LzplSbjSrebGAdikqCLeCxC/YEg==",
+            "dependencies": {
+                "mgrs": "1.0.0",
+                "wkt-parser": "^1.2.4"
+            }
+        },
         "node_modules/prr": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
@@ -4894,6 +4886,11 @@
             "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
             "dev": true
         },
+        "node_modules/wkt-parser": {
+            "version": "1.2.4",
+            "resolved": "https://registry.npmjs.org/wkt-parser/-/wkt-parser-1.2.4.tgz",
+            "integrity": "sha512-ZzKnc7ml/91fOPh5bANBL4vUlWPIYYv11waCtWTkl2TRN+LEmBg60Q1MA8gqV4hEp4MGfSj9JiHz91zw/gTDXg=="
+        },
         "node_modules/wordwrapjs": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/wordwrapjs/-/wordwrapjs-4.0.0.tgz",
@@ -6336,14 +6333,6 @@
             "dev": true,
             "peer": true
         },
-        "axios": {
-            "version": "0.21.0",
-            "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz",
-            "integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==",
-            "requires": {
-                "follow-redirects": "^1.10.0"
-            }
-        },
         "babel-loader": {
             "version": "8.2.1",
             "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.1.tgz",
@@ -6963,11 +6952,6 @@
                 "locate-path": "^3.0.0"
             }
         },
-        "follow-redirects": {
-            "version": "1.13.0",
-            "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.0.tgz",
-            "integrity": "sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA=="
-        },
         "fs.realpath": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -7571,6 +7555,11 @@
             "dev": true,
             "peer": true
         },
+        "mgrs": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/mgrs/-/mgrs-1.0.0.tgz",
+            "integrity": "sha1-+5FYjnjJACVnI5XLQLJffNatGCk="
+        },
         "micromatch": {
             "version": "4.0.2",
             "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz",
@@ -7920,6 +7909,15 @@
             "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
             "dev": true
         },
+        "proj4": {
+            "version": "2.6.3",
+            "resolved": "https://registry.npmjs.org/proj4/-/proj4-2.6.3.tgz",
+            "integrity": "sha512-XRqnLmHWlvi7jqKNTqaOUrVy72JEtOUrnlLki99yZUOSvcSeBaZ1I/EGnQ2LzplSbjSrebGAdikqCLeCxC/YEg==",
+            "requires": {
+                "mgrs": "1.0.0",
+                "wkt-parser": "^1.2.4"
+            }
+        },
         "prr": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
@@ -8752,6 +8750,11 @@
             "integrity": "sha512-JcKqAHLPxcdb9KM49dufGXn2x3ssnfjbcaQdLlfZsL9rH9wgDQjUtDxbo8NE0F6SFvydeu1VhZe7hZuHsB2/pw==",
             "dev": true
         },
+        "wkt-parser": {
+            "version": "1.2.4",
+            "resolved": "https://registry.npmjs.org/wkt-parser/-/wkt-parser-1.2.4.tgz",
+            "integrity": "sha512-ZzKnc7ml/91fOPh5bANBL4vUlWPIYYv11waCtWTkl2TRN+LEmBg60Q1MA8gqV4hEp4MGfSj9JiHz91zw/gTDXg=="
+        },
         "wordwrapjs": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/wordwrapjs/-/wordwrapjs-4.0.0.tgz",

package.json

@@ -1,6 +1,6 @@
 {
     "dependencies": {
-        "axios": "^0.21.0",
+        "proj4": "^2.6.3",
         "three": "^0.122.0"
     },
     "devDependencies": {

src/css/page.css

@@ -91,3 +91,16 @@
     background-repeat: no-repeat;
     display: block;
 }
+
+/*Koordinatenanzeige*/
+.gba-control-coordinates {
+    background-color: rgb(250,250,250);
+    background-color: rgba(250,250,250,0.8);
+    text-align: center;
+    box-shadow: 0 0 5px #bbb;
+    padding: 0 5px;
+    margin: 0;
+    color: #333;    
+    font: 11px/1.500 'Open Sans', sans-serif; 
+}
+

src/js/controls/Control.js

@@ -8,13 +8,14 @@ class Control {
     // @section
     // @aka Control options
     options = {
-        position: 'topright'
+        position: 'topright',
     };
 
     constructor(defaults) {
         if (!(this instanceof Control)) {
             throw new TypeError("Control constructor cannot be called as a function.");
         }
+        // this.options = defaults;
         // properties     
         util.setOptions(this, defaults);
     }

src/js/controls/Coordinates.js

@@ -0,0 +1,131 @@
+import { Control } from "./Control";
+import * as dom from '../core/domUtil';
+import { Vector3 } from 'three/src/math/Vector3';
+import proj4 from 'proj4/dist/proj4';
+import * as util from '../core/utilities';
+
+class Coordinates extends Control {
+
+    options = {
+        position: 'bottomright',
+        separator: ' : ',
+        emptyString: 'Unavailable',
+        lngFirst: false,
+        numDigits: 5,
+        lngFormatter: undefined,
+        latFormatter: undefined,
+        prefix: ""
+    };
+    map = {};
+
+    constructor(options) {
+        super(options);
+
+        util.setOptions(this, options);
+    }
+    // get options() {
+    //     return util.extend(this._options, super._options);
+    // }
+
+    // set options(defaults) {
+    //     this._options = util.extend(this._options, defaults);;
+    // }
+    // set options(defaults) {
+    //     this._options = value;
+    // }
+
+    onAdd(map) {
+        proj4.defs([
+            [
+            'EPSG:4326',
+            '+title=WGS 84 (long/lat) +proj=longlat +ellps=WGS84 +datum=WGS84 +units=degrees'],
+            [
+            'EPSG:3034',
+            '+proj=lcc +lat_1=35 +lat_2=65 +lat_0=52 +lon_0=10 +x_0=4000000 +y_0=2800000 +ellps=GRS80 +units=m +no_defs'
+            ]
+            ]);
+        this.map = map;
+        //this._container = L.DomUtil.create('div', 'gba-control-coordinates');
+        this._container = dom.createDom("div", { "class": "gba-control-coordinates" });
+        //map.on('mousemove', this._onMouseMove, this);
+        map.addListener('mouse-move', this._onMouseMove, this);
+        //this._container.innerHTML = this.options.emptyString;
+        return this._container;
+    }
+
+    onRemove(map) {
+        map.removeListener('mouse-move', this._onMouseMove, this);
+    }
+
+    _onMouseMove(event) {
+        // var canvasOffset = $(this._map.domElement).offset();
+        // let rect = this._map.domElement.getBoundingClientRect();
+        let canvasOffset = this._getOffset(this.map.domElement);
+        let offsetX = event.clientX - canvasOffset.left;
+        let offsetY = event.clientY - canvasOffset.top;
+        let width = this._map.domElement.clientWidth;
+        let height = this._map.domElement.clientHeight;
+
+        let x = (offsetX / width) * 2 - 1;
+        let y = -(offsetY / height) * 2 + 1;
+        let vector = new Vector3(x, y, 1);
+        vector.unproject(this.options.camera);
+        //var lng = this.options.lngFormatter ? this.options.lngFormatter(e.latlng.lng) : L.Util.formatNum(e.latlng.lng, this.options.numDigits);
+        //var lat = this.options.latFormatter ? this.options.latFormatter(e.latlng.lat) : L.Util.formatNum(e.latlng.lat, this.options.numDigits);
+        //var value = this.options.lngFirst ? lng + this.options.separator + lat : lat + this.options.separator + lng;
+        //var prefixAndValue = this.options.prefix + ' ' + value;
+
+        // clicked coordinates: skalierung wieder wegrechnen:
+        let pt = vector; //this.options.dataservice.toMapCoordinates(vector.x, vector.y, 1);
+        // let dest = new Proj4js.Proj("EPSG:4326");
+        // let source = new Proj4js.Proj(this.options.dataservice.crs);
+        let dest = new proj4.Proj("EPSG:4326");
+        let source = new proj4.Proj("EPSG:3034");
+        let minPoint = { x: pt.x, y: pt.y, spatialReference: { wkid: 3034 } };
+        let point84 = proj4.transform(source, dest, minPoint);
+        let koordx = this._dec2sex(point84.x, 'X');
+        let koordy = this._dec2sex(point84.y, 'y');
+        //document.getElementById("info").innerHTML = "LON: " + koordx + ", " + "LAT: " + koordy;
+        this._container.innerHTML = "LON: " + koordx + ", " + "LAT: " + koordy;
+    }
+
+    _getOffset(element) {
+        if (!element.getClientRects().length) {
+            return { top: 0, left: 0 };
+        }
+
+        let rect = element.getBoundingClientRect();
+        let win = element.ownerDocument.defaultView;
+        return (
+            {
+                top: rect.top + win.pageYOffset,
+                left: rect.left + win.pageXOffset
+            });
+    }
+
+    _dec2sex(dec, dir) {
+        let plus = Math.abs(dec);
+        let degr = Math.floor(plus);
+        let minu = Math.floor(60 * (plus - degr));
+        let sec = Math.floor(60 * (60 * (plus - degr) - minu));
+        let secStr = "";
+        let compass = "?";
+        let minuStr = "";
+        if (minu < 10) {
+            minuStr = "0" + minu;
+        }
+        if (sec < 10) {
+            secStr = "0" + sec;
+        }
+        if (dir === 'y') {
+            compass = dec < 0 ? "S" : "N";
+        }
+        else {
+            compass = dec < 0 ? "W" : "E";
+        }
+        return "" + degr + "° " + minuStr + "' " + secStr + '" ' + compass;
+    }
+
+}
+
+export { Coordinates };

src/js/core/utilities.js

@@ -107,6 +107,16 @@ export function extend(dest) {
 	return dest;
 }
 
+// @function create(proto: Object, properties?: Object): Object
+// Compatibility polyfill for [Object.create](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object/create)
+export var create = Object.create || (function () {
+	function F() {}
+	return function (proto) {
+		F.prototype = proto;
+		return new F();
+	};
+})()
+
 export function showLoading () {
 	var element = dom.byId("loadingImg");
 	//domUtil.show(_loading);
@@ -133,11 +143,15 @@ export function setOptions (obj, options) {
 	return obj.options;
 }
 
-export function stamp (){
+// @property lastId: Number
-	var lastId = 0,
+// Last unique ID used by [`stamp()`](#util-stamp)
-		key = '_gba_id';
+export var lastId = 0;
-	return function (obj) {
+
+// @function stamp(obj: Object): Number
+// Returns the unique ID of an object, assigning it one if it doesn't have it.
+export function stamp (obj){
+	let key = '_gba_id';
 	obj[key] = obj[key] || ++lastId;
 	return obj[key];
-	};
+
 }

src/js/layer/TinLayer.js

@@ -2,6 +2,8 @@
 import { BufferGeometry } from 'three/src/core/BufferGeometry';
 import { Float32BufferAttribute, Uint16BufferAttribute } from 'three/src/core/BufferAttribute';
 import { MeshBasicMaterial } from 'three/src/materials/MeshBasicMaterial.js';
+import { MeshStandardMaterial } from 'three/src/materials/MeshStandardMaterial';
+import { DoubleSide } from 'three/src/constants'
 import { Mesh } from 'three/src/objects/Mesh';
 import { Layer } from './Layer';
 import { BitStream } from '../lib/bitstream';
@@ -9,7 +11,7 @@ import { BitStream } from '../lib/bitstream';
 const POINTURL = 'https://geusegdi01.geus.dk/geom3d/data/nodes/';
 const EDGEURL = 'https://geusegdi01.geus.dk/geom3d/data/triangles/';
 
-class DxfLayer extends Layer {
+class TinLayer extends Layer {
 
 
 
@@ -55,7 +57,7 @@ class DxfLayer extends Layer {
         let geometry = new BufferGeometry();
         // let positions = new Float32BufferAttribute(this.vertices, 3);       
         let posArray = await (this.points(this.geomId));
-        console.log(posArray);
+        // console.log(posArray);
         let positions = new Float32BufferAttribute(posArray, 3);
         geometry.setAttribute('position', positions);
 
@@ -72,9 +74,13 @@ class DxfLayer extends Layer {
         geometry.computeVertexNormals();// computed vertex normals are orthogonal to the face f
         geometry.computeBoundingBox();
 
-        let color = parseInt("907A5C", 16);
+        let color = parseInt(this.color, 16);
-        this.material = new MeshBasicMaterial({
+        this.material = new MeshStandardMaterial({
-            color: color
+            color: color,
+            metalness: 0.1,
+            roughness: 0.75,
+            flatShading: true,
+            side: DoubleSide
         });
         this.materialsArray.push(this.material);
         let mesh = this.mainMesh = new Mesh(geometry, this.material);
@@ -103,9 +109,8 @@ class DxfLayer extends Layer {
         const response = await fetch(url);
         if (response.ok) {
             return response.arrayBuffer();
-        }
+        } else {
-        else {
+            throw new Error("HTTP error, status = " + response.status);
-            console.log('could not fetch geometry data');
         }
     }
 
@@ -175,4 +180,4 @@ class DxfLayer extends Layer {
 }
 
 
-export { DxfLayer };
+export { TinLayer };

src/js/main.js

@@ -1,16 +1,13 @@
-// import { DirectionalLight, AmbientLight, WebGLRenderer, PerspectiveCamera, Scene } from 'three';
 import { DirectionalLight } from 'three/src/lights/DirectionalLight';
 import { AmbientLight } from 'three/src/lights/AmbientLight';
 import { WebGLRenderer } from 'three/src/renderers/WebGLRenderer';
 import { PerspectiveCamera } from 'three/src/cameras/PerspectiveCamera';
 import { Scene } from 'three/src/scenes/Scene';
-// import { BoxLayer } from './layer/BoxLayer';
 import { Vector3 } from 'three/src/math/Vector3';
-import { DxfLayer } from './layer/DxfLayer';
+import { TinLayer } from './layer/TinLayer';
-// import * as util from './core/utilities';
-// import { OrbitControls } from './lib/OrbitControls.js'
 import { Map } from './core/Map';
 import * as domEvent from './core/domEvent';
+// import { Coordinates } from './controls/Coordinates';
 
 import '../css/page.css'; /* style loader will import it */
 
@@ -39,20 +36,24 @@ class Application {
     createScene() {
 
         /* Renderer */
-        var bgcolor = 0xfdfdfd;
+        // var bgcolor = 0xfdfdfd;
+        let bgcolor = 0xfdfdfd;
         this.renderer = new WebGLRenderer({ alpha: true, antialias: true });
+        this.renderer.setPixelRatio( window.devicePixelRatio );
         // this.renderer.setSize(window.innerWidth, window.innerHeight);
         // document.body.appendChild(this.renderer.domElement);
         this.renderer.setSize(this.width, this.height);
         this.renderer.setClearColor(bgcolor, 1); // second param is opacity, 0 => transparent       
-        var Empty = Object.freeze([]);
+        // let Empty = Object.freeze([]);
-        this.renderer.clippingPlanes = Empty; // GUI sets it to globalPlanes
+        // this.renderer.clippingPlanes = Empty; // GUI sets it to globalPlanes
-        this.renderer.localClippingEnabled = true;
+        // this.renderer.localClippingEnabled = true;
         this.container.appendChild(this.renderer.domElement);
 
         /* Scene: that will hold all our elements such as objects, cameras and lights. */
         this.scene = new Scene();
         //app.scene.add(new THREE.AmbientLight(0xeeeeee));
+        // const ambient = new AmbientLight( 0xffffff, 0.5 );
+        // this.scene.add(ambient);
         this._buildDefaultLights(this.scene);
         //app.scene.autoUpdate = false;
         //// show axes in the screen
@@ -70,6 +71,7 @@ class Application {
 
         this.camera = new PerspectiveCamera(30, this.width / this.height, 100, 100000);
         this.camera.up.set(0, 0, 1);
+        
         const dirLight = new DirectionalLight(0xffffff, 1);
         dirLight.position.set(585000 + 10000, 6135000 + 10000, -500 + 5000);
         this.camera.add(dirLight);
@@ -93,20 +95,39 @@ class Application {
         // this.map.target = center;
         // this.map.minDistance =  size*0.75;
         // this.map.maxDistance = size*15;
+        // let coordinates = new Coordinates({ camera: this.camera, crs: "EPSG:3034" }).addTo(this.map); 
 
-        // let boxLayer = new BoxLayer({ width: 10, height: 10, depth: 10 });
+        let dxf134Layer = new TinLayer({
-        // this.map.addLayer(boxLayer);
+            geomId: 134, q: true, type: "3dface", name: "South Alpine Superunit", description: "test", color: "907A5C"
-
-
-        let dxfLayer = new DxfLayer({
-            geomId: 134, q: true, type: "3dface", name: "Mittelpannon", description: "test"
         });
-        // dxfLayer.idx = [0, 1, 2, 3, 4, 5];
+        this.map.addLayer(dxf134Layer);
-        // dxfLayer.vertices = new Float32Array([10.421, -20.878, 0.068, 11.241, -20.954, 0.055, 10.225, -20.297, 0.078, 0.161, -6.548, 0.535, -0.163, -6.675, 0.538, 0.116, -6.874, 0.537,]);
 
-        this.map.addLayer(dxfLayer);
+        let dxf135Layer = new TinLayer({
+            geomId: 135, q: true, type: "3dface", name: "Adriatic Plate", description: "test2", color: "A0512D"
+        });
+        this.map.addLayer(dxf135Layer);
 
-        // domEvent.on(window, 'click', this.onWindowResize, this);
+        let dxf136Layer = new TinLayer({
+            geomId: 136, q: true, type: "3dface", name: "Austroalpine Superunit", description: "test2", color: "CC4D00"
+        });
+        this.map.addLayer(dxf136Layer);
+
+        let dxf137Layer = new TinLayer({
+            geomId: 137, q: true, type: "3dface", name: "Penninic Superunit", description: "test2", color: "80CCFF"
+        });
+        this.map.addLayer(dxf137Layer);
+
+        let dxf139Layer = new TinLayer({
+            geomId: 139, q: true, type: "3dface", name: "Sub-Penninic Superunit, Helvetic Superunit & Allochthonous Molasse", description: "test2", color: "FF80CC"
+        });
+        this.map.addLayer(dxf139Layer);
+
+        let dxf140Layer = new TinLayer({
+            geomId: 140, q: true, type: "3dface", name: "Eurasian Plate, including autochtomous sedimentary cover", description: "test2", color: "FFB3B3"
+        });
+        this.map.addLayer(dxf140Layer);
+
+        domEvent.on(window, 'resize', this.onWindowResize, this);
         domEvent.on(window, 'keydown', this.keydown, this);
 
 
@@ -157,31 +178,31 @@ class Application {
     }
 
     _buildDefaultLights(scene) {
-        var deg2rad = Math.PI / 180;
+        let deg2rad = Math.PI / 180;
 
         // ambient light
         scene.add(new AmbientLight(0x999999));
         //scene.add(new THREE.AmbientLight(0xeeeeee));
 
         // directional lights
-        var opt = {
+        let opt = {
             azimuth: 220,   // note: default light azimuth of gdaldem hillshade is 315.
             altitude: 45    // altitude angle
         };
         //appSettings.Options.light.directional;
-        var lambda = (90 - opt.azimuth) * deg2rad;
+        let lambda = (90 - opt.azimuth) * deg2rad;
-        var phi = opt.altitude * deg2rad;
+        let phi = opt.altitude * deg2rad;
 
-        var x = Math.cos(phi) * Math.cos(lambda),
+        let x = Math.cos(phi) * Math.cos(lambda),
             y = Math.cos(phi) * Math.sin(lambda),
             z = Math.sin(phi);
 
-        var light1 = new DirectionalLight(0xffffff, 0.5);
+        let light1 = new DirectionalLight(0xffffff, 0.5);
         light1.position.set(x, y, z);
         scene.add(light1);
 
         // thin light from the opposite direction
-        var light2 = new DirectionalLight(0xffffff, 0.1);
+        let light2 = new DirectionalLight(0xffffff, 0.1);
         light2.position.set(-x, -y, -z);
         scene.add(light2);
     }
@@ -199,7 +220,7 @@ class Application {
 }
 
 var container = document.getElementById("webgl");
-let app = new Application(container);
+new Application(container);
 // app.add(new BoxLayer({
 //     width: 10,
 //     height: 10,