From 59ffcf6aa15a65ef229dd5c5a0a6a6ec36076068 Mon Sep 17 00:00:00 2001 From: Arno Kaimbacher Date: Thu, 19 Nov 2020 16:39:55 +0100 Subject: [PATCH] - npm install proj4 --save - npm uninstall --save axios - rename DxfLayer to TinLayer - add DoubleSide material to TinLayer - add control for coordinates --- package-lock.json | 75 +++++++------ package.json | 2 +- src/css/page.css | 13 +++ src/js/controls/Control.js | 5 +- src/js/controls/Coordinates.js | 131 ++++++++++++++++++++++ src/js/core/utilities.js | 28 +++-- src/js/layer/{DxfLayer.js => TinLayer.js} | 35 +++--- src/js/main.js | 77 ++++++++----- 8 files changed, 277 insertions(+), 89 deletions(-) create mode 100644 src/js/controls/Coordinates.js rename src/js/layer/{DxfLayer.js => TinLayer.js} (86%) diff --git a/package-lock.json b/package-lock.json index 01de21f..f36769b 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index f04459e..851a50e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "dependencies": { - "axios": "^0.21.0", + "proj4": "^2.6.3", "three": "^0.122.0" }, "devDependencies": { diff --git a/src/css/page.css b/src/css/page.css index 5dab0b7..86f8c6a 100644 --- a/src/css/page.css +++ b/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; +} + diff --git a/src/js/controls/Control.js b/src/js/controls/Control.js index ad8f156..1c6062e 100644 --- a/src/js/controls/Control.js +++ b/src/js/controls/Control.js @@ -8,16 +8,17 @@ 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); - } + } getPosition() { return this.options.position; diff --git a/src/js/controls/Coordinates.js b/src/js/controls/Coordinates.js new file mode 100644 index 0000000..400de61 --- /dev/null +++ b/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 }; \ No newline at end of file diff --git a/src/js/core/utilities.js b/src/js/core/utilities.js index 4a3d289..8d32312 100644 --- a/src/js/core/utilities.js +++ b/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 (){ - var lastId = 0, - key = '_gba_id'; - return function (obj) { - obj[key] = obj[key] || ++lastId; - return obj[key]; - }; +// @property lastId: Number +// Last unique ID used by [`stamp()`](#util-stamp) +export var lastId = 0; + +// @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]; + } diff --git a/src/js/layer/DxfLayer.js b/src/js/layer/TinLayer.js similarity index 86% rename from src/js/layer/DxfLayer.js rename to src/js/layer/TinLayer.js index 90209d5..c7e1166 100644 --- a/src/js/layer/DxfLayer.js +++ b/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 { @@ -30,7 +32,7 @@ class DxfLayer extends Layer { this.borderVisible = false; } - setWireframeMode (wireframe) { + setWireframeMode(wireframe) { this.materialsArray.forEach(function (mat) { //if (m.w) return; //m.mat.wireframe = wireframe; @@ -44,7 +46,7 @@ class DxfLayer extends Layer { } async onAdd(map) { - await this.build(this.getScene()); + await this.build(this.getScene()); map.update(); // this.emit('add'); } @@ -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); - this.material = new MeshBasicMaterial({ - color: color + let color = parseInt(this.color, 16); + this.material = new MeshStandardMaterial({ + 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); @@ -89,23 +95,22 @@ class DxfLayer extends Layer { async points(geomId) { const url = POINTURL + geomId; - const buffer = await this.request(url); - return this.unpackVertices(buffer); + const buffer = await this.request(url); + return this.unpackVertices(buffer); } async edges(geomId) { const url = EDGEURL + geomId; - const buffer = await this.request(url); - return this.unpackEdges(buffer); + const buffer = await this.request(url); + return this.unpackEdges(buffer); } async request(url) { const response = await fetch(url); if (response.ok) { return response.arrayBuffer(); - } - else { - console.log('could not fetch geometry data'); + } else { + throw new Error("HTTP error, status = " + response.status); } } @@ -175,4 +180,4 @@ class DxfLayer extends Layer { } -export { DxfLayer }; \ No newline at end of file +export { TinLayer }; \ No newline at end of file diff --git a/src/js/main.js b/src/js/main.js index 3279d00..b5a538e 100644 --- a/src/js/main.js +++ b/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 * as util from './core/utilities'; -// import { OrbitControls } from './lib/OrbitControls.js' +import { TinLayer } from './layer/TinLayer'; 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([]); - this.renderer.clippingPlanes = Empty; // GUI sets it to globalPlanes - this.renderer.localClippingEnabled = true; + // let Empty = Object.freeze([]); + // this.renderer.clippingPlanes = Empty; // GUI sets it to globalPlanes + // 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); @@ -89,24 +91,43 @@ class Application { // this.controls = new OrbitControls(this.camera, this.scene, this.renderer.domElement); - this.map = new Map(size, center, this.camera, this.scene, this.renderer.domElement, this.container); + this.map = new Map(size, center, this.camera, this.scene, this.renderer.domElement, this.container); // 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 }); - // this.map.addLayer(boxLayer); - - - let dxfLayer = new DxfLayer({ - geomId: 134, q: true, type: "3dface", name: "Mittelpannon", description: "test" + let dxf134Layer = new TinLayer({ + geomId: 134, q: true, type: "3dface", name: "South Alpine Superunit", description: "test", color: "907A5C" }); - // dxfLayer.idx = [0, 1, 2, 3, 4, 5]; - // 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(dxf134Layer); - 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; - var phi = opt.altitude * deg2rad; + let lambda = (90 - opt.azimuth) * 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,