- npm install proj4 --save
- npm uninstall --save axios - rename DxfLayer to TinLayer - add DoubleSide material to TinLayer - add control for coordinates
This commit is contained in:
Arno Kaimbacher
parent
ebc0c20892
commit
59ffcf6aa1
75
package-lock.json
generated
75
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"dependencies": {
|
||||
"axios": "^0.21.0",
|
||||
"proj4": "^2.6.3",
|
||||
"three": "^0.122.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
131
src/js/controls/Coordinates.js
Normal file
131
src/js/controls/Coordinates.js
Normal file
|
|
@ -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 };
|
||||
|
|
@ -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];
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
export { TinLayer };
|
||||
|
|
@ -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,
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user