- test overlay on TinLayer

src/js/controls/BoreholePopup.ts

@@ -15,7 +15,6 @@ interface BoreholePopupOptions {
 
 export class BoreholePopup extends Control {
 
-    // default options
     options: BoreholePopupOptions = {
         position: 'topleft',
         width: '300px',

src/js/layer/DemBlock.js

@@ -5,6 +5,8 @@ import { Mesh } from 'three/src/objects/Mesh';
 
 export class DemBlock {
 
+    layer;
+
     constructor(params) {
         //properties
         for (var k in params) {

src/js/layer/DemLayer.js

@@ -5,7 +5,8 @@ import { DemBlock } from './DemBlock';
 // import { MeshLambertMaterial } from 'three/src/materials/MeshLambertMaterial';
 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 { Vector3 } from 'three/src/math/Vector3';
@@ -31,10 +32,23 @@ export class DemLayer extends Layer {
         type: "esri"
     }
     ];
-
+    q;
+    objectGroup;
+    visible;
+    opacity;
+    materialParameter;
+    materialsArray;
+    material;
     queryableObjects;
     borderVisible;
+    mainMesh;
     uniforms;
+    blocks;
+    baseExtent = {
+        min: { x: 0, y: 0 },
+        max: { x: 0, y: 0 }
+    };
+    index;
 
     constructor(params) {
         super();
@@ -42,7 +56,7 @@ export class DemLayer extends Layer {
         this.opacity = 1;
         this.material;
         this.materialParameter = [];
-        this.materials = [];
+        this.materialsArray = [];
         for (var k in params) {
             this[k] = params[k];
         }
@@ -66,25 +80,29 @@ export class DemLayer extends Layer {
 
     async initMaterials() {
         if (this.materialParameter.length === 0) return;
-        // this.xMaxLocalPlane = new Plane(new Vector3(-1, 0, 0), this._map.x.max);
-        // this.yMaxLocalPlane = new Plane(new Vector3(0, -1, 0), this._map.y.max);
-
         let sum_opacity = 0;
         this.material;
         for (let i = 0, l = this.materialParameter.length; i < l; i++) {
             let m = this.materialParameter[i];
-
+            let opt = {
-            let opt = {};
+                opacity: null,
-            //if (m.ds && !Gba3D.isIE) opt.side = THREE.DoubleSide;
+                side: null,
+                // shading: null,
+                transparent: null,
+                wireframe: null,
+                uniforms: null,               
+                vertexShader: null,
+                fragmentShader: null
+            };
             if (m.ds && !browser.ie) opt.side = DoubleSide;
-            if (m.flat) opt.shading = FlatShading;
+            // if (m.flat) opt.shading = FlatShading;
             //m.i = 1;
             let image;
             if (m.i !== undefined) {
                 image = this.images[m.i];
                 if (image.texture === undefined) {
                     if (image.src !== undefined) {
-                        image.texture = THREE.ImageUtils._loadTexture(image.src);
+                        // image.texture = THREE.ImageUtils._loadTexture(image.src);
                     }
                     else {
                         if (image.type == "esri") {
@@ -106,13 +124,7 @@ export class DemLayer extends Layer {
             }
             if (m.t) opt.transparent = true;
             if (m.w) opt.wireframe = true;
-            //opt.wireframe = true;
+            
-
-            // // Clipping setup:
-            // opt.clippingPlanes = this.clippingPlanes = [this.xMinLocalPlane, this.xMaxLocalPlane, this.yMaxLocalPlane];
-            // opt.clipIntersection = false;
-            // opt.clipShadows = true;
-
             // let color =  parseInt("ffffff", 16);
             // // opt.color = color;
             let uniforms = this.uniforms = {
@@ -131,35 +143,20 @@ export class DemLayer extends Layer {
                 //if (m.color !== undefined) opt.color = opt.ambient = m.color;
                 if (m.color !== undefined) opt.color = m.color;
                 //opt.skinning = true;
-                opt.uniforms = this.uniforms.clipping;
+                opt.uniforms = uniforms.clipping;
                 opt.vertexShader = shader.vertexClipping;
                 opt.fragmentShader = shader.fragmentClippingFront;
                 this.material = new ShaderMaterial(opt);
                 // this.material = new MeshStandardMaterial(opt);                 
-            }
+            }       
-            // else if (m.materialtype === MaterialType.MeshPhong) {
-            //     if (m.color !== undefined) opt.color = opt.ambient = m.color;
-            //     mat = new THREE.MeshPhongMaterial(opt);
-            // }
-            // else if (m.materialtype === MaterialType.LineBasic) {
-            //     opt.color = m.color;
-            //     mat = new THREE.LineBasicMaterial(opt);
-            // }
-            else {
-                if (m.color !== undefined) opt.color = m.color;
-                this.material = new MeshStandardMaterial(opt);
-            }
 
             m.mat = this.material;
-            //if (m.side !== undefined) {
+            this.materialsArray.push(this.material);
-            //    m.
-            //}
-            this.materials.push(this.material);
             sum_opacity += this.material.opacity;
         }
 
         // layer opacity is the average opacity of materials
-        this.opacity = sum_opacity / this.materials.length;
+        this.opacity = sum_opacity / this.materialsArray.length;
     }
 
     scaleZ(z) {
@@ -174,15 +171,15 @@ export class DemLayer extends Layer {
     }
 
     addBlock(params, clipped = false) {
-        let BlockClass = clipped ? ClippedDEMBlock : DemBlock;
+        // let BlockClass = clipped ? ClippedDEMBlock : DemBlock;
-        var block = new BlockClass(params);
+        let block = new DemBlock(params);
         block.layer = this;
         this.blocks.push(block);
         return block;
     }
 
     setWireframeMode(wireframe) {
-        this.materials.forEach(function (mat) {
+        this.materialsArray.forEach(function (mat) {
             //if (m.w) return;
             //m.mat.wireframe = wireframe;
             mat.wireframe = wireframe;
@@ -229,13 +226,11 @@ export class DemLayer extends Layer {
     async loadTextureWms(url, imageParameter) {
         let dest = new proj4.Proj("EPSG:3857");
         let source = new proj4.Proj("EPSG:3034");
-        let p1 = new proj4.toPoint([this.baseExtent.x.min, this.baseExtent.y.min]);
+        let p1 = proj4.toPoint([this.baseExtent.min.x, this.baseExtent.min.y]);
-        let p2 = new proj4.toPoint([this.baseExtent.x.max, this.baseExtent.y.max]);
+        let p2 = proj4.toPoint([this.baseExtent.max.x, this.baseExtent.max.y]);
 
         proj4.transform(source, dest, p1);
         proj4.transform(source, dest, p2);
-
-        // let bbox = this.baseExtent.x.min + "," + this.baseExtent.y.min + "," + this.baseExtent.x.max + "," + this.baseExtent.y.max;
         let bbox = p1.x + "," + p1.y + "," + p2.x + "," + p2.y;
 
         let params = {
@@ -272,6 +267,10 @@ export class DemLayer extends Layer {
     }
 
     async onAdd(map) {
+        this.baseExtent.min.x = map.baseExtent.x.min;
+        this.baseExtent.min.y = map.baseExtent.y.min;
+        this.baseExtent.max.x = map.baseExtent.x.max;
+        this.baseExtent.max.y = map.baseExtent.y.max;
         //this._zoomAnimated = this._zoomAnimated && map.options.markerZoomAnimation;
         await this.initMaterials();
         this.build(this.getScene());
@@ -279,6 +278,10 @@ export class DemLayer extends Layer {
         this.emit('add');
     }
 
+    onRemove(map) {
+        map.scene.remove(this.objectGroup);
+    }
+
     build(app_scene) {
         //var opt = Gba3D.Options;
         this.blocks.forEach(function (block) {
@@ -356,8 +359,8 @@ export class DemLayer extends Layer {
     async requestImage(url, imageParameter) {
         let dest = new proj4.Proj("EPSG:3857");
         let source = new proj4.Proj("EPSG:3034");
-        let p1 = new proj4.toPoint([this.baseExtent.x.min, this.baseExtent.y.min]);
+        let p1 = proj4.toPoint([this.baseExtent.min.x, this.baseExtent.min.y]);
-        let p2 = new proj4.toPoint([this.baseExtent.x.max, this.baseExtent.y.max]);
+        let p2 = proj4.toPoint([this.baseExtent.max.x, this.baseExtent.max.y]);
 
         proj4.transform(source, dest, p1);
         proj4.transform(source, dest, p2);

src/js/layer/TinLayer.ts

@@ -13,12 +13,17 @@ import { Group } from 'three/src/objects/Group';
 // import { Texture } from 'three/src/textures/Texture';
 import { TextureLoader } from 'three/src/loaders/TextureLoader';
 import proj4 from 'proj4/dist/proj4';
+import { ShaderMaterial } from 'three/src/materials/ShaderMaterial';
+import { shader } from '../clip/shader';
+import { Material } from 'three/src/materials/Material';
+import { MeshLambertMaterial } from 'three/src/materials/MeshLambertMaterial';
 
 const POINTURL = 'https://geusegdi01.geus.dk/geom3d/data/nodes/';
 const EDGEURL = 'https://geusegdi01.geus.dk/geom3d/data/triangles/';
 
 class TinLayer extends Layer {
 
+    name: string;
     q: boolean;
     queryableObjects;
     borderVisible;
@@ -28,16 +33,36 @@ class TinLayer extends Layer {
     opacity: number;
     materialParameter: Array<string>;
     materialsArray: Array<any>;
-    material: MyMeshStandardMaterial;
+    material: Material;
     featuregeom_id: number;
     color: string;
     mainMesh;
-    uniforms: Object;
+    uniforms = {
+        clipping: {}
+    };
     public baseExtent = {
         min: { x: 0, y: 0 },
         max: { x: 0, y: 0 }
     };
     index: number;
+    images = [{
+        width: 405,
+        // "url": "https://sdi.noe.gv.at/at.gv.noe.geoserver/OGD/wms",
+        url: " https://ows.terrestris.de/osm/service",
+        height: 549,
+        bboxSR: 3857,
+        type: "wms",
+        texture: undefined
+    },
+    {
+        width: 405,
+        url: "https://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/export",
+        height: 549, //509
+        bboxSR: 3034,
+        type: "esri",
+        texture: undefined
+    }
+    ];
 
     constructor(params) {
         super();
@@ -85,10 +110,23 @@ class TinLayer extends Layer {
         map.scene.remove(this.objectGroup);
     }
 
+    async initMaterials() {
+    }
+
     async build(app_scene) {
         let geometry = new BufferGeometry();
-        let posArray = await (this.points(this.featuregeom_id));
+        let vertices = await (this.points(this.featuregeom_id));
-        let positions = new Float32BufferAttribute(posArray, 3);
+        // const positions = [];
+        // const normals = [];
+        // const uvs = [];
+        // for (let i = 0; i < vertices.length; i = i +3) {
+        //     // positions.push(...vertex.pos);
+        //     // normals.push(...vertex.norm);
+        //     uvs.push([0,0]);
+        //     uvs.push([1, 0]);
+        //     uvs.push([0, 1]);
+        //   }
+        let positions = new Float32BufferAttribute(vertices, 3);
         geometry.setAttribute('position', positions);
 
         //var TypeArray = this.idx.length > 65535 ? Uint32Array : Uint16Array;
@@ -98,6 +136,11 @@ class TinLayer extends Layer {
         let indices = new Uint16BufferAttribute(indexArray, 1);//.setDynamic(true);
         geometry.setIndex(indices);
 
+        // const uvNumComponents = 2;
+        // geometry.setAttribute(
+        //     'uv',
+        //     new Float32BufferAttribute(new Float32Array(uvs), uvNumComponents));
+
         geometry.scale(1, 1, 1);
         geometry.computeBoundingSphere();
         geometry.computeVertexNormals();// computed vertex normals are orthogonal to the face f
@@ -121,24 +164,66 @@ class TinLayer extends Layer {
         // });
         // this.materialsArray.push(this.material);
 
-        let uniforms = this.uniforms = {
+
-            clipping: {
+
-                clippingScale: { type: "f", value: 1.0 },
+        if (this.name == "test") {
-                color: { type: "c", value: new Color(color) },
+            let image = this.images[0];
-                clippingLow: { type: "v3", value: new Vector3(0, 0, 0) },
+            if (image.texture === undefined) {
-                clippingHigh: { type: "v3", value: new Vector3(0, 0, 0) }
+
+                // if (image.type == "esri") {
+                //     // image.texture = this._loadTextureData(image.data);
+                //     let data = await this.requestImage(image.url, image);
+
+                //     // image.texture = await new TextureLoader().load(data.href);
+                //     image.texture = await this.loadTexture(data.href);
+                // } 
+                if (image.type == "wms") {
+                    image.texture = await this.loadTextureWms(image.url, image);
+                }
+
             }
-        };
+            this.uniforms = {
-        this.material = new MyMeshStandardMaterial({
+                clipping: {
-            color: color,
+                    clippingScale: { type: "f", value: 1.0 },
-            metalness: 0.1,
+                    clippingLow: { type: "v3", value: new Vector3(0, 0, 0) },
-            roughness: 0.75,
+                    clippingHigh: { type: "v3", value: new Vector3(0, 0, 0) },
-            flatShading: true,
+                    // map: { type: 't', value: image.texture },
-            side: DoubleSide,
+                    percent: { type: "f", value: 0.7 }
-            // clippingPlanes: [this.xLocalPlane, this.yLocalPlane],
+                }
-            // clipIntersection: false,
+            };
-            // clipShadows: true,
+
-        }, uniforms.clipping);
+            // this.material = new MeshLambertMaterial({
+            //     map: image.texture,
+            //     transparent: true,
+            //     side: DoubleSide,
+            // });
+            this.material = new ShaderMaterial({
+                transparent: true,
+                side: DoubleSide,
+                uniforms: this.uniforms.clipping,
+                vertexShader: shader.vertexClipping,
+                fragmentShader: shader.fragmentClippingFront,
+            });
+
+        } else {
+            let uniforms = this.uniforms = {
+                clipping: {
+                    clippingScale: { type: "f", value: 1.0 },
+                    color: { type: "c", value: new Color(color) },
+                    clippingLow: { type: "v3", value: new Vector3(0, 0, 0) },
+                    clippingHigh: { type: "v3", value: new Vector3(0, 0, 0) }
+                }
+            };
+
+            this.material = new MyMeshStandardMaterial({
+                color: color,
+                metalness: 0.1,
+                roughness: 0.75,
+                flatShading: true,
+                side: DoubleSide
+            }, uniforms.clipping);
+        }
+
         this.materialsArray.push(this.material);
         let mesh = this.mainMesh = new Mesh(geometry, this.material);
         mesh.userData.layerId = this.index;

src/js/main.js

@@ -192,7 +192,7 @@ class Application {
         this.northArrow = new NorthArrow({ headLength: 1, headWidth: 1 }).addTo(this.map);
 
         let demLayer = new DemLayer({
-            q: 0, shading: true, type: 'dem', name: 'DEM Layer', color: 16382457, "baseExtent": this.map.baseExtent,
+            q: 0, shading: true, type: 'dem', name: 'DEM Layer', color: 16382457,
             "materialParameter": [{
                 "i": 0,
                 "materialtypee": 0,