geolba/GeotiefExplore
2
1
Fork 0
Code Issues 7 Pull requests Projects 1 Releases Wiki Activity

- uninstall less-loader

Browse source 
- trial: local clipping planes for DemLayer and TinLayer via material parameter
- start with selcetion boxes for interactive clipping: SelectionBoxFace.js
- main.js: this.renderer.localClippingEnabled = true;
This commit is contained in:
Arno Kaimbacher 2021-02-11 15:33:05 +01:00
parent 293b22c28b
commit 8b4ace6763
8 changed files with 176 additions and 475 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/js/clip/SelectionBoxFace.js Normal file
View file

@ -0,0 +1,42 @@
import { Mesh } from 'three/src/objects/Mesh';
export class SelectionBoxFace {
constructor(axis, v0, v1, v2, v3, selection) {
let frontFaceGeometry = new PlaneGeometry(v0, v1, v2, v3);
frontFaceGeometry.dynamic = true;
selection.meshGeometries.push(frontFaceGeometry);
let frontFaceMesh = new Mesh(frontFaceGeometry, MATERIAL.Invisible);
frontFaceMesh.axis = axis;
frontFaceMesh.guardian = this;
selection.touchMeshes.add(frontFaceMesh);
selection.selectables.push(frontFaceMesh);
let backFaceGeometry = new PlaneGeometry(v3, v2, v1, v0);
backFaceGeometry.dynamic = true;
selection.meshGeometries.push(backFaceGeometry);
let backFaceMesh = new Mesh(backFaceGeometry, MATERIAL.BoxBackFace);
selection.displayMeshes.add(backFaceMesh);
this.lines = new Array();
}
rayOver() {
this.highlightLines(true);
}
rayOut() {
this.highlightLines(false);
}
highlightLines(b) {
for (let i = 0; i < this.lines.length; i++) {
this.lines[i].setHighlight(b);
}
}
}

77
src/js/controls/SlicerControl.js Normal file
View file

@ -0,0 +1,77 @@
import { Control } from "./Control";
import * as dom from '../core/domUtil';
import * as util from '../core/utilities';
import * as domEvent from '../core/domEvent';
export class SlicerControl extends Control {
options = {
position: 'topright'
};
map;
constructor(options) {
super(options);
util.setOptions(this, options);
}
onAdd(map) {
this.map = map;
let className = "gba-controllayers";
let container;
let toggleable = false;
if (this.options.parentDiv) {
container = this._container = document.getElementById(this.options.parentDiv);
dom.addClass(container, className);
toggleable = false;
} else {
container = this._container = dom.createDom("div", { "class": className });
toggleable = true;
}
this._initLayout(container);
if (!this.options.parentDiv) {
return container;
}
}
_initLayout(container) {
this._slicerMenu = dom.createDom('div', { id: "range-slider", "class": 'gba-slicer-menu' }, container);
dom.createDom("span", { innerHTML: "SLICER", "class": "gbaLegendServiceLabel" }, this._slicerMenu);
let table = dom.createDom('table', { width: "95%" }, this._slicerMenu);
let tblBody = dom.createDom("tbody", {}, table);
let sliderValue1 = Math.round(this.map.width / 2);
let row = dom.createDom("tr", {}, tblBody);
let leftTd = dom.createDom("td", { align: "left", style: "width:20px;" }, row);
dom.createDom("span", { innerHTML: "x", }, leftTd);
let rightTd = dom.createDom("td", { align: "left" }, row);
// this.slider = new RangeSlider({
// orientation: "vertical",
// value: sliderValue1,
// max: this.map.x.max,
// min: this.map.x.min,
// id: "slider1"
// });
// this.slider.addTo(rightTd);
let btnSlice = dom.createDom("span", { innerHTML: "slice", class: "button button-primary" }, rightTd);
domEvent.on(btnSlice, 'mousedown', domEvent.stopPropagation);
domEvent.on(btnSlice, 'click', domEvent.stopPropagation);
domEvent.on(btnSlice, 'dblclick', domEvent.stopPropagation);
domEvent.on(btnSlice, 'mousedown', domEvent.preventDefault);
domEvent.on(btnSlice, 'mousedown', this._slice, this);
}
_slice() {
let x = 4471470;
this.map.currentBasemap.filterMaterial(x, this.map.y.max);
this.map.layers[16].filterMaterial(x, this.map.y.max);
this.map.update();
}
}

25
src/js/layer/DemLayer.js
View file

