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

- add slicing box as layer

Browse Source 
- npm updates
- small syntax improvements
This commit is contained in:
Arno Kaimbacher 2021-03-05 18:38:25 +01:00
parent be8c6d0a8c
commit dfec6b542b
7 changed files with 721 additions and 656 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1172
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

114
src/js/clip/MyMeshStandardMaterial.js
View File

@ -2,65 +2,65 @@ import { MeshStandardMaterial } from 'three/src/materials/MeshStandardMaterial';
import { shader } from './shader';
export class MyMeshStandardMaterial extends MeshStandardMaterial {
constructor(materialParameters, uniforms) {
constructor(materialParameters, uniforms) {
super(materialParameters);
this.uniforms = uniforms;
this.onBeforeCompile = m_shader => {
m_shader.uniforms.clippingLow = this.uniforms.clippingLow; // { type: "v3", value: new Vector3(0, 0, 0) };
m_shader.uniforms.clippingHigh = this.uniforms.clippingHigh; // { type: "v3", value: new Vector3(0, 0, 0) };
// m_shader.vertexShader = `
// varying vec3 vPos;
// varying vec4 worldPosition;
// ${m_shader.vertexShader}
// `.replace(
// `#include <fog_vertex>`,
// `#include <fog_vertex>
// worldPosition = modelMatrix * vec4( position, 1.0 );
// `
// );
m_shader.vertexShader = shader.vertexMeshStandard;
// m_shader.vertexShader = 'varying vec4 realPosition; ' + m_shader.vertexShader;
// m_shader.vertexShader = m_shader.vertexShader.replace(
// `#include <fog_vertex>`,
// `#include <fog_vertex>
// realPosition = modelMatrix * vec4( position, 1.0 );`
// );
m_shader.fragmentShader = shader.fragmentClippingMeshStandard;
//prepend the input to the shader
// m_shader.fragmentShader = `
// uniform vec3 clippingLow;
// uniform vec3 clippingHigh;
// varying vec4 worldPosition;
// ${m_shader.fragmentShader}
// `.replace(
// `gl_FragColor = vec4( outgoingLight, diffuseColor.a );`,
// `
// if (
// worldPosition.x < clippingLow.x
// || worldPosition.x > clippingHigh.x
// || worldPosition.y < clippingLow.y
// || worldPosition.y > clippingHigh.y
// || worldPosition.z < clippingLow.z
// || worldPosition.z > clippingHigh.z
// ) {
// discard;
// } else {
// gl_FragColor = vec4( outgoingLight, diffuseColor.a );
// }
// `
// );
};
}
onBeforeCompile = m_shader => {
m_shader.uniforms.clippingLow = this.uniforms.clippingLow; // { type: "v3", value: new Vector3(0, 0, 0) };
m_shader.uniforms.clippingHigh = this.uniforms.clippingHigh; // { type: "v3", value: new Vector3(0, 0, 0) };
// m_shader.vertexShader = `
// varying vec3 vPos;
// varying vec4 worldPosition;
// ${m_shader.vertexShader}
// `.replace(
// `#include <fog_vertex>`,
// `#include <fog_vertex>
// worldPosition = modelMatrix * vec4( position, 1.0 );
// `
// );
m_shader.vertexShader = shader.vertexMeshStandard;
// m_shader.vertexShader = 'varying vec4 realPosition; ' + m_shader.vertexShader;
// m_shader.vertexShader = m_shader.vertexShader.replace(
// `#include <fog_vertex>`,
// `#include <fog_vertex>
// realPosition = modelMatrix * vec4( position, 1.0 );`
// );
m_shader.fragmentShader = shader.fragmentClippingMeshStandard;
//prepend the input to the shader
// m_shader.fragmentShader = `
// uniform vec3 clippingLow;
// uniform vec3 clippingHigh;
// varying vec4 worldPosition;
// ${m_shader.fragmentShader}
// `.replace(
// `gl_FragColor = vec4( outgoingLight, diffuseColor.a );`,
// `
// if (
// worldPosition.x < clippingLow.x
// || worldPosition.x > clippingHigh.x
// || worldPosition.y < clippingLow.y
// || worldPosition.y > clippingHigh.y
// || worldPosition.z < clippingLow.z
// || worldPosition.z > clippingHigh.z
// ) {
// discard;
// } else {
// gl_FragColor = vec4( outgoingLight, diffuseColor.a );
// }
// `
// );
};
}

5
src/js/clip/Picking.js
View File

@ -78,7 +78,7 @@ export class Picking {
}
mouseMove(event) {
if (this.isDraging == true) {
if (this.isDraging == true || this.simulation.selection.visible == false) {
return;
}
let point = this._getCanvasPoint(event);
@ -116,6 +116,9 @@ export class Picking {
}
beginDrag(event) {
if (this.simulation.selection.visible == false) {
return;
}
// exit drag method, if not left mouse button was clicked
if (this.touchCapable == false && event.which != 1) {
return;

52
src/js/clip/Selection.js
View File

@ -6,8 +6,9 @@ import { Object3D } from 'three/src/core/Object3D';
import { uniforms } from "./uniforms";
import { SelectionBoxFace } from './SelectionBoxFace';
import { SelectionBoxLine } from './SelectionBoxLine';
import { Layer } from '../layer/Layer';
export class Selection {
export class Selection extends Layer {
limitLow;
limitHigh;
box;
@ -16,9 +17,16 @@ export class Selection {
touchMeshes; displayMeshes; meshGeometries; selectables;
faces;
map;
scale;
constructor(low, high, map) {
this.map = map;
constructor(parameters, low, high) {
super();
this.type = 'Selection';
this.visible = true;
this.opacity = 1;
for (var k in parameters) {
this[k] = parameters[k];
}
this.limitLow = low;
this.limitHigh = high;
this.limit = {
@ -27,6 +35,7 @@ export class Selection {
x2: high.x,
y2: high.y
}
this.scale = 1;
this.box = new BoxGeometry(1, 1, 1);
this.boxMesh = new Mesh(this.box, material.capMaterial);
@ -71,8 +80,39 @@ export class Selection {
this.boxLines.push(new SelectionBoxLine(v[6], v[7], f[4], f[5], this));
this.setBox();
this.setUniforms();
// this.setUniforms();
}
onAdd(map) {
this.map = map;
this.build(this.getScene());
//this.update();
this.emit('add');
}
build(app_scene) {
// app_scene.add(this.boxMesh);
app_scene.add(this.displayMeshes);
app_scene.add(this.touchMeshes);
}
setWireframeMode(wireframe) {
return;
}
setVisible(visible) {
this.visible = visible;
this.boxMesh.visible = visible;
this.displayMeshes.visible = visible;
this.touchMeshes.visible = visible;
this.emit('visibility-change');
}
scaleZ(z) {
this.scale = z;
// this.boxMesh.scale.z = z;
// this.displayMeshes.scale.z = z;
// this.touchMeshes.scale.z = z;
}
updateVertices() {
@ -115,7 +155,6 @@ export class Selection {
setBox() {
let width = new Vector3();
width.subVectors(this.limitHigh, this.limitLow);
this.boxMesh.scale.copy(width);
width.multiplyScalar(0.5).add(this.limitLow);
this.boxMesh.position.copy(width);
@ -164,7 +203,4 @@ export class Selection {
this.updateVertices();
this.updateGeometries();
}
}

3
src/js/clip/SelectionBoxLine.js
View File

@ -1,12 +1,9 @@
import { LineSegments } from 'three/src/objects/LineSegments';
// import { Float32BufferAttribute } from 'three/src/core/BufferAttribute';
import * as material from './material';
import { BufferGeometry } from 'three/src/core/BufferGeometry';
export class SelectionBoxLine {
// material;
constructor(v0, v1, f0, f1, selection) {
// var lineGeometry = new THREE.Geometry();
// lineGeometry.vertices.push(v0, v1);

14
src/js/layer/TinLayer.js
View File

@ -1,4 +1,3 @@
// import { Group } from 'three/src/objects/Group';
import { BufferGeometry } from 'three/src/core/BufferGeometry';
import { Float32BufferAttribute, Uint16BufferAttribute } from 'three/src/core/BufferAttribute';
import { DoubleSide } from 'three/src/constants';
@ -8,7 +7,6 @@ import { BitStream } from '../lib/bitstream';
import { Plane } from 'three/src/math/Plane';
import { Vector3 } from 'three/src/math/Vector3';
import { Color } from 'three/src/math/Color';
import { MyMeshStandardMaterial } from '../clip/MyMeshStandardMaterial';
@ -17,8 +15,6 @@ const EDGEURL = 'https://geusegdi01.geus.dk/geom3d/data/triangles/';
class TinLayer extends Layer {
constructor(params) {
super();
@ -31,7 +27,6 @@ class TinLayer extends Layer {
this[k] = params[k];
}
// this.objectGroup = new Group();
this.queryableObjects = [];
this.borderVisible = false;
}
@ -52,7 +47,6 @@ class TinLayer extends Layer {
scaleZ(z) {
this.mainMesh.scale.z = z;
//this.objectGroup.scale.z = z;
}
async onAdd(map) {
@ -60,7 +54,6 @@ class TinLayer extends Layer {
map.update();
}
//build BufferGeometry with Index
async build(app_scene) {
let geometry = new BufferGeometry();
@ -120,8 +113,6 @@ class TinLayer extends Layer {
this.materialsArray.push(this.material);
let mesh = this.mainMesh = new Mesh(geometry, this.material);
// mesh.userData.layerId = this.index;
// this.addObject(mesh, true);
//this.mainMesh = mesh;
if (app_scene) {
app_scene.add(mesh);
}
@ -132,7 +123,6 @@ class TinLayer extends Layer {
this.yLocalPlane.constant = filterY;
}
async points(geomId) {
const url = POINTURL + geomId;
const buffer = await this.request(url);
@ -214,10 +204,6 @@ class TinLayer extends Layer {
return sigbits;
}
}
export { TinLayer };

11
src/js/main.js
View File

@ -187,10 +187,11 @@ class Application {
this.selection = new Selection(
// new Vector3(-7, -14, -14),
// new Vector3(14, 9, 3)
{ name: 'Slicing Box'},
new Vector3(x.min, y.min, z.min),
new Vector3(x.max, y.max, z.max),
map
new Vector3(x.max, y.max, z.max)
);
this.map.addLayer(this.selection);
new Picking(size, center, this);
@ -263,9 +264,9 @@ class Application {
// new Vector3(x.min, y.min, z.min),
// new Vector3(x.max, y.max, z.max)
// );
this.capsScene.add(this.selection.boxMesh);
this.scene.add(this.selection.displayMeshes);
this.scene.add(this.selection.touchMeshes);
// this.capsScene.add(this.selection.boxMesh);
// this.scene.add(this.selection.displayMeshes);
// this.scene.add(this.selection.touchMeshes);
// domEvent.on(window, 'resize', this.onWindowResize, this);
// domEvent.on(window, 'keydown', this.keydown, this);