first commit
This commit is contained in:
Arno Kaimbacher
commit
731ebe85b5
5
.babelrc
Normal file
5
.babelrc
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"plugins": [
|
||||||
|
["@babel/plugin-proposal-class-properties", { "loose": true }]
|
||||||
|
]
|
||||||
|
}
|
||||||
2
.env.example
Normal file
2
.env.example
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
NODE_ENV=
|
||||||
|
CONSTANT_VALUE=
|
||||||
32
.gitignore
vendored
Normal file
32
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,32 @@
|
||||||
|
/node_modules
|
||||||
|
/dist
|
||||||
|
|
||||||
|
/.vs/lms/v15
|
||||||
|
/lms.user
|
||||||
|
/lms.sln
|
||||||
|
/lms.phpproj.user
|
||||||
|
/lms.phpproj
|
||||||
|
|
||||||
|
# Composer
|
||||||
|
/composer.lock
|
||||||
|
/composer.phar
|
||||||
|
/vendor
|
||||||
|
|
||||||
|
# Linux
|
||||||
|
*~
|
||||||
|
*.swp
|
||||||
|
|
||||||
|
# Windows
|
||||||
|
Thumbs.db
|
||||||
|
desktop.ini
|
||||||
|
|
||||||
|
|
||||||
|
/.idea
|
||||||
|
/.vscode
|
||||||
|
/.vs
|
||||||
|
/.vagrant
|
||||||
|
/npm-debug.log
|
||||||
|
/yarn-error.log
|
||||||
|
|
||||||
|
/notes.txt
|
||||||
|
/.env
|
||||||
36
GeotiefExplore.code-workspace
Normal file
36
GeotiefExplore.code-workspace
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
{
|
||||||
|
"folders": [
|
||||||
|
{
|
||||||
|
"path": "."
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"settings": {},
|
||||||
|
"launch": {
|
||||||
|
"version": "0.2.0",
|
||||||
|
"configurations": [
|
||||||
|
|
||||||
|
{
|
||||||
|
"type": "chrome",
|
||||||
|
"request": "launch",
|
||||||
|
"name": "Launch Chrome against localhost",
|
||||||
|
// "port": 9222,
|
||||||
|
"url": "http://localhost:8080",
|
||||||
|
"webRoot": "${workspaceFolder}",
|
||||||
|
"breakOnLoad": true,
|
||||||
|
// "sourceMapPathOverrides": {
|
||||||
|
// "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
|
||||||
|
// "webpack:///./*": "${workspaceFolder}/*",
|
||||||
|
// "webpack:///*": "*",
|
||||||
|
// "webpack:///src/*": "${workspaceFolder}/*",
|
||||||
|
// },
|
||||||
|
|
||||||
|
// "sourceMapPathOverrides": {
|
||||||
|
// // "webpack:///src/*": "${workspaceFolder}/*",
|
||||||
|
// "webpack:///./*": "${workspaceFolder}/*"
|
||||||
|
// },
|
||||||
|
"sourceMaps": true,
|
||||||
|
"timeout": 15000
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
images/map/loading.gif
Normal file
BIN
images/map/loading.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
40
index.html
Normal file
40
index.html
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
<!doctype html>
|
||||||
|
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||||
|
<title>3D Viewer</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||||
|
<meta name="mobile-web-app-capable" content="yes">
|
||||||
|
<!-- <link href="content/img/favicon.ico" rel="shortcut icon" type="image/x-icon" /> -->
|
||||||
|
<meta name="description" content="3D viewer Geological Survey of Austria">
|
||||||
|
<meta name="author" content="Arno Kaimbacher">
|
||||||
|
|
||||||
|
<!-- <link rel="stylesheet" href="src/css/styles.css?v=1.0"> -->
|
||||||
|
<link rel="stylesheet" type="text/css" href="dist/main.css" />
|
||||||
|
|
||||||
|
<!-- <style>
|
||||||
|
.mapDesktop {
|
||||||
|
width: 1174px;
|
||||||
|
height: 1001px;
|
||||||
|
}
|
||||||
|
</style> -->
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="webgl" class="mapDesktop">
|
||||||
|
<div id="inset"></div>
|
||||||
|
<div id="progressArea">
|
||||||
|
<img id="loadingImg" alt="" src="images/map/loading.gif" style="display:none;" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="dist/main.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
6011
package-lock.json
generated
Normal file
6011
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
30
package.json
Normal file
30
package.json
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
{
|
||||||
|
"dependencies": {
|
||||||
|
"three": "^0.119.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.11.1",
|
||||||
|
"@babel/plugin-proposal-class-properties": "^7.10.4",
|
||||||
|
"@babel/preset-env": "^7.11.0",
|
||||||
|
"babel-loader": "^8.1.0",
|
||||||
|
"concurrently": "^5.2.0",
|
||||||
|
"css-loader": "^4.2.0",
|
||||||
|
"dotenv": "^8.2.0",
|
||||||
|
"file-loader": "^6.0.0",
|
||||||
|
"img-loader": "^3.0.1",
|
||||||
|
"less-loader": "^6.2.0",
|
||||||
|
"mini-css-extract-plugin": "^0.9.0",
|
||||||
|
"style-loader": "^1.2.1",
|
||||||
|
"terser-webpack-plugin": "^4.0.0",
|
||||||
|
"url-loader": "^4.1.0",
|
||||||
|
"webpack": "^4.44.1",
|
||||||
|
"webpack-cli": "^3.3.12",
|
||||||
|
"webpack-merge": "^4.2.2"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"babel": "babel --presets es2015 js/main.js -o build/main.bundle.js",
|
||||||
|
"serve": "http-server",
|
||||||
|
"prod": "rm -rf dist && webpack",
|
||||||
|
"watch": "concurrently \"npm run serve\" \"npx webpack --source-maps --watch\" "
|
||||||
|
}
|
||||||
|
}
|
||||||
93
src/css/page.css
Normal file
93
src/css/page.css
Normal file
|
|
@ -0,0 +1,93 @@
|
||||||
|
/*@charset "UTF-8";*/
|
||||||
|
|
||||||
|
.mapDesktop {
|
||||||
|
overflow: hidden;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 30px;
|
||||||
|
top: 30px;
|
||||||
|
left: 30px;
|
||||||
|
right: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#inset {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
border: none;
|
||||||
|
width: 120px;
|
||||||
|
height: 120px;
|
||||||
|
/*background-color:lightcyan;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* control positioning */
|
||||||
|
.gba-control {
|
||||||
|
position: relative;
|
||||||
|
z-index: 7;
|
||||||
|
pointer-events: auto;
|
||||||
|
float: left;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gba-top,
|
||||||
|
.gba-bottom {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1000;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gba-top {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gba-right {
|
||||||
|
right: 0;
|
||||||
|
/*right: 5px;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.gba-bottom {
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gba-left {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.gba-right .gba-control {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gba-top .gba-control:not(:first-child) {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gba-bottom .gba-control {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.gba-left .gba-control {
|
||||||
|
margin-left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.gba-control-home span {
|
||||||
|
/*padding: 2px;*/
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
/*background-color: rgba(102,102,102,0.80);*/
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 5px;
|
||||||
|
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAABDlBMVEWZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmXl5f///+VlZWZmZmWlpaUlJSYmJiSkpKampqzs7O3t7fMzMyTk5O2trarq6uysrLR0dHY2Njb29v8/PyMjIy4uLi5ubm6urq1tbSbm5uhoaGmpqanp6eoqKi7u7u+vr7BwcHFxcXGxsbHx8fIyMjJycmpqanNzc3Ozs7Pz8/Q0NCNjY3S0tLT09PV1dXW1tavr6/Z2dmxsbHc3Nzd3d3i4uLn5+fv7+/w8PD39/f5+fn7+/uPj4/9/f3+/v6QkJA5Pja9AAAAGnRSTlMABUdVVmxucX6MtLvHycrN2Nzi4+vs7e/3+OshyJcAAAECSURBVHherdLFcsQwEEXRDjLDJOkWGYcnzMzM/P8/Eo8V18i4yl091alSaSGAgclSdnMTPQB9vKBumCriYZg3j0qKGI9DyVRxVPVNHjVZyTN6u/VzGFmNiN4di3NmWWiw1itq9+Faoux5WxhjFNeka660grkkTUZxQ1Ff7glR2WTEO+rUfI0zqgbFM1moB0rm+BEL+5FS1XzUjOvPlFHdViELx3tKa8M7xr/LW7tpvr/A6Gn+HlHGy/+Xv8Ny+XCzUtmo5/LyD2Ofp7m8LYN9nuZ9gy/1djssd17CVlmwD/Susjbrj2yvhdnJPQbTPEjpeHKPwCAvqBe6hmYXs1uY6YdfRkdtRcSvwdgAAAAASUVORK5CYII=') /*img/home.png*/;
|
||||||
|
/*opacity : 0.8;*/
|
||||||
|
background-position: 50% 50%;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
66
src/js/controls/Control.js
Normal file
66
src/js/controls/Control.js
Normal file
|
|
@ -0,0 +1,66 @@
|
||||||
|
// import { Class } from '../core/Class';
|
||||||
|
import * as util from '../core/utilities';
|
||||||
|
// import * as dom from '../core/domUtil';
|
||||||
|
|
||||||
|
// export var Control = Class.extend({
|
||||||
|
class Control {
|
||||||
|
|
||||||
|
// @section
|
||||||
|
// @aka Control options
|
||||||
|
options = {
|
||||||
|
position: 'topright'
|
||||||
|
};
|
||||||
|
|
||||||
|
constructor(defaults) {
|
||||||
|
if (!(this instanceof Control)) {
|
||||||
|
throw new TypeError("Control constructor cannot be called as a function.");
|
||||||
|
}
|
||||||
|
// properties
|
||||||
|
util.setOptions(this, defaults);
|
||||||
|
}
|
||||||
|
|
||||||
|
getPosition() {
|
||||||
|
return this.options.position;
|
||||||
|
}
|
||||||
|
|
||||||
|
getContainer() {
|
||||||
|
return this._container;
|
||||||
|
}
|
||||||
|
|
||||||
|
addTo(map) {
|
||||||
|
this._map = map;
|
||||||
|
|
||||||
|
var container = this._container = this.onAdd(map);
|
||||||
|
var pos = this.getPosition();//"topright"
|
||||||
|
var corner = map._controlCorners[pos];
|
||||||
|
if (container) {
|
||||||
|
// $(container).addClass('gba-control');
|
||||||
|
container.classList.add("gba-control");
|
||||||
|
|
||||||
|
if (pos.indexOf('bottom') !== -1) {
|
||||||
|
corner.insertBefore(container, corner.firstChild);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
corner.appendChild(container);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
removeFrom(map) {
|
||||||
|
var pos = this.getPosition(),
|
||||||
|
corner = map._controlCorners[pos];
|
||||||
|
|
||||||
|
corner.removeChild(this._container);
|
||||||
|
this._map = null;
|
||||||
|
|
||||||
|
if (this.onRemove) {
|
||||||
|
this.onRemove(map);
|
||||||
|
}
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Control };
|
||||||
102
src/js/controls/HomeButton.js
Normal file
102
src/js/controls/HomeButton.js
Normal file
|
|
@ -0,0 +1,102 @@
|
||||||
|
import { Control } from "./Control";
|
||||||
|
import * as dom from '../core/domUtil';
|
||||||
|
import * as domEvent from '../core/domEvent';
|
||||||
|
|
||||||
|
class HomeButton extends Control {
|
||||||
|
options = {
|
||||||
|
position: 'topright',
|
||||||
|
homeText: '+',
|
||||||
|
//homeTitle: 'Home Extent',
|
||||||
|
visible: true
|
||||||
|
};
|
||||||
|
|
||||||
|
constructor(defaults) {
|
||||||
|
super(defaults);
|
||||||
|
|
||||||
|
// properties
|
||||||
|
this.map = {};
|
||||||
|
this.visible = this.options.visible;
|
||||||
|
this.home = this.options.home;
|
||||||
|
}
|
||||||
|
|
||||||
|
onAdd(map) {
|
||||||
|
if (!this.map) {
|
||||||
|
//self.destroy();
|
||||||
|
logger.warning('HomeButton::map required', true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.map = map;
|
||||||
|
//this.options.home.initialZoom = map.options.zoom;
|
||||||
|
//this.options.home.initialCenter = map.options.center;
|
||||||
|
var b = this._nls = "test"; //util.mixin({}, N.widgets.home);
|
||||||
|
|
||||||
|
var className = 'gba-control-home';
|
||||||
|
// Create sidebar container
|
||||||
|
//var container = this._container = L.DomUtil.create('div', className);
|
||||||
|
var container = this._container = dom.createDom("div", { "class": className });
|
||||||
|
//if (this.options.home) {
|
||||||
|
this._homeButton = this._createButton(
|
||||||
|
//this.options.zoomInText, this.options.zoomInTitle,
|
||||||
|
"", "b.title",
|
||||||
|
className + '-do', container, this._goHome, this);
|
||||||
|
this._init();
|
||||||
|
//}
|
||||||
|
|
||||||
|
//this._updateDisabled();
|
||||||
|
//map.on('zoomend zoomlevelschange', this._updateDisabled, this);
|
||||||
|
return container;
|
||||||
|
}
|
||||||
|
|
||||||
|
_init() {
|
||||||
|
// show or hide widget
|
||||||
|
this._visible();
|
||||||
|
|
||||||
|
////// if no extent set, set extent to map extent
|
||||||
|
//if (!this.home) {
|
||||||
|
// this.home = this.map.getBounds();
|
||||||
|
//}
|
||||||
|
|
||||||
|
//// widget is now loaded
|
||||||
|
this.loaded = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
_visible() {
|
||||||
|
if (this.visible === true) {
|
||||||
|
//domStyle.set(self.domNode, 'display', 'block');
|
||||||
|
// $(this._container).css('display', 'block');
|
||||||
|
this._container.style.display = 'block';
|
||||||
|
} else {
|
||||||
|
//domStyle.set(self.domNode, 'display', 'none');
|
||||||
|
// $(this._container).css('display', 'none');
|
||||||
|
this._container.style.display = 'none';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_goHome() {
|
||||||
|
//this._map.zoomIn(e.shiftKey ? 3 : 1);
|
||||||
|
this._exitFired = false;
|
||||||
|
|
||||||
|
//var bounds = L.latLngBounds(this.options.home._southWest, this.options.home._northEast);
|
||||||
|
//this.map.fitBounds(bounds);
|
||||||
|
this.map.reset();
|
||||||
|
}
|
||||||
|
|
||||||
|
_createButton(html, title, className, container, fn, context) {
|
||||||
|
//var link = L.DomUtil.create('a', className, container);
|
||||||
|
let link = dom.createDom("span", { "class": className, innerHTML: html, title: title }, container);
|
||||||
|
|
||||||
|
// let stop = domEvent.stopPropagation();
|
||||||
|
domEvent.on(link, 'click', fn, context);
|
||||||
|
// .on(link, 'click', stop)
|
||||||
|
// .on(link, 'mousedown', stop)
|
||||||
|
// .on(link, 'dblclick', stop)
|
||||||
|
// .on(link, 'click', domEvent.preventDefault())
|
||||||
|
// //.on(link, 'click', fn.bind(this));
|
||||||
|
// .on(link, 'click', fn, context);
|
||||||
|
|
||||||
|
return link;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export { HomeButton };
|
||||||
49
src/js/core/Class.js
Normal file
49
src/js/core/Class.js
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
import * as util from './utilities';
|
||||||
|
|
||||||
|
export function Class() { }
|
||||||
|
|
||||||
|
// @function extend(props: Object): Function
|
||||||
|
// [Extends the current class](#class-inheritance) given the properties to be included.
|
||||||
|
Class.extend = function (props) {
|
||||||
|
|
||||||
|
var NewClass = function () {
|
||||||
|
|
||||||
|
// call the constructor
|
||||||
|
if (this.init) {
|
||||||
|
this.init.apply(this, arguments);
|
||||||
|
}
|
||||||
|
|
||||||
|
//// call all constructor hooks
|
||||||
|
//if (this._initHooks) {
|
||||||
|
// this.callInitHooks();
|
||||||
|
//}
|
||||||
|
};
|
||||||
|
|
||||||
|
// instantiate class without calling constructor
|
||||||
|
var F = function () { };
|
||||||
|
F.prototype = this.prototype;
|
||||||
|
|
||||||
|
var proto = new F();
|
||||||
|
proto.constructor = NewClass;
|
||||||
|
|
||||||
|
NewClass.prototype = proto;
|
||||||
|
|
||||||
|
//inherit parent's statics
|
||||||
|
for (var i in this) {
|
||||||
|
if (this.hasOwnProperty(i) && i !== 'prototype') {
|
||||||
|
NewClass[i] = this[i];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// mix given properties into the prototype
|
||||||
|
util.extend(proto, props);
|
||||||
|
|
||||||
|
return NewClass;
|
||||||
|
};
|
||||||
|
|
||||||
|
// @function include(properties: Object): this
|
||||||
|
// [Includes a mixin](#class-includes) into the current class.
|
||||||
|
Class.include = function (props) {
|
||||||
|
util.extend(this.prototype, props);
|
||||||
|
return this;
|
||||||
|
};
|
||||||
206
src/js/core/EventEmitter.js
Normal file
206
src/js/core/EventEmitter.js
Normal file
|
|
@ -0,0 +1,206 @@
|
||||||
|
import * as util from './utilities';
|
||||||
|
|
||||||
|
var eventsKey = '_events';
|
||||||
|
|
||||||
|
class EventEmitter {
|
||||||
|
constructor() {
|
||||||
|
var test = "test";
|
||||||
|
}
|
||||||
|
|
||||||
|
_getEvents() {
|
||||||
|
return this._events || (this._events = {});
|
||||||
|
}
|
||||||
|
|
||||||
|
getListeners(evt) {
|
||||||
|
var events = this._getEvents();
|
||||||
|
var response;
|
||||||
|
var key;
|
||||||
|
|
||||||
|
// Return a concatenated array of all matching events if
|
||||||
|
// the selector is a regular expression.
|
||||||
|
if (evt instanceof RegExp) {
|
||||||
|
response = {};
|
||||||
|
for (key in events) {
|
||||||
|
if (events.hasOwnProperty(key) && evt.test(key)) {
|
||||||
|
response[key] = events[key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
response = events[evt] || (events[evt] = []);
|
||||||
|
}
|
||||||
|
|
||||||
|
return response;
|
||||||
|
}
|
||||||
|
|
||||||
|
getListenersAsObject(evt) {
|
||||||
|
var listeners = this.getListeners(evt);
|
||||||
|
var response;
|
||||||
|
|
||||||
|
if (listeners instanceof Array) {
|
||||||
|
response = {};
|
||||||
|
response[evt] = listeners;
|
||||||
|
}
|
||||||
|
|
||||||
|
return response || listeners;
|
||||||
|
}
|
||||||
|
|
||||||
|
addListener(evt, fn, context) { // (String, Function[, Object]) or (Object[, Object])
|
||||||
|
|
||||||
|
// types can be a map of types/handlers
|
||||||
|
//if (L.Util.invokeEach(types, this.addEventListener, this, fn, context)) { return this; }
|
||||||
|
|
||||||
|
//var events = this.getListenersAsObject(evt);
|
||||||
|
var events = this[eventsKey] = this[eventsKey] || {};
|
||||||
|
var contextId = context && context !== this && util.stamp(context);
|
||||||
|
var i, len, event, type, indexKey, indexLenKey, typeIndex;
|
||||||
|
|
||||||
|
//// types can be a string of space-separated words
|
||||||
|
//types = util.splitWords(types);
|
||||||
|
|
||||||
|
//for (i = 0, len = types.length; i < len; i++) {
|
||||||
|
event = {
|
||||||
|
action: fn,
|
||||||
|
context: context || this
|
||||||
|
};
|
||||||
|
type = evt;// types[i];
|
||||||
|
|
||||||
|
if (contextId) {
|
||||||
|
// store listeners of a particular context in a separate hash (if it has an id)
|
||||||
|
// gives a major performance boost when removing thousands of map layers
|
||||||
|
|
||||||
|
indexKey = type + '_idx';
|
||||||
|
indexLenKey = indexKey + '_len';
|
||||||
|
|
||||||
|
typeIndex = events[indexKey] = events[indexKey] || {};
|
||||||
|
|
||||||
|
if (!typeIndex[contextId]) {
|
||||||
|
typeIndex[contextId] = [];
|
||||||
|
|
||||||
|
// keep track of the number of keys in the index to quickly check if it's empty
|
||||||
|
events[indexLenKey] = (events[indexLenKey] || 0) + 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
typeIndex[contextId].push(event);
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
events[type] = events[type] || [];
|
||||||
|
events[type].push(event);
|
||||||
|
}
|
||||||
|
//}
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
removeListener(evt, fn, context) { // ([String, Function, Object]) or (Object[, Object])
|
||||||
|
|
||||||
|
if (!this[eventsKey]) {
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
//if (!types) {
|
||||||
|
// return this.clearAllEventListeners();
|
||||||
|
//}
|
||||||
|
|
||||||
|
//if (L.Util.invokeEach(types, this.removeEventListener, this, fn, context)) { return this; }
|
||||||
|
|
||||||
|
var events = this[eventsKey],
|
||||||
|
contextId = context && context !== this && util.stamp(context),
|
||||||
|
i, len, type, listeners, j, indexKey, indexLenKey, typeIndex, removed;
|
||||||
|
|
||||||
|
//types = L.Util.splitWords(types);
|
||||||
|
|
||||||
|
//for (i = 0, len = types.length; i < len; i++) {
|
||||||
|
type = evt;//types[i];
|
||||||
|
indexKey = type + '_idx';
|
||||||
|
indexLenKey = indexKey + '_len';
|
||||||
|
|
||||||
|
typeIndex = events[indexKey];
|
||||||
|
|
||||||
|
if (!fn) {
|
||||||
|
// clear all listeners for a type if function isn't specified
|
||||||
|
delete events[type];
|
||||||
|
delete events[indexKey];
|
||||||
|
delete events[indexLenKey];
|
||||||
|
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
listeners = contextId && typeIndex ? typeIndex[contextId] : events[type];
|
||||||
|
|
||||||
|
if (listeners) {
|
||||||
|
for (j = listeners.length - 1; j >= 0; j--) {
|
||||||
|
if ((listeners[j].action === fn) && (!context || (listeners[j].context === context))) {
|
||||||
|
removed = listeners.splice(j, 1);
|
||||||
|
// set the old action to a no-op, because it is possible
|
||||||
|
// that the listener is being iterated over as part of a dispatch
|
||||||
|
//removed[0].action = util.falseFn;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (context && typeIndex && (listeners.length === 0)) {
|
||||||
|
delete typeIndex[contextId];
|
||||||
|
events[indexLenKey]--;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
hasEventListeners(type) { // (String) -> Boolean
|
||||||
|
var events = this[eventsKey];
|
||||||
|
return !!events && ((type in events && events[type].length > 0) ||
|
||||||
|
(type + '_idx' in events && events[type + '_idx_len'] > 0));
|
||||||
|
}
|
||||||
|
|
||||||
|
// (String[, Object])
|
||||||
|
emit(type, data) {
|
||||||
|
if (!this.hasEventListeners(type)) {
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
var event = util.extend({}, data, { type: type, target: this });
|
||||||
|
|
||||||
|
var events = this[eventsKey],
|
||||||
|
listeners, i, len, typeIndex, contextId;
|
||||||
|
|
||||||
|
if (events[type]) {
|
||||||
|
// make sure adding/removing listeners inside other listeners won't cause infinite loop
|
||||||
|
listeners = events[type].slice();
|
||||||
|
|
||||||
|
for (i = 0, len = listeners.length; i < len; i++) {
|
||||||
|
listeners[i].action.call(listeners[i].context, event);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// fire event for the context-indexed listeners as well
|
||||||
|
typeIndex = events[type + '_idx'];
|
||||||
|
|
||||||
|
for (contextId in typeIndex) {
|
||||||
|
listeners = typeIndex[contextId].slice();
|
||||||
|
|
||||||
|
if (listeners) {
|
||||||
|
for (i = 0, len = listeners.length; i < len; i++) {
|
||||||
|
listeners[i].action.call(listeners[i].context, event);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// aliases; we should ditch those eventually
|
||||||
|
|
||||||
|
// @method on(…): this
|
||||||
|
// Alias to [`on(…)`](#evented-on)
|
||||||
|
EventEmitter.on = EventEmitter.addListener;
|
||||||
|
|
||||||
|
// @method off(…): this
|
||||||
|
EventEmitter.off = EventEmitter.removeListener;
|
||||||
|
|
||||||
|
export { EventEmitter };
|
||||||
82
src/js/core/Map.js
Normal file
82
src/js/core/Map.js
Normal file
|
|
@ -0,0 +1,82 @@
|
||||||
|
import { OrbitControls } from '../lib/OrbitControls';
|
||||||
|
import * as dom from './domUtil';
|
||||||
|
import { HomeButton } from '../controls/HomeButton';
|
||||||
|
import * as util from './utilities';
|
||||||
|
|
||||||
|
class Map extends OrbitControls {
|
||||||
|
|
||||||
|
container;
|
||||||
|
_layers;
|
||||||
|
_controlCorners;
|
||||||
|
_controlContainer;
|
||||||
|
_controls;
|
||||||
|
|
||||||
|
constructor(camera, scene, domElement, container) {
|
||||||
|
// call parent constructor of OrbitControls
|
||||||
|
super(camera, scene, domElement);
|
||||||
|
|
||||||
|
this.container = container;
|
||||||
|
|
||||||
|
//init the control corners
|
||||||
|
if (this._initControlPos) {
|
||||||
|
this._initControlPos();
|
||||||
|
}
|
||||||
|
this._layers = {};
|
||||||
|
this.initControls();
|
||||||
|
}
|
||||||
|
|
||||||
|
_initControlPos() {
|
||||||
|
//var test = document.getElementById("webgl");
|
||||||
|
|
||||||
|
var corners = this._controlCorners = {};
|
||||||
|
var l = 'gba-';
|
||||||
|
var container = this._controlContainer =
|
||||||
|
//util.create('div', l + 'control-container', this.domElement);
|
||||||
|
dom.createDom("div", { "class": l + 'control-container' }, this.container);
|
||||||
|
|
||||||
|
function createCorner(vSide, hSide) {
|
||||||
|
var className = l + vSide + ' ' + l + hSide;
|
||||||
|
|
||||||
|
//corners[vSide + hSide] = util.create('div', className, container);
|
||||||
|
corners[vSide + hSide] = dom.createDom("div", { "class": className }, container);
|
||||||
|
}
|
||||||
|
|
||||||
|
createCorner('top', 'left');
|
||||||
|
createCorner('top', 'right');
|
||||||
|
createCorner('bottom', 'left');
|
||||||
|
createCorner('bottom', 'right');
|
||||||
|
}
|
||||||
|
|
||||||
|
initControls() {
|
||||||
|
this._controls = this._controls || {};
|
||||||
|
// this._controls.homeControl = (new HomeButton()).addTo(this);
|
||||||
|
let homeControl = this._controls.homeControl = new HomeButton();
|
||||||
|
homeControl.addTo(this);
|
||||||
|
}
|
||||||
|
|
||||||
|
addLayer(layer) {
|
||||||
|
var id = util.stamp(layer);
|
||||||
|
if (this._layers[id]) {
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
this._layers[id] = layer;
|
||||||
|
|
||||||
|
//layer._mapToAdd = this;
|
||||||
|
layer.index = id;
|
||||||
|
|
||||||
|
//if (layer.beforeAdd) {
|
||||||
|
// layer.beforeAdd(this);
|
||||||
|
//}
|
||||||
|
//this.whenReady(layer._layerAdd, layer);
|
||||||
|
layer._layerAdd(this);
|
||||||
|
this.emit("change");
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
hasLayer (layer) {
|
||||||
|
return !!layer && (util.stamp(layer) in this._layers);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Map };
|
||||||
157
src/js/core/domEvent.js
Normal file
157
src/js/core/domEvent.js
Normal file
|
|
@ -0,0 +1,157 @@
|
||||||
|
//static function
|
||||||
|
var stampForFn = (function () {
|
||||||
|
var lastId = 0,
|
||||||
|
key = '_id';
|
||||||
|
return function (obj) {
|
||||||
|
obj[key] = obj[key] || ++lastId;
|
||||||
|
return obj[key];
|
||||||
|
};
|
||||||
|
}());
|
||||||
|
|
||||||
|
export function addListener(obj, type, fn, context) { // (HTMLElement, String, Function[, Object])
|
||||||
|
|
||||||
|
var id = stampForFn(fn);
|
||||||
|
var key = '_gba_' + type + id;
|
||||||
|
var handler, originalHandler, newType;
|
||||||
|
|
||||||
|
if (obj[key]) { return this; }
|
||||||
|
|
||||||
|
handler = function (e) {
|
||||||
|
return fn.call(context || obj, e || domEvent._getEvent());
|
||||||
|
};
|
||||||
|
|
||||||
|
//if (L.Browser.pointer && type.indexOf('touch') === 0) {
|
||||||
|
// return this.addPointerListener(obj, type, handler, id);
|
||||||
|
//}
|
||||||
|
//if (L.Browser.touch && (type === 'dblclick') && this.addDoubleTapListener) {
|
||||||
|
// this.addDoubleTapListener(obj, handler, id);
|
||||||
|
//}
|
||||||
|
|
||||||
|
if ('addEventListener' in obj) {
|
||||||
|
|
||||||
|
if (type === 'mousewheel') {
|
||||||
|
obj.addEventListener('DOMMouseScroll', handler, false);
|
||||||
|
obj.addEventListener(type, handler, false);
|
||||||
|
|
||||||
|
}
|
||||||
|
else if ((type === 'mouseenter') || (type === 'mouseleave')) {
|
||||||
|
|
||||||
|
originalHandler = handler;
|
||||||
|
newType = (type === 'mouseenter' ? 'mouseover' : 'mouseout');
|
||||||
|
|
||||||
|
handler = function (e) {
|
||||||
|
if (!_checkMouse(obj, e)) { return; }
|
||||||
|
return originalHandler(e);
|
||||||
|
};
|
||||||
|
|
||||||
|
obj.addEventListener(newType, handler, false);
|
||||||
|
|
||||||
|
}
|
||||||
|
//else if (type === 'click' && L.Browser.android) {
|
||||||
|
// originalHandler = handler;
|
||||||
|
// handler = function (e) {
|
||||||
|
// return L.DomEvent._filterClick(e, originalHandler);
|
||||||
|
// };
|
||||||
|
|
||||||
|
// obj.addEventListener(type, handler, false);
|
||||||
|
//}
|
||||||
|
else {
|
||||||
|
obj.addEventListener(type, handler, false);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
else if ('attachEvent' in obj) {
|
||||||
|
obj.attachEvent('on' + type, handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
obj[key] = handler;
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
// @function on(…): this
|
||||||
|
// Alias to [`L.DomEvent.on`](#domevent-on)
|
||||||
|
export { addListener as on };
|
||||||
|
|
||||||
|
export function removeListener(obj, type, fn) { // (HTMLElement, String, Function)
|
||||||
|
|
||||||
|
var id = stampForFn(fn);
|
||||||
|
var key = '_gba_' + type + id;
|
||||||
|
var handler = obj[key];
|
||||||
|
|
||||||
|
if (!handler) { return this; }
|
||||||
|
|
||||||
|
//if (L.Browser.pointer && type.indexOf('touch') === 0) {
|
||||||
|
// this.removePointerListener(obj, type, id);
|
||||||
|
//} else if (L.Browser.touch && (type === 'dblclick') && this.removeDoubleTapListener) {
|
||||||
|
// this.removeDoubleTapListener(obj, id);
|
||||||
|
|
||||||
|
//} else if ('removeEventListener' in obj) {
|
||||||
|
if ('removeEventListener' in obj) {
|
||||||
|
if (type === 'mousewheel') {
|
||||||
|
obj.removeEventListener('DOMMouseScroll', handler, false);
|
||||||
|
obj.removeEventListener(type, handler, false);
|
||||||
|
|
||||||
|
} else if ((type === 'mouseenter') || (type === 'mouseleave')) {
|
||||||
|
obj.removeEventListener((type === 'mouseenter' ? 'mouseover' : 'mouseout'), handler, false);
|
||||||
|
} else {
|
||||||
|
obj.removeEventListener(type, handler, false);
|
||||||
|
}
|
||||||
|
} else if ('detachEvent' in obj) {
|
||||||
|
obj.detachEvent('on' + type, handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
obj[key] = null;
|
||||||
|
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
// @function removeListener(…): this
|
||||||
|
// Alias to [`L.DomEvent.off`](#domevent-off)
|
||||||
|
export { removeListener as off };
|
||||||
|
|
||||||
|
// check if element really left/entered the event target (for mouseenter/mouseleave)
|
||||||
|
function _checkMouse(el, e) {
|
||||||
|
var related = e.relatedTarget;
|
||||||
|
|
||||||
|
if (!related) { return true; }
|
||||||
|
|
||||||
|
try {
|
||||||
|
while (related && (related !== el)) {
|
||||||
|
related = related.parentNode;
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return (related !== el);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function stopPropagation(e) {
|
||||||
|
if (e.stopPropagation) {
|
||||||
|
e.stopPropagation();
|
||||||
|
} else {
|
||||||
|
e.cancelBubble = true;
|
||||||
|
}
|
||||||
|
skipped(e);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function preventDefault(e) {
|
||||||
|
|
||||||
|
if (e.preventDefault) {
|
||||||
|
e.preventDefault();
|
||||||
|
} else {
|
||||||
|
e.returnValue = false;
|
||||||
|
}
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
var skipEvents = {};
|
||||||
|
|
||||||
|
export function skipped(e) {
|
||||||
|
var skipped = skipEvents[e.type];
|
||||||
|
// reset when checking, as it's only used in map container and propagates outside of the map
|
||||||
|
skipEvents[e.type] = false;
|
||||||
|
return skipped;
|
||||||
|
}
|
||||||
102
src/js/core/domUtil.js
Normal file
102
src/js/core/domUtil.js
Normal file
|
|
@ -0,0 +1,102 @@
|
||||||
|
import * as util from './utilities';
|
||||||
|
/*
|
||||||
|
* @namespace DomUtil
|
||||||
|
*
|
||||||
|
* Utility functions to work with the [DOM](https://developer.mozilla.org/docs/Web/API/Document_Object_Model)
|
||||||
|
* tree, used by Leaflet internally.
|
||||||
|
*
|
||||||
|
* Most functions expecting or returning a `HTMLElement` also work for
|
||||||
|
* SVG elements. The only difference is that classes refer to CSS classes
|
||||||
|
* in HTML and SVG classes in SVG.
|
||||||
|
*/
|
||||||
|
|
||||||
|
// @function get(id: String|HTMLElement): HTMLElement
|
||||||
|
// Returns an element given its DOM id, or returns the element itself
|
||||||
|
// if it was passed directly.
|
||||||
|
export function byId(id, doc) {
|
||||||
|
// inline'd type check.
|
||||||
|
// be sure to return null per documentation, to match IE branch.
|
||||||
|
return ((typeof id == "string") ? (doc || document).getElementById(id) : id) || null; // DOMNode
|
||||||
|
}
|
||||||
|
|
||||||
|
// @function empty(el: HTMLElement)
|
||||||
|
// Removes all of `el`'s children elements from `el`
|
||||||
|
export function empty(el) {
|
||||||
|
while (el.firstChild) {
|
||||||
|
el.removeChild(el.firstChild);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export function createDom(tagName, opt_attributes, parent_node) {
|
||||||
|
return _createDom(document, arguments);
|
||||||
|
}
|
||||||
|
|
||||||
|
function _createDom(doc, args) {
|
||||||
|
var tagName = args[0];
|
||||||
|
var attributes = args[1];
|
||||||
|
//var var_args = args[2];
|
||||||
|
|
||||||
|
var element = doc.createElement(tagName);
|
||||||
|
//var element = $(tagName);
|
||||||
|
|
||||||
|
if (attributes) {
|
||||||
|
if (typeof attributes === "string") {
|
||||||
|
element.className = attributes;
|
||||||
|
}
|
||||||
|
//else if ($.isArray(attributes)) {
|
||||||
|
// //goog.dom.classes.add.apply(null, [element].concat(attributes));
|
||||||
|
//}
|
||||||
|
else {
|
||||||
|
setProperties(element, attributes);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (args.length > 2) {
|
||||||
|
var parent_node = args[2];
|
||||||
|
parent_node.appendChild(element);
|
||||||
|
//parent_node.insertBefore(element, parent_node.firstChild)
|
||||||
|
}
|
||||||
|
|
||||||
|
return element;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function setProperties(element, properties) {
|
||||||
|
//goog.object.forEach(properties, function(val, key) {
|
||||||
|
// $.each(properties, function (key, val) {
|
||||||
|
for (let key in properties) {
|
||||||
|
// object.update();
|
||||||
|
// });
|
||||||
|
let val = properties[key];
|
||||||
|
if (key === 'style') {
|
||||||
|
element.style.cssText = val;
|
||||||
|
}
|
||||||
|
else if (key === 'class') {
|
||||||
|
element.className = val;
|
||||||
|
}
|
||||||
|
else if (key === 'for') {
|
||||||
|
element.htmlFor = val;
|
||||||
|
}
|
||||||
|
else if (key in ATTRIBUTE_MAP) {
|
||||||
|
element.setAttribute(ATTRIBUTE_MAP[key], val);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
element[key] = val;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let ATTRIBUTE_MAP = {
|
||||||
|
'cellpadding': 'cellPadding',
|
||||||
|
'cellspacing': 'cellSpacing',
|
||||||
|
'colspan': 'colSpan',
|
||||||
|
'frameborder': 'frameBorder',
|
||||||
|
'height': 'height',
|
||||||
|
'maxlength': 'maxLength',
|
||||||
|
'role': 'role',
|
||||||
|
'rowspan': 'rowSpan',
|
||||||
|
'type': 'type',
|
||||||
|
'usemap': 'useMap',
|
||||||
|
'valign': 'vAlign',
|
||||||
|
'width': 'width'
|
||||||
|
};
|
||||||
11
src/js/core/index.js
Normal file
11
src/js/core/index.js
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
export { Class } from './Class';
|
||||||
|
|
||||||
|
import { EventEmitter } from './Events';
|
||||||
|
export { EventEmitter };
|
||||||
|
|
||||||
|
import * as util from './utilities';
|
||||||
|
export { util };
|
||||||
|
export { setLoading, extend, showLoading, hideLoading, setOptions } from './utilities';
|
||||||
|
|
||||||
|
import * as dom from './dom';
|
||||||
|
export { dom };
|
||||||
143
src/js/core/utilities.js
Normal file
143
src/js/core/utilities.js
Normal file
|
|
@ -0,0 +1,143 @@
|
||||||
|
import * as dom from './domUtil';
|
||||||
|
/*
|
||||||
|
* @namespace util
|
||||||
|
*
|
||||||
|
* Various utility functions, used by GeptiefExplore internally.
|
||||||
|
*/
|
||||||
|
|
||||||
|
const LOADING_ID_PREFIX = "loading_";
|
||||||
|
|
||||||
|
export function setLoading(elemID) {
|
||||||
|
//debug("setting loading " + elemID);
|
||||||
|
|
||||||
|
//// 1) create the jQuery Deferred object that will be used
|
||||||
|
//var deferred = $.Deferred();
|
||||||
|
//var ownerDocumentBody = document.getElementById(elemID);
|
||||||
|
|
||||||
|
var loadingDivID = LOADING_ID_PREFIX + elemID;
|
||||||
|
//var loadingDivID = "loading_" + elemID;
|
||||||
|
var existingDiv = document.getElementById(loadingDivID);
|
||||||
|
//var existingDiv = dom.byId(loadingDivID);
|
||||||
|
|
||||||
|
|
||||||
|
// if the loading div for given element already exists,
|
||||||
|
// increment the lock attribute value (or create the attribute,
|
||||||
|
// if not exists)
|
||||||
|
if (existingDiv != null) {
|
||||||
|
//existingDiv.css("display", "inline");
|
||||||
|
//dom.setProperties(existingDiv, {
|
||||||
|
// style: "display: block"
|
||||||
|
//});
|
||||||
|
if (typeof (existingDiv.attr("lock")) === "undefined") {
|
||||||
|
existingDiv.attr("lock", 1);
|
||||||
|
} else {
|
||||||
|
existingDiv.attr("lock", parseInt(existingDiv.attr("lock")) + 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
// otherwise, create the div and append it to body
|
||||||
|
else {
|
||||||
|
// construct the div from markup
|
||||||
|
//var loadingDiv = dom.createDom("div", { id: loadingDivID, "class": "loading" }, ownerDocumentBody);
|
||||||
|
//var loadingDiv = $("<div id=\"" + loadingDivID + "\" class=\"loading\"></div>");
|
||||||
|
var loadingDiv = document.createElement('div');
|
||||||
|
loadingDiv.setAttribute("id", loadingDivID);
|
||||||
|
loadingDiv.setAttribute("class", "loading");
|
||||||
|
|
||||||
|
//var loadingDivContent = dom.createDom("div", { id: loadingDivID, innerHTML: myLabels.viewer.messages.waitMessage, "class": "loading-content" }, loadingDiv);
|
||||||
|
// var loadingDivContent = $("<div class=\"loading-content\">" + myLabels.viewer.messages.waitMessage + "</div>");
|
||||||
|
var loadingDivContent = document.createElement("div");
|
||||||
|
loadingDivContent.innerHTML = "Hi there and greetings!";
|
||||||
|
loadingDiv.appendChild(loadingDivContent);
|
||||||
|
|
||||||
|
// get the element to be covered with the loading div...
|
||||||
|
//var targetElement = $("#" + elemID);
|
||||||
|
var targetElement = document.getElementById(elemID);
|
||||||
|
|
||||||
|
// ... and get its proportions
|
||||||
|
// var offset = targetElement.offset();
|
||||||
|
var width = targetElement.offsetWidth
|
||||||
|
var height = targetElement.offsetHeight;
|
||||||
|
|
||||||
|
// make the div fit the target element
|
||||||
|
// loadingDiv.css({
|
||||||
|
// "left": targetElement.offsetLeft + "px",
|
||||||
|
// "top": targetElement.offsetTop + "px",
|
||||||
|
// "width": width + "px",
|
||||||
|
// "height": height + "px"
|
||||||
|
// });
|
||||||
|
//dom.setProperties(loadingDiv, {
|
||||||
|
// style: "width:" + width + "px; height:" + height + "px;"// left:" + offset.left + "px; top:" + offset.top + "px"
|
||||||
|
//});
|
||||||
|
loadingDiv.style.left = targetElement.offsetLeft + "px";
|
||||||
|
loadingDiv.style.top = targetElement.offsetTop + "px";
|
||||||
|
loadingDiv.style.width = width + "px";
|
||||||
|
loadingDiv.style.height = height + "px";
|
||||||
|
|
||||||
|
|
||||||
|
// make the text appear in the middle of the loading div
|
||||||
|
//dom.setProperties(loadingDivContent, {
|
||||||
|
// style: "line-height:" + height + "px;"
|
||||||
|
//});
|
||||||
|
// loadingDivContent.css({
|
||||||
|
// "line-height": height + "px"
|
||||||
|
// });
|
||||||
|
loadingDivContent.style.lineHeight = height + "px";
|
||||||
|
|
||||||
|
|
||||||
|
// $("body").append(loadingDiv);
|
||||||
|
//loadingDiv.appendTo('body');
|
||||||
|
document.body.appendChild(loadingDiv);
|
||||||
|
|
||||||
|
return loadingDiv;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// @function extend(dest: Object, src?: Object): Object
|
||||||
|
// extend an object with properties of one or more other objects
|
||||||
|
export function extend(dest) {
|
||||||
|
var i, j, len, src;
|
||||||
|
|
||||||
|
for (j = 1, len = arguments.length; j < len; j++) {
|
||||||
|
src = arguments[j];
|
||||||
|
for (i in src) {
|
||||||
|
dest[i] = src[i];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return dest;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function showLoading () {
|
||||||
|
var element = dom.byId("loadingImg");
|
||||||
|
//domUtil.show(_loading);
|
||||||
|
if (element) {
|
||||||
|
element.style.display = "block";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function hideLoading () {
|
||||||
|
var element = dom.byId("loadingImg");
|
||||||
|
if (element) {
|
||||||
|
element.style.display = "none";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Merges the given properties to the `options` of the `obj` object, returning the resulting options. See `Class options`
|
||||||
|
export function setOptions (obj, options) {
|
||||||
|
if (!Object.prototype.hasOwnProperty.call(obj, 'options')) {
|
||||||
|
obj.options = obj.options ? create(obj.options) : {};
|
||||||
|
}
|
||||||
|
for (var i in options) {
|
||||||
|
obj.options[i] = options[i];
|
||||||
|
}
|
||||||
|
return obj.options;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function stamp (){
|
||||||
|
var lastId = 0,
|
||||||
|
key = '_gba_id';
|
||||||
|
return function (obj) {
|
||||||
|
obj[key] = obj[key] || ++lastId;
|
||||||
|
return obj[key];
|
||||||
|
};
|
||||||
|
}
|
||||||
35
src/js/layer/BoxLayer.js
Normal file
35
src/js/layer/BoxLayer.js
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
import { BoxGeometry } from 'three/src/geometries/BoxGeometry';
|
||||||
|
import { MeshBasicMaterial } from 'three/src/materials/MeshBasicMaterial';
|
||||||
|
import { Mesh } from 'three/src/objects/Mesh';
|
||||||
|
import { Layer } from './Layer'
|
||||||
|
|
||||||
|
class BoxLayer extends Layer {
|
||||||
|
|
||||||
|
constructor(size) {
|
||||||
|
super();
|
||||||
|
|
||||||
|
this.geometry = new BoxGeometry(size.width, size.height, size.depth);
|
||||||
|
this.material = new MeshBasicMaterial({
|
||||||
|
color: 800080
|
||||||
|
});
|
||||||
|
|
||||||
|
this.mesh = new Mesh(this.geometry, this.material);
|
||||||
|
}
|
||||||
|
|
||||||
|
onAdd(map) {
|
||||||
|
this.build(this.getScene());
|
||||||
|
//this.update();
|
||||||
|
this.emit('add');
|
||||||
|
}
|
||||||
|
|
||||||
|
build(app_scene) {
|
||||||
|
// this.objects.push(layer);
|
||||||
|
app_scene.add(this.getMesh());
|
||||||
|
}
|
||||||
|
|
||||||
|
getMesh() {
|
||||||
|
return this.mesh;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export { BoxLayer };
|
||||||
16
src/js/layer/DxfLayer.js
Normal file
16
src/js/layer/DxfLayer.js
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { Group } from 'three/src/objects/Group';
|
||||||
|
|
||||||
|
class DxfLayer extends Layer {
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super();
|
||||||
|
|
||||||
|
this.objectGroup = new Group();
|
||||||
|
this.queryableObjects = [];
|
||||||
|
this.borderVisible = false;
|
||||||
|
this.declaredClass = "DxfLayer";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export { DxfLayer };
|
||||||
47
src/js/layer/Layer.js
Normal file
47
src/js/layer/Layer.js
Normal file
|
|
@ -0,0 +1,47 @@
|
||||||
|
import { EventEmitter } from '../core/EventEmitter';
|
||||||
|
|
||||||
|
class Layer extends EventEmitter {
|
||||||
|
|
||||||
|
options = {
|
||||||
|
pane: 'overlayPane',
|
||||||
|
nonBubblingEvents: [] // Array of events that should not be bubbled to DOM parents (like the map)
|
||||||
|
};
|
||||||
|
|
||||||
|
constructor(size) {
|
||||||
|
super();
|
||||||
|
}
|
||||||
|
|
||||||
|
addTo(map) {
|
||||||
|
map.addLayer(this);
|
||||||
|
return this;
|
||||||
|
}
|
||||||
|
|
||||||
|
_layerAdd(e) {
|
||||||
|
var map = e;//.target;
|
||||||
|
|
||||||
|
// check in case layer gets added and then removed before the map is ready
|
||||||
|
if (!map.hasLayer(this)) { return; }
|
||||||
|
|
||||||
|
this._map = map;
|
||||||
|
//this._zoomAnimated = map._zoomAnimated;
|
||||||
|
|
||||||
|
//if (this.getEvents) {
|
||||||
|
// map.on(this.getEvents(), this);
|
||||||
|
//}
|
||||||
|
|
||||||
|
this.onAdd(map);
|
||||||
|
|
||||||
|
//if (this.getAttribution && this._map.attributionControl) {
|
||||||
|
// this._map.attributionControl.addAttribution(this.getAttribution());
|
||||||
|
//}
|
||||||
|
//this.fire('add');
|
||||||
|
//map.fire('layeradd', { layer: this });
|
||||||
|
}
|
||||||
|
|
||||||
|
getScene() {
|
||||||
|
return this._map.scene;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export { Layer };
|
||||||
794
src/js/lib/OrbitControls.js
Normal file
794
src/js/lib/OrbitControls.js
Normal file
|
|
@ -0,0 +1,794 @@
|
||||||
|
import { Vector2 } from 'three/src/math/Vector2';
|
||||||
|
import { Vector3 } from 'three/src/math/Vector3';
|
||||||
|
import { EventEmitter } from '../core/EventEmitter';
|
||||||
|
import * as domEvent from '../core/domEvent';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* INTERNALS: Any functions not added to the OrbitControls reference won't be visible, or accessible outside of
|
||||||
|
* this file (closure); however, these methods and functions don't belong to the OrbitControls class either
|
||||||
|
* and are static as a result.
|
||||||
|
*/
|
||||||
|
var EPS = 0.000001;
|
||||||
|
var mouseDownPoint = new Vector2();
|
||||||
|
var mouseUpPoint = new Vector2();
|
||||||
|
var rotateStart = new Vector2();
|
||||||
|
var rotateEnd = new Vector2();
|
||||||
|
var rotateDelta = new Vector2();
|
||||||
|
var panStart = new Vector2();
|
||||||
|
var panEnd = new Vector2();
|
||||||
|
var panDelta = new Vector2();
|
||||||
|
|
||||||
|
var panOffset = new Vector3();
|
||||||
|
var offset = new Vector3();
|
||||||
|
|
||||||
|
var dollyStart = new Vector2();
|
||||||
|
var dollyEnd = new Vector2();
|
||||||
|
var dollyDelta = new Vector2();
|
||||||
|
|
||||||
|
var phiDelta = 0;
|
||||||
|
var thetaDelta = 0;
|
||||||
|
var scale = 1;
|
||||||
|
var pan = new Vector3();
|
||||||
|
|
||||||
|
var lastPosition = new Vector3();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var STATE = { NONE: -1, ROTATE: 0, DOLLY: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_DOLLY: 4, TOUCH_PAN: 5, CAMERA_ROTATE: 6 };
|
||||||
|
var state = STATE.NONE;
|
||||||
|
|
||||||
|
class OrbitControls extends EventEmitter {
|
||||||
|
|
||||||
|
object;
|
||||||
|
domElement;
|
||||||
|
scene;
|
||||||
|
enabled;
|
||||||
|
target;
|
||||||
|
center;
|
||||||
|
noZoom;
|
||||||
|
zoomSpeed;
|
||||||
|
minDistance;
|
||||||
|
maxDistance;
|
||||||
|
upsideDown;
|
||||||
|
|
||||||
|
|
||||||
|
noRotate;
|
||||||
|
rotateSpeed;
|
||||||
|
keyRotateAngle;
|
||||||
|
noPan;
|
||||||
|
keyPanSpeed;
|
||||||
|
|
||||||
|
autoRotateSpeed;
|
||||||
|
|
||||||
|
minPolarAngle;
|
||||||
|
maxPolarAngle;
|
||||||
|
|
||||||
|
noKeys;
|
||||||
|
keys;
|
||||||
|
|
||||||
|
|
||||||
|
target0;
|
||||||
|
position0;
|
||||||
|
|
||||||
|
rotateDifference;
|
||||||
|
|
||||||
|
constructor(camera, scene, domElement) {
|
||||||
|
super();
|
||||||
|
|
||||||
|
this.object = camera;
|
||||||
|
this.domElement = (domElement !== undefined) ? domElement : document;
|
||||||
|
this.scene = scene;
|
||||||
|
|
||||||
|
// Set to false to disable this control
|
||||||
|
this.enabled = true;
|
||||||
|
|
||||||
|
// "target" sets the location of focus, where the control orbits around
|
||||||
|
// and where it pans with respect to.
|
||||||
|
this.target = new Vector3();
|
||||||
|
// center is old, deprecated; use "target" instead
|
||||||
|
this.center = this.target;
|
||||||
|
|
||||||
|
// This option actually enables dollying in and out; left as "zoom" for
|
||||||
|
// backwards compatibility
|
||||||
|
this.noZoom = false;
|
||||||
|
this.zoomSpeed = 1.0;
|
||||||
|
|
||||||
|
// Limits to how far you can dolly in and out
|
||||||
|
this.minDistance = 0;
|
||||||
|
this.maxDistance = Infinity;
|
||||||
|
|
||||||
|
// Set to true for upside down
|
||||||
|
this.upsideDown = false;
|
||||||
|
this.object.up.set(0, 0, 1);
|
||||||
|
|
||||||
|
// Set to true to disable this control
|
||||||
|
this.noRotate = false;
|
||||||
|
this.rotateSpeed = 1.0;
|
||||||
|
this.keyRotateAngle = Math.PI / 90;
|
||||||
|
|
||||||
|
// Set to true to disable this control
|
||||||
|
this.noPan = false;
|
||||||
|
this.keyPanSpeed = 7.0; // pixels moved per arrow key push
|
||||||
|
|
||||||
|
// // Set to true to automatically rotate around the target
|
||||||
|
// this.autoRotate = false;
|
||||||
|
this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60
|
||||||
|
|
||||||
|
// How far you can orbit vertically, upper and lower limits.
|
||||||
|
// Range is 0 to Math.PI radians.
|
||||||
|
this.minPolarAngle = 0; // radians
|
||||||
|
this.maxPolarAngle = Math.PI; // radians
|
||||||
|
|
||||||
|
// Set to true to disable use of the keys
|
||||||
|
this.noKeys = false;
|
||||||
|
|
||||||
|
// The four arrow keys and additional keys
|
||||||
|
this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40, AUTOROTATE: 82, UPSIDEDOWN: 85, RESET: 82 };
|
||||||
|
|
||||||
|
// for reset
|
||||||
|
this.target0 = this.target.clone();
|
||||||
|
this.position0 = this.object.position.clone();
|
||||||
|
|
||||||
|
this._initEvents('on');
|
||||||
|
}
|
||||||
|
|
||||||
|
_initEvents(onOff) {
|
||||||
|
if (!domEvent) { return; }
|
||||||
|
|
||||||
|
onOff = onOff || 'on';
|
||||||
|
|
||||||
|
//this.domElement.addEventListener('contextmenu', function (event) { event.preventDefault(); }, false);
|
||||||
|
domEvent
|
||||||
|
[onOff](this.domElement, 'contextmenu', domEvent.stopPropagation)
|
||||||
|
[onOff](this.domElement, 'contextmenu', domEvent.preventDefault);
|
||||||
|
|
||||||
|
|
||||||
|
//this.domElement.addEventListener('mousedown', onMouseDown, false);
|
||||||
|
domEvent
|
||||||
|
[onOff](this.domElement, 'mousedown', domEvent.stopPropagation)
|
||||||
|
[onOff](this.domElement, 'click', domEvent.stopPropagation)
|
||||||
|
[onOff](this.domElement, 'dblclick', domEvent.stopPropagation)
|
||||||
|
[onOff](this.domElement, 'mousedown', domEvent.preventDefault)
|
||||||
|
[onOff](this.domElement, 'mousedown', this.onMouseDown, this);
|
||||||
|
|
||||||
|
//this.domElement.addEventListener('mousewheel', onMouseWheel, false);
|
||||||
|
domEvent
|
||||||
|
[onOff](this.domElement, 'mousewheel', domEvent.preventDefault)
|
||||||
|
[onOff](this.domElement, 'mousewheel', domEvent.stopPropagation)
|
||||||
|
[onOff](this.domElement, 'mousewheel', this.onMouseWheel, this);
|
||||||
|
|
||||||
|
//this.domElement.addEventListener('DOMMouseScroll', onMouseWheel, false); // firefox
|
||||||
|
domEvent
|
||||||
|
[onOff](this.domElement, 'DOMMouseScroll', domEvent.preventDefault)
|
||||||
|
[onOff](this.domElement, 'DOMMouseScroll', domEvent.stopPropagation)
|
||||||
|
[onOff](this.domElement, 'DOMMouseScroll', this.onMouseWheel, this);
|
||||||
|
|
||||||
|
|
||||||
|
//window.addEventListener('keydown', onKeyDown, false);
|
||||||
|
domEvent
|
||||||
|
[onOff](window, 'keydown', domEvent.stopPropagation)
|
||||||
|
[onOff](window, 'keydown', domEvent.preventDefault)
|
||||||
|
[onOff](window, 'keydown', this.onKeyDown, this);
|
||||||
|
|
||||||
|
//this.domElement.addEventListener('mousemove', onMouseMove, false);
|
||||||
|
domEvent[onOff](this.domElement, 'mousemove', this.onMouseMove, this);
|
||||||
|
|
||||||
|
//this.domElement.addEventListener('touchstart', touchstart, false);
|
||||||
|
domEvent[onOff](this.domElement, 'touchstart', this.onTouchStart, this);
|
||||||
|
//this.domElement.addEventListener('touchend', touchend, false);
|
||||||
|
domEvent[onOff](this.domElement, 'touchend', this.onTouchEnd, this);
|
||||||
|
//this.domElement.addEventListener('touchmove', touchmove, false);
|
||||||
|
domEvent[onOff](this.domElement, 'touchmove', this.onTouchMove, this);
|
||||||
|
|
||||||
|
domEvent[onOff](this.domElement, 'mouseleave', this.onMouseLeave, this);
|
||||||
|
}
|
||||||
|
|
||||||
|
_getZoomScale() {
|
||||||
|
return Math.pow(0.95, this.zoomSpeed);
|
||||||
|
}
|
||||||
|
|
||||||
|
_AutoRotationAngle() {
|
||||||
|
return 2 * Math.PI / 60 / 60 * this.autoRotateSpeed;
|
||||||
|
}
|
||||||
|
|
||||||
|
rotateLeft(angle) {
|
||||||
|
if (angle === undefined) {
|
||||||
|
angle = this._AutoRotationAngle();
|
||||||
|
}
|
||||||
|
thetaDelta += angle;
|
||||||
|
}
|
||||||
|
|
||||||
|
rotateUp(angle) {
|
||||||
|
if (angle === undefined) {
|
||||||
|
angle = this._AutoRotationAngle();
|
||||||
|
}
|
||||||
|
phiDelta -= angle;
|
||||||
|
}
|
||||||
|
|
||||||
|
// pass in distance in world space to move left
|
||||||
|
panLeft(distance) {
|
||||||
|
var te = this.object.matrix.elements;
|
||||||
|
|
||||||
|
// get X column of matrix
|
||||||
|
panOffset.set(te[0], te[1], te[2]);
|
||||||
|
panOffset.multiplyScalar(-distance);
|
||||||
|
|
||||||
|
pan.add(panOffset);
|
||||||
|
}
|
||||||
|
|
||||||
|
// pass in distance in world space to move up
|
||||||
|
panUp(distance) {
|
||||||
|
var te = this.object.matrix.elements;
|
||||||
|
|
||||||
|
// get Y column of matrix
|
||||||
|
panOffset.set(te[4], te[5], te[6]);
|
||||||
|
panOffset.multiplyScalar(distance);
|
||||||
|
|
||||||
|
pan.add(panOffset);
|
||||||
|
}
|
||||||
|
|
||||||
|
// pass in x,y of change desired in pixel space,
|
||||||
|
// right and down are positive
|
||||||
|
pan(deltaX, deltaY) {
|
||||||
|
var element = this.domElement === document ? this.domElement.body : this.domElement;
|
||||||
|
|
||||||
|
if (this.object.fov !== undefined) {
|
||||||
|
|
||||||
|
// perspective
|
||||||
|
var position = this.object.position;
|
||||||
|
var offset = position.clone().sub(this.target);
|
||||||
|
var targetDistance = offset.length();
|
||||||
|
|
||||||
|
// half of the fov is center to top of screen
|
||||||
|
targetDistance *= Math.tan((this.object.fov / 2) * Math.PI / 180.0);
|
||||||
|
|
||||||
|
// we actually don't use screenWidth, since perspective camera is fixed to screen height
|
||||||
|
this.panLeft(2 * deltaX * targetDistance / element.clientHeight);
|
||||||
|
this.panUp(2 * deltaY * targetDistance / element.clientHeight);
|
||||||
|
|
||||||
|
}
|
||||||
|
else if (this.object.top !== undefined) {
|
||||||
|
|
||||||
|
// orthographic
|
||||||
|
this.panLeft(deltaX * (this.object.right - this.object.left) / element.clientWidth);
|
||||||
|
this.panUp(deltaY * (this.object.top - this.object.bottom) / element.clientHeight);
|
||||||
|
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// camera neither orthographic or perspective
|
||||||
|
console.warn('WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
moveForward(delta) {
|
||||||
|
var element = this.domElement === document ? this.domElement.body : this.domElement;
|
||||||
|
|
||||||
|
panOffset.copy(this.object.position).sub(this.target);
|
||||||
|
var targetDistance = panOffset.length() * Math.tan((this.object.fov / 2) * Math.PI / 180.0);
|
||||||
|
panOffset.z = 0;
|
||||||
|
panOffset.normalize();
|
||||||
|
panOffset.multiplyScalar(-2 * delta * targetDistance / element.clientHeight);
|
||||||
|
|
||||||
|
pan.add(panOffset);
|
||||||
|
}
|
||||||
|
|
||||||
|
dollyIn(dollyScale) {
|
||||||
|
if (dollyScale === undefined) {
|
||||||
|
dollyScale = this._getZoomScale();
|
||||||
|
}
|
||||||
|
scale /= dollyScale;
|
||||||
|
this.update();
|
||||||
|
}
|
||||||
|
|
||||||
|
dollyOut(dollyScale) {
|
||||||
|
if (dollyScale === undefined) {
|
||||||
|
dollyScale = this._getZoomScale();
|
||||||
|
}
|
||||||
|
scale *= dollyScale;
|
||||||
|
this.update();
|
||||||
|
}
|
||||||
|
|
||||||
|
update() {
|
||||||
|
var position = this.object.position; //x = 0, y = -100, z = 200;
|
||||||
|
|
||||||
|
// move target to panned location
|
||||||
|
this.target.add(pan);//target ist am Anfang immer x = 0; y = 0; z = 0;
|
||||||
|
//auch pan ist am Anfang immer x = 0; y = 0; z = 0;
|
||||||
|
|
||||||
|
//if (this.autoRotate) { //R
|
||||||
|
// this.rotateLeft(getAutoRotationAngle());
|
||||||
|
//}
|
||||||
|
var theta, phi, radius;
|
||||||
|
//if rotate:
|
||||||
|
if (thetaDelta || phiDelta) {
|
||||||
|
|
||||||
|
offset.copy(position).sub(this.target);
|
||||||
|
|
||||||
|
// angle from y-axis around z-axis
|
||||||
|
theta = Math.atan2(offset.x, offset.y);
|
||||||
|
|
||||||
|
// angle from z-axis
|
||||||
|
phi = Math.atan2(Math.sqrt(offset.x * offset.x + offset.y * offset.y), offset.z);
|
||||||
|
|
||||||
|
theta += thetaDelta;
|
||||||
|
phi += phiDelta;
|
||||||
|
|
||||||
|
// restrict phi to be between desired limits
|
||||||
|
phi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, phi));
|
||||||
|
|
||||||
|
// restrict phi to be betwee EPS and PI-EPS
|
||||||
|
phi = Math.max(EPS, Math.min(Math.PI - EPS, phi));
|
||||||
|
|
||||||
|
radius = offset.length() * scale;
|
||||||
|
|
||||||
|
// restrict radius to be between desired limits
|
||||||
|
radius = Math.max(this.minDistance, Math.min(this.maxDistance, radius));
|
||||||
|
|
||||||
|
offset.x = radius * Math.sin(phi) * Math.sin(theta);
|
||||||
|
offset.y = radius * Math.sin(phi) * Math.cos(theta);
|
||||||
|
offset.z = radius * Math.cos(phi);
|
||||||
|
|
||||||
|
position.copy(this.target).add(offset);
|
||||||
|
|
||||||
|
}
|
||||||
|
//else if (cameraThetaDelta || cameraPhiDelta) {
|
||||||
|
|
||||||
|
// offset.copy(this.target).sub(position);
|
||||||
|
|
||||||
|
// // angle from y-axis around z-axis
|
||||||
|
// theta = Math.atan2(offset.x, offset.y);
|
||||||
|
|
||||||
|
// // angle from z-axis
|
||||||
|
// phi = Math.atan2(Math.sqrt(offset.x * offset.x + offset.y * offset.y), offset.z);
|
||||||
|
|
||||||
|
// theta += cameraThetaDelta;
|
||||||
|
// phi += cameraPhiDelta;
|
||||||
|
|
||||||
|
// // restrict phi to be between desired limits
|
||||||
|
// phi = Math.max(this.minPolarAngle, Math.min(this.maxPolarAngle, phi));
|
||||||
|
|
||||||
|
// // restrict phi to be betwee EPS and PI-EPS
|
||||||
|
// phi = Math.max(EPS, Math.min(Math.PI - EPS, phi));
|
||||||
|
|
||||||
|
// radius = offset.length() * scale;
|
||||||
|
|
||||||
|
// // restrict radius to be between desired limits
|
||||||
|
// radius = Math.max(this.minDistance, Math.min(this.maxDistance, radius));
|
||||||
|
|
||||||
|
// offset.x = radius * Math.sin(phi) * Math.sin(theta);
|
||||||
|
// offset.y = radius * Math.sin(phi) * Math.cos(theta);
|
||||||
|
// offset.z = radius * Math.cos(phi);
|
||||||
|
|
||||||
|
// this.target.copy(position).add(offset);
|
||||||
|
|
||||||
|
//}
|
||||||
|
else if (scale !== 1) {
|
||||||
|
|
||||||
|
offset.copy(position).sub(this.target);
|
||||||
|
|
||||||
|
offset.multiplyScalar(scale);
|
||||||
|
position.copy(this.target).add(offset);
|
||||||
|
|
||||||
|
}
|
||||||
|
//pan
|
||||||
|
else {
|
||||||
|
position.add(pan);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.object.lookAt(this.target);
|
||||||
|
|
||||||
|
thetaDelta = 0;
|
||||||
|
phiDelta = 0;
|
||||||
|
// cameraThetaDelta = 0;
|
||||||
|
// cameraPhiDelta = 0;
|
||||||
|
scale = 1;
|
||||||
|
pan.set(0, 0, 0);
|
||||||
|
|
||||||
|
if (lastPosition.distanceTo(this.object.position) > 0) {
|
||||||
|
//this.dispatchEvent(changeEvent);
|
||||||
|
//scope.emit("change");
|
||||||
|
lastPosition.copy(this.object.position);
|
||||||
|
}
|
||||||
|
this.emit("change", lastPosition);
|
||||||
|
}
|
||||||
|
|
||||||
|
reset() {
|
||||||
|
state = STATE.NONE;
|
||||||
|
this.target.copy(this.target0);//0 0 0
|
||||||
|
this.object.position.copy(this.position0);
|
||||||
|
//this.object.position.set(0, 0, 180);
|
||||||
|
this.update();
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseDown(event) {
|
||||||
|
if (this.enabled === false) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.rotateDifference = 0;
|
||||||
|
event.preventDefault();
|
||||||
|
//2d vector:
|
||||||
|
mouseDownPoint.set(event.clientX, event.clientY);
|
||||||
|
|
||||||
|
//linke Maustaste
|
||||||
|
if (event.button === 0) {
|
||||||
|
if (this.noRotate === true) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
state = STATE.ROTATE;
|
||||||
|
rotateStart.set(event.clientX, event.clientY);
|
||||||
|
this.emit("mousedown", event);
|
||||||
|
}
|
||||||
|
else if (event.button === 1) {
|
||||||
|
if (this.noZoom === true) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
state = STATE.DOLLY;
|
||||||
|
//2d vector:
|
||||||
|
dollyStart.set(event.clientX, event.clientY);
|
||||||
|
}
|
||||||
|
//rechte Maustaste
|
||||||
|
else if (event.button === 2) {
|
||||||
|
if (this.noPan === true) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
state = STATE.PAN;
|
||||||
|
panStart.set(event.clientX, event.clientY);
|
||||||
|
}
|
||||||
|
|
||||||
|
//this.domElement.addEventListener('mousemove', onMouseDrag, false);
|
||||||
|
domEvent.on(this.domElement, 'mousemove', this.onMouseDrag, this);
|
||||||
|
|
||||||
|
//this.domElement.addEventListener('mouseup', onMouseUp, false);
|
||||||
|
domEvent.on(this.domElement, 'mouseup', this.onMouseUp, this);
|
||||||
|
|
||||||
|
//scope.dispatchEvent(startEvent);
|
||||||
|
this.emit('movestart', null);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseMove(event) {
|
||||||
|
this.emit('mouse-move', event);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseDrag(event) {
|
||||||
|
if (this.enabled === false) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
var element = this.domElement === document ? this.domElement.body : this.domElement;
|
||||||
|
|
||||||
|
if (state === STATE.ROTATE) {
|
||||||
|
|
||||||
|
if (this.noRotate === true) return;
|
||||||
|
|
||||||
|
rotateEnd.set(event.clientX, event.clientY);
|
||||||
|
rotateDelta.subVectors(rotateEnd, rotateStart);
|
||||||
|
|
||||||
|
// rotating across whole screen goes 360 degrees around
|
||||||
|
this.rotateLeft(2 * Math.PI * rotateDelta.x / element.clientWidth * this.rotateSpeed);
|
||||||
|
|
||||||
|
// rotating up and down along whole screen attempts to go 360, but limited to 180
|
||||||
|
this.rotateUp(2 * Math.PI * rotateDelta.y / element.clientHeight * this.rotateSpeed);
|
||||||
|
|
||||||
|
this.rotateDifference = rotateStart.distanceTo(rotateEnd);
|
||||||
|
rotateStart.copy(rotateEnd);
|
||||||
|
this.emit("mouse-pan", event);
|
||||||
|
}
|
||||||
|
else if (state === STATE.DOLLY) {
|
||||||
|
|
||||||
|
if (this.noZoom === true) return;
|
||||||
|
|
||||||
|
dollyEnd.set(event.clientX, event.clientY);
|
||||||
|
dollyDelta.subVectors(dollyEnd, dollyStart);
|
||||||
|
|
||||||
|
if (dollyDelta.y > 0) {
|
||||||
|
this.dollyIn();
|
||||||
|
|
||||||
|
} else {
|
||||||
|
this.dollyOut();
|
||||||
|
}
|
||||||
|
dollyStart.copy(dollyEnd);
|
||||||
|
|
||||||
|
}
|
||||||
|
else if (state === STATE.PAN) {
|
||||||
|
|
||||||
|
if (this.noPan === true) return;
|
||||||
|
panEnd.set(event.clientX, event.clientY);
|
||||||
|
panDelta.subVectors(panEnd, panStart);
|
||||||
|
|
||||||
|
this.pan(panDelta.x, panDelta.y);
|
||||||
|
panStart.copy(panEnd);
|
||||||
|
|
||||||
|
this.emit("mouse-pan", event);
|
||||||
|
}
|
||||||
|
//scope.emit('mouse-move', event);
|
||||||
|
this.update();
|
||||||
|
} //onMouseDrag end
|
||||||
|
|
||||||
|
onMouseUp(event) {
|
||||||
|
if (this.enabled === false) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
//this.domElement.removeEventListener('mousemove', onMouseDrag, false);
|
||||||
|
domEvent.off(this.domElement, 'mousemove', this.onMouseDrag);
|
||||||
|
//this.domElement.removeEventListener('mouseup', onMouseUp, false);
|
||||||
|
domEvent.off(this.domElement, 'mouseup', this.onMouseUp);
|
||||||
|
|
||||||
|
|
||||||
|
//scope.dispatchEvent(endEvent);
|
||||||
|
state = STATE.NONE;
|
||||||
|
|
||||||
|
mouseUpPoint.set(event.clientX, event.clientY);
|
||||||
|
|
||||||
|
//var distance = mouseDownPoint.distanceTo(mouseUpPoint);
|
||||||
|
//linke Maustaste
|
||||||
|
if (event.button === 0 && mouseDownPoint.equals(mouseUpPoint)) {// && Math.abs(this.rotateDifference) === 0 ) {
|
||||||
|
//if (event.button === 0 && (Math.abs(distance) < 9 * (window.devicePixelRatio || 1)) ) {
|
||||||
|
|
||||||
|
|
||||||
|
this.emit("clicked", event);
|
||||||
|
//Q3D.application.canvasClicked(event);
|
||||||
|
}
|
||||||
|
} //onMoseUp end
|
||||||
|
|
||||||
|
onMouseWheel(event) {
|
||||||
|
if (this.enabled === false || this.noZoom === true) return;
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
var delta = 0;
|
||||||
|
if (event.wheelDelta !== undefined) { // WebKit / Opera / Explorer 9
|
||||||
|
delta = event.wheelDelta;
|
||||||
|
}
|
||||||
|
else if (event.detail !== undefined) { // Firefox
|
||||||
|
delta = - event.detail;
|
||||||
|
}
|
||||||
|
if (delta > 0) {
|
||||||
|
this.dollyOut();
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this.dollyIn();
|
||||||
|
}
|
||||||
|
this.update();
|
||||||
|
//scope.dispatchEvent(startEvent);
|
||||||
|
//scope.dispatchEvent(endEvent);
|
||||||
|
}
|
||||||
|
|
||||||
|
onMouseLeave(event) {
|
||||||
|
domEvent.off(this.domElement, 'mousemove', this.onMouseDrag);
|
||||||
|
//this.domElement.removeEventListener('mouseup', onMouseUp, false);
|
||||||
|
domEvent.off(this.domElement, 'mouseup', this.onMouseUp);
|
||||||
|
}
|
||||||
|
|
||||||
|
onKeyDown(event) {
|
||||||
|
if (this.enabled === false || this.noKeys === true || this.noPan === true) return;
|
||||||
|
|
||||||
|
if (event.shiftKey && event.ctrlKey) {
|
||||||
|
//zoom +
|
||||||
|
if (event.keyCode === this.keys.UP) this.dollyOut();
|
||||||
|
else if (event.keyCode === this.keys.BOTTOM) this.dollyIn();
|
||||||
|
else return;
|
||||||
|
|
||||||
|
}
|
||||||
|
else if (event.shiftKey) {
|
||||||
|
|
||||||
|
switch (event.keyCode) {
|
||||||
|
|
||||||
|
case this.keys.UP:
|
||||||
|
this.rotateUp(this.keyRotateAngle);
|
||||||
|
break;
|
||||||
|
case this.keys.BOTTOM:
|
||||||
|
this.rotateUp(-this.keyRotateAngle);
|
||||||
|
break;
|
||||||
|
case this.keys.LEFT:
|
||||||
|
this.rotateLeft(-this.keyRotateAngle);
|
||||||
|
break;
|
||||||
|
case this.keys.RIGHT:
|
||||||
|
this.rotateLeft(this.keyRotateAngle);
|
||||||
|
break;
|
||||||
|
//neu
|
||||||
|
case this.keys.RESET:
|
||||||
|
this.reset();
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else if (event.ctrlKey) {
|
||||||
|
|
||||||
|
switch (event.keyCode) {
|
||||||
|
|
||||||
|
case this.keys.UP:
|
||||||
|
this.rotateUp(this.keyRotateAngle);
|
||||||
|
break;
|
||||||
|
case this.keys.BOTTOM:
|
||||||
|
this.rotateUp(-this.keyRotateAngle);
|
||||||
|
break;
|
||||||
|
case this.keys.LEFT:
|
||||||
|
this.rotateLeft(this.keyRotateAngle);
|
||||||
|
break;
|
||||||
|
case this.keys.RIGHT:
|
||||||
|
this.rotateLeft(-this.keyRotateAngle);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
|
||||||
|
switch (event.keyCode) {
|
||||||
|
|
||||||
|
case this.keys.UP:
|
||||||
|
this.moveForward(-this.keyPanSpeed);
|
||||||
|
break;
|
||||||
|
case this.keys.BOTTOM:
|
||||||
|
this.moveForward(+this.keyPanSpeed);
|
||||||
|
break;
|
||||||
|
case this.keys.LEFT:
|
||||||
|
this.pan(-this.keyPanSpeed, 0);
|
||||||
|
break;
|
||||||
|
case this.keys.RIGHT:
|
||||||
|
this.pan(+this.keyPanSpeed, 0);
|
||||||
|
break;
|
||||||
|
//case scope.keys.AUTOROTATE: //R
|
||||||
|
// scope.autoRotate = !scope.autoRotate;
|
||||||
|
// break;
|
||||||
|
case this.keys.UPSIDEDOWN:
|
||||||
|
this.upsideDown = !this.upsideDown;
|
||||||
|
if (this.upsideDown) this.object.up.set(0, 0, -1);
|
||||||
|
else this.object.up.set(0, 0, 1);
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.update();
|
||||||
|
}
|
||||||
|
|
||||||
|
onTouchStart(event) {
|
||||||
|
if (this.enabled === false) return;
|
||||||
|
|
||||||
|
switch (event.touches.length) {
|
||||||
|
|
||||||
|
case 1: // one-fingered touch: rotate
|
||||||
|
|
||||||
|
//if (scope.enableRotate === false) return;
|
||||||
|
if (this.noRotate === true) return;
|
||||||
|
|
||||||
|
state = STATE.TOUCH_ROTATE;
|
||||||
|
|
||||||
|
rotateStart.set(event.touches[0].pageX, event.touches[0].pageY);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 2: // two-fingered touch: dolly
|
||||||
|
|
||||||
|
//if ( scope.enableZoom === false ) return;
|
||||||
|
if (this.noZoom === true) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
state = STATE.TOUCH_DOLLY;
|
||||||
|
|
||||||
|
var dx = event.touches[0].pageX - event.touches[1].pageX;
|
||||||
|
var dy = event.touches[0].pageY - event.touches[1].pageY;
|
||||||
|
var distance = Math.sqrt(dx * dx + dy * dy);
|
||||||
|
dollyStart.set(0, distance);
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 3: // three-fingered touch: pan
|
||||||
|
|
||||||
|
//if ( scope.enablePan === false ) return;
|
||||||
|
if (this.noPan === true) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
state = STATE.TOUCH_PAN;
|
||||||
|
|
||||||
|
panStart.set(event.touches[0].pageX, event.touches[0].pageY);
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
|
||||||
|
state = STATE.NONE;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//if ( state !== STATE.NONE ) scope.dispatchEvent( startEvent );
|
||||||
|
if (state !== STATE.NONE) {
|
||||||
|
this.emit('touchstart', null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onTouchMove(event) {
|
||||||
|
if (this.enabled === false) return;
|
||||||
|
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
|
||||||
|
var element = this.domElement === document ? this.domElement.body : this.domElement;
|
||||||
|
|
||||||
|
switch (event.touches.length) {
|
||||||
|
|
||||||
|
case 1: // one-fingered touch: rotate
|
||||||
|
|
||||||
|
//if (scope.enableRotate === false) return;
|
||||||
|
if (this.noRotate === true) return;
|
||||||
|
if (state !== STATE.TOUCH_ROTATE) return;
|
||||||
|
|
||||||
|
rotateEnd.set(event.touches[0].pageX, event.touches[0].pageY);
|
||||||
|
rotateDelta.subVectors(rotateEnd, rotateStart);
|
||||||
|
|
||||||
|
// rotating across whole screen goes 360 degrees around
|
||||||
|
this.rotateLeft(2 * Math.PI * rotateDelta.x / element.clientWidth * this.rotateSpeed);
|
||||||
|
// rotating up and down along whole screen attempts to go 360, but limited to 180
|
||||||
|
this.rotateUp(2 * Math.PI * rotateDelta.y / element.clientHeight * this.rotateSpeed);
|
||||||
|
|
||||||
|
rotateStart.copy(rotateEnd);
|
||||||
|
this.emit("mouse-pan", event);
|
||||||
|
|
||||||
|
this.update();
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 2: // two-fingered touch: dolly
|
||||||
|
|
||||||
|
//if (scope.enableZoom === false) return;
|
||||||
|
if (this.noZoom === true) return;
|
||||||
|
if (state !== STATE.TOUCH_DOLLY) return;
|
||||||
|
|
||||||
|
var dx = event.touches[0].pageX - event.touches[1].pageX;
|
||||||
|
var dy = event.touches[0].pageY - event.touches[1].pageY;
|
||||||
|
var distance = Math.sqrt(dx * dx + dy * dy);
|
||||||
|
|
||||||
|
dollyEnd.set(0, distance);
|
||||||
|
dollyDelta.subVectors(dollyEnd, dollyStart);
|
||||||
|
|
||||||
|
if (dollyDelta.y > 0) {
|
||||||
|
|
||||||
|
this.dollyOut(this._getZoomScale());
|
||||||
|
|
||||||
|
}
|
||||||
|
else if (dollyDelta.y < 0) {
|
||||||
|
this.dollyIn(this._getZoomScale());
|
||||||
|
}
|
||||||
|
dollyStart.copy(dollyEnd);
|
||||||
|
this.emit("mouse-pan", event);
|
||||||
|
|
||||||
|
this.update();
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 3: // three-fingered touch: pan
|
||||||
|
|
||||||
|
//if (scope.enablePan === false) return;
|
||||||
|
if (this.noPan === true) return;
|
||||||
|
if (state !== STATE.TOUCH_PAN) return;
|
||||||
|
|
||||||
|
panEnd.set(event.touches[0].pageX, event.touches[0].pageY);
|
||||||
|
panDelta.subVectors(panEnd, panStart);
|
||||||
|
|
||||||
|
this.pan(panDelta.x, panDelta.y);
|
||||||
|
|
||||||
|
panStart.copy(panEnd);
|
||||||
|
|
||||||
|
this.update();
|
||||||
|
break;
|
||||||
|
|
||||||
|
default:
|
||||||
|
|
||||||
|
state = STATE.NONE;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onTouchEnd( /* event */) {
|
||||||
|
if (this.enabled === false) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
//scope.dispatchEvent(endEvent);
|
||||||
|
this.emit('touchend', null);
|
||||||
|
state = STATE.NONE;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export { OrbitControls };
|
||||||
158
src/js/main.js
Normal file
158
src/js/main.js
Normal file
|
|
@ -0,0 +1,158 @@
|
||||||
|
// 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 * as util from './core/utilities';
|
||||||
|
// import { OrbitControls } from './lib/OrbitControls.js'
|
||||||
|
import { Map } from './core/Map';
|
||||||
|
import * as domEvent from './core/domEvent';
|
||||||
|
|
||||||
|
import '../css/page.css'; /* style loader will import it */
|
||||||
|
|
||||||
|
class Application {
|
||||||
|
|
||||||
|
constructor(container) {
|
||||||
|
this.container = container;
|
||||||
|
this.running = false; // this is public
|
||||||
|
|
||||||
|
this.objects = [];
|
||||||
|
|
||||||
|
if (container.clientWidth && container.clientHeight) {
|
||||||
|
this.width = container.clientWidth;
|
||||||
|
this.height = container.clientHeight;
|
||||||
|
this._fullWindow = false;
|
||||||
|
} else {
|
||||||
|
this.width = window.innerWidth;
|
||||||
|
this.height = window.innerHeight;
|
||||||
|
this._fullWindow = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.createScene();
|
||||||
|
}
|
||||||
|
|
||||||
|
createScene() {
|
||||||
|
|
||||||
|
/* Renderer */
|
||||||
|
var bgcolor = 0xfdfdfd;
|
||||||
|
this.renderer = new WebGLRenderer({ alpha: true, antialias: true });
|
||||||
|
// 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
|
||||||
|
this.renderer.render
|
||||||
|
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));
|
||||||
|
this._buildDefaultLights(this.scene);
|
||||||
|
//app.scene.autoUpdate = false;
|
||||||
|
//// show axes in the screen
|
||||||
|
//app.scene.add(new THREE.AxisHelper(100));
|
||||||
|
|
||||||
|
/* Camera */
|
||||||
|
var angle = 45;
|
||||||
|
var aspect = this.width / this.height;
|
||||||
|
var near = 0.1; //This is the distance at which the camera will start rendering scene objects
|
||||||
|
var far = 2000; //Anything beyond this distance will not be rendered
|
||||||
|
this.camera = new PerspectiveCamera(angle, aspect, near, far);
|
||||||
|
//this.camera.position.z = 20;
|
||||||
|
this.camera.position.set(0, -0.1, 150);
|
||||||
|
// this.camera.lookAt(new THREE.Vector3(0, 0, 0));
|
||||||
|
|
||||||
|
// this.controls = new OrbitControls(this.camera, this.scene, this.renderer.domElement);
|
||||||
|
this.map = new Map(this.camera, this.scene, this.renderer.domElement, this.container);
|
||||||
|
let boxLayer = new BoxLayer({ width: 10, height: 10, depth: 10 });
|
||||||
|
this.map.addLayer(boxLayer);
|
||||||
|
|
||||||
|
domEvent.on(window, 'click', this.onWindowResize, this);
|
||||||
|
|
||||||
|
// util.setLoading("webgl");
|
||||||
|
this.start();
|
||||||
|
}
|
||||||
|
|
||||||
|
onWindowResize() {
|
||||||
|
if (this._fullWindow) {
|
||||||
|
this._setCanvasSize(window.innerWidth, window.innerHeight);
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
this._setCanvasSize(this.container.clientWidth, this.container.clientHeight);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
_setCanvasSize (width, height) {
|
||||||
|
this.width = width;
|
||||||
|
this.height = height;
|
||||||
|
this.camera.aspect = width / height;
|
||||||
|
this.camera.updateProjectionMatrix();
|
||||||
|
this.renderer.setSize(width, height);
|
||||||
|
this.animate();
|
||||||
|
}
|
||||||
|
|
||||||
|
_buildDefaultLights(scene) {
|
||||||
|
var deg2rad = Math.PI / 180;
|
||||||
|
|
||||||
|
// ambient light
|
||||||
|
scene.add(new AmbientLight(0x999999));
|
||||||
|
//scene.add(new THREE.AmbientLight(0xeeeeee));
|
||||||
|
|
||||||
|
// directional lights
|
||||||
|
var 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;
|
||||||
|
|
||||||
|
var 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);
|
||||||
|
light1.position.set(x, y, z);
|
||||||
|
scene.add(light1);
|
||||||
|
|
||||||
|
// thin light from the opposite direction
|
||||||
|
var light2 = new DirectionalLight(0xffffff, 0.1);
|
||||||
|
light2.position.set(-x, -y, -z);
|
||||||
|
scene.add(light2);
|
||||||
|
}
|
||||||
|
|
||||||
|
start() {
|
||||||
|
this.running = true;
|
||||||
|
|
||||||
|
this.map.addListener('change', this.animate, this); // add this only if there is no animation loop (requestAnimationFrame)
|
||||||
|
this.animate();
|
||||||
|
}
|
||||||
|
|
||||||
|
animate() {
|
||||||
|
if (this.running) {
|
||||||
|
// requestAnimationFrame(() => {
|
||||||
|
// this.animate();
|
||||||
|
// }, 1000 / 30);
|
||||||
|
|
||||||
|
// this.objects.forEach((object) => {
|
||||||
|
// object.update();
|
||||||
|
// });
|
||||||
|
}
|
||||||
|
|
||||||
|
this.renderer.render(this.scene, this.camera);
|
||||||
|
}
|
||||||
|
|
||||||
|
add(layer) {
|
||||||
|
this.objects.push(layer);
|
||||||
|
this.scene.add(layer.getMesh());
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var container = document.getElementById("webgl");
|
||||||
|
let app = new Application(container);
|
||||||
|
// app.add(new BoxLayer({
|
||||||
|
// width: 10,
|
||||||
|
// height: 10,
|
||||||
|
// depth: 10
|
||||||
|
// }));
|
||||||
5
typings.json
Normal file
5
typings.json
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"globalDevDependencies": {
|
||||||
|
"three": "registry:dt/three#0.84.0+20170323144537"
|
||||||
|
}
|
||||||
|
}
|
||||||
6875
typings/globals/three/index.d.ts
vendored
Normal file
6875
typings/globals/three/index.d.ts
vendored
Normal file
File diff suppressed because it is too large
Load Diff
8
typings/globals/three/typings.json
Normal file
8
typings/globals/three/typings.json
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
{
|
||||||
|
"resolution": "main",
|
||||||
|
"tree": {
|
||||||
|
"src": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/index.d.ts",
|
||||||
|
"raw": "registry:dt/three#0.84.0+20170323144537",
|
||||||
|
"typings": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/ccda793e883ecb20bd396121f1e89df8c1dd00ce/three/index.d.ts"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
typings/index.d.ts
vendored
Normal file
1
typings/index.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
/// <reference path="globals/three/index.d.ts" />
|
||||||
163
webpack.config.js
Normal file
163
webpack.config.js
Normal file
|
|
@ -0,0 +1,163 @@
|
||||||
|
require('dotenv').config();
|
||||||
|
const path = require('path');
|
||||||
|
const webpack = require('webpack'); //e.g. for iusing DefinePlugin
|
||||||
|
// const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
|
||||||
|
const TerserPlugin = require('terser-webpack-plugin');
|
||||||
|
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
|
||||||
|
// https://www.sitepoint.com/es6-babel-webpack/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* flag Used to check if the environment is production or not
|
||||||
|
*/
|
||||||
|
const isProduction = (process.env.NODE_ENV === 'production');
|
||||||
|
const devMode = (process.env.NODE_ENV !== 'production');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Include hash to filenames for cache busting - only at production
|
||||||
|
*/
|
||||||
|
const fileNamePrefix = isProduction ? '[chunkhash].' : '';
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
mode: process.env.NODE_ENV,
|
||||||
|
context: __dirname,
|
||||||
|
entry: './src/js/main.js',
|
||||||
|
output: {
|
||||||
|
path: path.resolve(__dirname, 'dist'),
|
||||||
|
filename: '[name].js',
|
||||||
|
//filename: fileNamePrefix + '[name].js',
|
||||||
|
publicPath: '/dist/',
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.(svg|eot|ttf|woff|woff2)$/,
|
||||||
|
loader: 'url-loader',
|
||||||
|
options: {
|
||||||
|
limit: 10000,
|
||||||
|
name: 'fonts/[name].[ext]'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.(png|jpg|gif)$/,
|
||||||
|
loaders: [
|
||||||
|
{
|
||||||
|
loader: 'url-loader',
|
||||||
|
options: {
|
||||||
|
limit: 10000,
|
||||||
|
name: 'images/[name].[ext]'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
'img-loader'
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.js$/,
|
||||||
|
exclude: /(node_modules|bower_components)/,
|
||||||
|
use: {
|
||||||
|
loader: 'babel-loader',
|
||||||
|
options: {
|
||||||
|
presets: ['@babel/preset-env']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
test: /\.(less|css)$/,
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
// loader: (isProduction === true) ? MiniCssExtractPlugin.loader : 'style-loader',
|
||||||
|
// loader: 'style-loader',
|
||||||
|
loader: MiniCssExtractPlugin.loader,
|
||||||
|
// loader: MiniCssExtractPlugin.loader,
|
||||||
|
// options: {
|
||||||
|
// hmr: process.env.NODE_ENV === 'development',
|
||||||
|
// },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loader: "css-loader",
|
||||||
|
options: {
|
||||||
|
sourceMap: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
loader: "less-loader",
|
||||||
|
options: {
|
||||||
|
sourceMap: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
},
|
||||||
|
stats: {
|
||||||
|
colors: true
|
||||||
|
},
|
||||||
|
// devtool: 'source-map',
|
||||||
|
|
||||||
|
optimization: {
|
||||||
|
minimize: isProduction,
|
||||||
|
minimizer: [new TerserPlugin({
|
||||||
|
parallel: true,
|
||||||
|
sourceMap: true,
|
||||||
|
terserOptions: {
|
||||||
|
extractComments: 'all',
|
||||||
|
compress: {
|
||||||
|
drop_console: true,
|
||||||
|
drop_debugger: true,
|
||||||
|
keep_classnames: false,
|
||||||
|
keep_fnames: false,
|
||||||
|
},
|
||||||
|
}
|
||||||
|
})],
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: [
|
||||||
|
|
||||||
|
new webpack.DefinePlugin({ // Remove this plugin if you don't plan to define any global constants
|
||||||
|
ENVIRONMENT: JSON.stringify(process.env.NODE_ENV),
|
||||||
|
CONSTANT_VALUE: JSON.stringify(process.env.CONSTANT_VALUE),
|
||||||
|
}),
|
||||||
|
// extractLess,
|
||||||
|
new MiniCssExtractPlugin({ // Make sure MiniCssExtractPlugin instance is included in array before the PurifyCSSPlugin
|
||||||
|
// Options similar to the same options in webpackOptions.output
|
||||||
|
// both options are optional
|
||||||
|
// filename: '[name].css',
|
||||||
|
// chunkFilename: '[id].css',
|
||||||
|
filename: '[name].css',
|
||||||
|
chunkFilename: '[id].css',
|
||||||
|
}),
|
||||||
|
// new PurifyCSSPlugin({
|
||||||
|
// paths: glob.sync(__dirname + '/*.html'),
|
||||||
|
// minimize: true,
|
||||||
|
// }),
|
||||||
|
// new webpack.HotModuleReplacementPlugin(),
|
||||||
|
],
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Production only plugins
|
||||||
|
*/
|
||||||
|
if (isProduction === true) {
|
||||||
|
module.exports.plugins.push(
|
||||||
|
// module.exports.optimization.minimizer.push(
|
||||||
|
// new UglifyJsPlugin({ sourceMap: true })
|
||||||
|
// );
|
||||||
|
function () { // Create a manifest.json file that contain the hashed file names of generated static resources
|
||||||
|
this.plugin("done", function (status) {
|
||||||
|
require("fs").writeFileSync(
|
||||||
|
__dirname + "/dist/manifest.json",
|
||||||
|
JSON.stringify(status.toJson().assetsByChunkName)
|
||||||
|
);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
);
|
||||||
|
//development
|
||||||
|
} else {
|
||||||
|
module.exports.plugins.push(
|
||||||
|
//auto updating on dev server
|
||||||
|
new webpack.HotModuleReplacementPlugin()// HMR plugin will cause problems with [chunkhash]
|
||||||
|
);
|
||||||
|
}
|
||||||
7
webpack.prod.config.js
Normal file
7
webpack.prod.config.js
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
const merge = require('webpack-merge');
|
||||||
|
const common = require('./webpack.config.js');
|
||||||
|
|
||||||
|
module.exports = merge(common, {
|
||||||
|
mode: 'production',
|
||||||
|
devtool: 'source-map',
|
||||||
|
});
|
||||||
Loading…
Reference in New Issue
Block a user