@ -11,7 +11,8 @@ import { DoubleSide, FlatShading, LinearFilter } from 'three/src/constants';
import * as browser from '../core/browser';
import { Texture } from 'three/src/textures/Texture';
import { TextureLoader } from 'three/src/loaders/TextureLoader';
import { Plane } from 'three/src/math/Plane';
import { Vector3 } from 'three/src/math/Vector3';
export class DemLayer extends Layer {
images = [{
@ -59,9 +60,9 @@ export class DemLayer extends Layer {
async initMaterials() {
if (this.materialParameter.length === 0) return;
// this.xLocalPlane = new THREE.Plane(new THREE.Vector3(-1, 0, 0), 50);
// //this.addObject(this.xLocalPlane, false);
// this.yLocalPlane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 39);
this.xLocalPlane = new Plane(new Vector3(-1, 0, 0), this._map.x.max);
//this.addObject(this.xLocalPlane, false);
this.yLocalPlane = new Plane(new Vector3(0, 1, 0), this._map.y.max);
let sum_opacity = 0;
this.material;
@ -96,10 +97,10 @@ export class DemLayer extends Layer {
if (m.w) opt.wireframe = true;
//opt.wireframe = true;
// // Clipping setup:
// opt.clippingPlanes = [this.xLocalPlane, this.yLocalPlane];
// opt.clipIntersection = false;
// opt.clipShadows = true;
// Clipping setup:
opt.clippingPlanes = [this.xLocalPlane, this.yLocalPlane];
opt.clipIntersection = false;
opt.clipShadows = true;
let MaterialType = { MeshLambert: 0, MeshPhong: 1, LineBasic: 2, Sprite: 3, Unknown: -1 };
@ -134,6 +135,12 @@ export class DemLayer extends Layer {
this.opacity = sum_opacity / this.materials.length;
}
filterMaterial(filterX, filterY) {
this.xLocalPlane.constant = filterX;
this.yLocalPlane.constant = filterY;
}
scaleZ(z) {
// this.mainMesh.scale.z = z;
this.objectGroup.scale.z = z;
@ -188,7 +195,7 @@ export class DemLayer extends Layer {
const textureLoader = new TextureLoader();
return new Promise((resolve, reject) => {
textureLoader.load(
texturePath,
texturePath,
(texture) => resolve(texture),
undefined,
err => reject(err)

16
src/js/layer/TinLayer.js
View file

@ -6,6 +6,8 @@ import { DoubleSide } from 'three/src/constants';
import { Mesh } from 'three/src/objects/Mesh';
import { Layer } from './Layer';
import { BitStream } from '../lib/bitstream';
import { Plane } from 'three/src/math/Plane';
import { Vector3 } from 'three/src/math/Vector3';
const POINTURL = 'https://geusegdi01.geus.dk/geom3d/data/nodes/';
const EDGEURL = 'https://geusegdi01.geus.dk/geom3d/data/triangles/';
@ -78,13 +80,20 @@ class TinLayer extends Layer {
geometry.computeVertexNormals();// computed vertex normals are orthogonal to the face f
geometry.computeBoundingBox();
this.xLocalPlane = new Plane(new Vector3(-1, 0, 0), this._map.x.max);
//this.addObject(this.xLocalPlane, false);
this.yLocalPlane = new Plane(new Vector3(0, 1, 0), this._map.y.max);
let color = parseInt(this.color, 16);
this.material = new MeshStandardMaterial({
color: color,
metalness: 0.1,
roughness: 0.75,
flatShading: true,
side: DoubleSide
side: DoubleSide,
clippingPlanes: [this.xLocalPlane, this.yLocalPlane],
clipIntersection: false,
clipShadows: true,
});
this.materialsArray.push(this.material);
let mesh = this.mainMesh = new Mesh(geometry, this.material);
@ -96,6 +105,11 @@ class TinLayer extends Layer {
}
}
filterMaterial(filterX, filterY) {
this.xLocalPlane.constant = filterX;
this.yLocalPlane.constant = filterY;
}
async points(geomId) {
const url = POINTURL + geomId;

35
src/js/main.js
View file

@ -14,6 +14,7 @@ import { NorthArrow } from './controls/NorthArrow';
import { LayerControl } from './controls/LayerControl';
import { BasemapControl } from './controls/BasemapControl';
import { SliderControl } from './controls/SliderControl';
// import { SlicerControl } from './controls/SlicerControl';
import { Mesh } from 'three/src/objects/Mesh';
import { SphereGeometry } from 'three/src/geometries/SphereGeometry';
import { MeshLambertMaterial } from 'three/src/materials/MeshLambertMaterial';
@ -88,22 +89,17 @@ class Application {
// let bgcolor = 0xfdfdfd;
this.renderer = new WebGLRenderer({ alpha: true, antialias: true, preserveDrawingBuffer: 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
this.renderer.setClearColor(0x000000, 0.0);
this.renderer.setClearColor(0x000000, 0.0); // second param is opacity, 0 => transparent
// enable clipping
// let Empty = Object.freeze([]);
// this.renderer.clippingPlanes = Empty; // GUI sets it to globalPlanes
// this.renderer.localClippingEnabled = true;
this.renderer.localClippingEnabled = true;
this.container.appendChild(this.renderer.domElement);
/* Scene: that will hold all our elements such as objects, cameras and lights. */
this.scene = new Scene();
//app.scene.add(new THREE.AmbientLight(0xeeeeee));
// const ambient = new AmbientLight( 0xffffff, 0.5 );
// this.scene.add(ambient);
this._buildDefaultLights(this.scene);
//app.scene.autoUpdate = false;
//// show axes in the screen
@ -128,15 +124,15 @@ class Application {
// let y = { min: 2182271.6538, max: 2504028.3462 , avg: 2302070 };
// let z = { min: -60066, max: 3574.94, avg: -13616.3 };
let x = { min: 4415940, max: 4508490, avg: 4463200 };
let x = { min: 4415940, max: 4508490, avg: 4463200 };
// let y = { min: 2351480, max: 2475820 , avg: 2412610 };
let y = { min: 2351229.9140, max: 2476070.0860 , avg: 2412610 };
let y = { min: 2351229.9140, max: 2476070.0860, avg: 2412610 };
let z = { min: -8798.15, max: 1401.92, avg: -155.17 };
const center = new Vector3((x.min + x.max) / 2, (y.min + y.max) / 2, 0);
// const center = new Vector3(x.avg, y.avg, z.avg);
const size = Math.max(x.max - x.min, y.max - y.min, z.max - z.min);
let baseExtent= {
const size = Math.max(x.max - x.min, y.max - y.min, z.max - z.min);
let baseExtent = {
x: x,
y: y
};
@ -144,8 +140,8 @@ class Application {
const camDirection = new Vector3(-0.5, -Math.SQRT1_2, 0.5);
// const camDirection = new Vector3(0, 0, 1);
const camOffset = camDirection.multiplyScalar(size * 2);
this.camera.position.copy(center);
this.camera.position.add(camOffset);
this.camera.position.copy(center);
this.camera.position.add(camOffset);
this.camera.near = size * 0.1;
this.camera.far = size * 25;
this.camera.updateProjectionMatrix();
@ -167,8 +163,6 @@ class Application {
let map = this.map = await Map.build(x, y, z, center, this.camera, this.scene, this.container, 'https://geusegdi01.geus.dk/meta3d/rpc/model_meta_all?modelid=20');
this.mapTitle = document.querySelector('#map-title');
this.mapTitle.innerHTML += map.title;
// this.map.minDistance = size*0.75;
// this.map.maxDistance = size*15;
// let boxLayer = new BoxLayer({
// width: 10000, height: 10000, depth: 10000, name: 'center-box', color: 800080 , center: center
@ -193,9 +187,9 @@ class Application {
"i": 0,
"materialtypee": 0,
"ds": 1,
"bottomZ": 3000,
"bottomZ": 3000,
}]
});
});
demLayer.addBlock({
"width": 173, //267,
"plane": {
@ -214,7 +208,7 @@ class Application {
this.map.addLayer(demLayer);
this.map.currentBasemap = demLayer;
this.gridlayer = new GridLayer({ center: center, name: "coordinate grid", appWidth: this.width, appHeight: this.height });
this.gridlayer = new GridLayer({ center: center, name: "coordinate grid", appWidth: this.width, appHeight: this.height });
this.map.addLayer(this.gridlayer);
new LayerControl(this.map.layers, {
@ -229,6 +223,9 @@ class Application {
//slider for scaling z value
this.slider = new SliderControl({ layers: this.map.layers }).addTo(this.map);
//slice on x and y axes:
// this.slicer = new SlicerControl({ parentDiv: 'slicer-control' }).addTo(this.map);
// domEvent.on(window, 'resize', this.onWindowResize, this);
// domEvent.on(window, 'keydown', this.keydown, this);
this.start();