- npm updates (e.g. webpack 5.4.0)

- read layer from rest api

.babelrc

@@ -1,5 +1,6 @@
 { 
     "plugins": [        
-        ["@babel/plugin-proposal-class-properties", { "loose": true }]
+        ["@babel/plugin-proposal-class-properties", { "loose": true }],
+        ["@babel/plugin-transform-runtime", { "regenerator": true }]
     ] 
 }

package.json

@@ -1,30 +1,32 @@
 {
     "dependencies": {
-        "three": "^0.119.1"
+        "axios": "^0.21.0",
+        "three": "^0.122.0"
     },
     "devDependencies": {
         "@babel/core": "^7.11.1",
         "@babel/plugin-proposal-class-properties": "^7.10.4",
+        "@babel/plugin-transform-runtime": "^7.12.1",
         "@babel/preset-env": "^7.11.0",
         "babel-loader": "^8.1.0",
         "concurrently": "^5.2.0",
-        "css-loader": "^4.2.0",
+        "css-loader": "^5.0.1",
         "dotenv": "^8.2.0",
         "file-loader": "^6.0.0",
         "img-loader": "^3.0.1",
-        "less-loader": "^6.2.0",
+        "less-loader": "^7.1.0",
-        "mini-css-extract-plugin": "^0.9.0",
+        "mini-css-extract-plugin": "^1.3.1",
-        "style-loader": "^1.2.1",
+        "style-loader": "^2.0.0",
-        "terser-webpack-plugin": "^4.0.0",
+        "terser-webpack-plugin": "^5.0.3",
         "url-loader": "^4.1.0",
-        "webpack": "^4.44.1",
+        "webpack": "^5.4.0",
-        "webpack-cli": "^3.3.12",
+        "webpack-cli": "^4.2.0",
-        "webpack-merge": "^4.2.2"
+        "webpack-merge": "^5.4.0"
     },
     "scripts": {
         "babel": "babel --presets es2015 js/main.js -o build/main.bundle.js",
         "serve": "http-server",
-        "prod": "rm -rf dist && webpack",
+        "prod": "rm -rf dist && webpack --progress --mode=production",
-        "watch": "concurrently \"npm run serve\" \"npx webpack --source-maps --watch\" "
+        "watch": "concurrently \"npm run serve\" \"npx webpack --progress --mode=development --watch\" "
     }
 }

src/js/core/Map.js

@@ -11,9 +11,9 @@ class Map extends OrbitControls {
     _controlContainer;
     _controls;
 
-    constructor(camera, scene, domElement, container) {
+    constructor(size, center, camera, scene, domElement, container) {
         // call parent constructor of OrbitControls
-        super(camera, scene, domElement);
+        super(size, center, camera, scene, domElement);
 
         this.container = container;
 

src/js/layer/DxfLayer.js

@@ -1,15 +1,169 @@
-import { Group } from 'three/src/objects/Group';
+// import { Group } from 'three/src/objects/Group';
+import { BufferGeometry } from 'three/src/core/BufferGeometry';
+import { Float32BufferAttribute, Uint16BufferAttribute } from 'three/src/core/BufferAttribute';
+import { MeshBasicMaterial } from 'three/src/materials/MeshBasicMaterial.js';
+import { Mesh } from 'three/src/objects/Mesh';
+import { Layer } from './Layer';
+import { BitStream } from '../lib/bitstream';
+
+const POINTURL = 'https://geusegdi01.geus.dk/geom3d/data/nodes/';
+const EDGEURL = 'https://geusegdi01.geus.dk/geom3d/data/triangles/';
 
 class DxfLayer extends Layer {
 
-    constructor() {
+
+
+    constructor(params) {
         super();
 
-        this.objectGroup = new Group();
+        //this.features = [];        
+        this.visible = true;
+        this.opacity = 1;
+        this.materialParameter = [];
+        for (var k in params) {
+            this[k] = params[k];
+        }
+
+        // this.objectGroup = new Group();
         this.queryableObjects = [];
         this.borderVisible = false;
-        this.declaredClass = "DxfLayer";
     }
+
+    setVisible(visible) {
+        this.visible = visible;
+        // this.objectGroup.visible = visible;
+        //Q3D.application.queryObjNeedsUpdate = true;
+    }
+
+    async onAdd(map) {
+        await this.build(this.getScene());
+        //this.update();
+        map.update();
+    }
+
+    //build BufferGeometry with Index
+    async build(app_scene) {
+
+        let geometry = new BufferGeometry();
+        // let positions = new Float32BufferAttribute(this.vertices, 3);       
+        let posArray = await (this.points(134));
+        console.log(posArray);
+        let positions = new Float32BufferAttribute(posArray, 3);
+        geometry.setAttribute('position', positions);
+
+        //var TypeArray = this.idx.length > 65535 ? Uint32Array : Uint16Array;
+        //var indices = this.indices = new TypeArray(this.idx);
+
+        // let indexArray = this.indices = new Uint16Array(this.idx);
+        let indexArray = await (this.edges(134));
+        let indices = new Uint16BufferAttribute(indexArray, 1);//.setDynamic(true);
+        geometry.setIndex(indices);
+
+        geometry.scale(1, 1, 1);
+        geometry.computeBoundingSphere();
+        geometry.computeVertexNormals();// computed vertex normals are orthogonal to the face f
+        geometry.computeBoundingBox();
+
+        let color = parseInt("907A5C", 16);
+        this.material = new MeshBasicMaterial({
+            color: color
+        });
+        let 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);
+        }
+        // this.emit('add');
+    }
+
+
+    async points(geomId) {
+        const url = POINTURL + geomId;
+        const buffer = await this.request(url);
+        return this.unpackVertices(buffer);
+    }
+
+    async edges(geomId) {
+        const url = EDGEURL + geomId;
+        const buffer = await this.request(url);
+        return this.unpackEdges(buffer);
+    }
+
+    async request(url) {
+        const response = await fetch(url);
+        if (response.ok) {
+            return response.arrayBuffer();
+        }
+        else {
+            console.log('could not fetch geometry data');
+        }
+    }
+
+    unpackEdges(arrayBuffer) {
+        const METABYTES = 13;
+        var dv = new DataView(arrayBuffer, METABYTES);
+        var indices = new Uint32Array((arrayBuffer.byteLength - METABYTES) / 4);
+        for (var i = 0; i < indices.length; i++) {
+            indices[i] = dv.getUint32(i * 4, true);
+        }
+        return indices;
+    }
+
+    unpackVertices(arrayBuffer) {
+
+        const DIMENSIONS = 3;
+        const ONEBYTE = 1, FOURBYTE = 4;    // bytes count for metadata in PG_pointcloud (significant bits compression)
+        const dataView = new DataView(arrayBuffer);
+        let ptr = ONEBYTE + 2 * FOURBYTE;
+        const pointsCount = dataView.getUint32(ptr, true);  // 1 + 4 + 4 = 9 bytes offset
+        const posArray = new Float32Array(pointsCount * DIMENSIONS);
+        ptr += FOURBYTE;                                  //          
+        var bytesCount = 0, significantBitsCount = 0, commonBits, significantBits;
+        var dim = 0;
+        while (dim < 3) {
+            ptr += ONEBYTE;
+            bytesCount = dataView.getInt32(ptr, true) - 8;
+            ptr += FOURBYTE;
+            significantBitsCount = dataView.getUint32(ptr, true);
+            ptr += FOURBYTE;
+            commonBits = this.readCommonBits(dataView, ptr);
+            ptr += FOURBYTE;
+            significantBits = this.readSignificantBits(dataView, ptr, bytesCount);
+            let value = 0.0;
+            for (var j = dim, i = 0; i < pointsCount; j += DIMENSIONS, i++) {
+                value = significantBits.readBits(significantBitsCount) | commonBits;
+                if (dim === 2) {
+                    value = value / 100;       // z values in pc_patch from DB are multiplied by 100
+                }
+                posArray[j] = value;
+            }
+            ptr += bytesCount;
+            dim += 1;
+        }
+        return posArray;
+    }
+
+    readCommonBits(dataView, ptr) {
+        var temp = new Int32Array(1);
+        temp[0] = dataView.getInt32(ptr, false);     // why false ??
+        var combits = new BitStream(new Uint8Array(temp.buffer));
+        return combits.readBits(32);
+    }
+
+    readSignificantBits(dataView, ptr, bytesCount) {
+        var temp = new Int32Array(bytesCount / 4);
+        for (var i = ptr, j = 0; i < ptr + bytesCount; i += 4, j++) {
+            temp[j] = dataView.getInt32(i);
+        }
+        var sigbits = new BitStream(new Uint8Array(temp.buffer));
+        return sigbits;
+    }
+
+
+
+
 }
 
 

src/js/lib/OrbitControls.js

@@ -72,7 +72,7 @@ class OrbitControls extends EventEmitter {
 
     rotateDifference;
 
-    constructor(camera, scene, domElement) {
+    constructor(size, center, camera, scene, domElement) {
         super();
 
         this.object = camera;
@@ -84,7 +84,7 @@ class OrbitControls extends EventEmitter {
 
         // "target" sets the location of focus, where the control orbits around
         // and where it pans with respect to.
-        this.target = new Vector3();
+        this.target = center; //new Vector3();
         // center is old, deprecated; use "target" instead
         this.center = this.target;
 
@@ -94,8 +94,10 @@ class OrbitControls extends EventEmitter {
         this.zoomSpeed = 1.0;
 
         // Limits to how far you can dolly in and out
-        this.minDistance = 0;
+        // this.minDistance = 0;
-        this.maxDistance = Infinity;
+        // this.maxDistance = Infinity;
+        this.minDistance =  size*0.75;
+        this.maxDistance = size*15;
 
         // Set to true for upside down
         this.upsideDown = false;

src/js/lib/bitstream.js

@@ -0,0 +1,78 @@
+// From: https://gist.github.com/claus/2829664 */
+// Usage:
+// var buf = new Uint8Array(128);
+// var bitstream = new BitStream(buf);
+// bitstream.writeBits(12, 0xffff);
+// bitstream.seekTo(0);
+// bitstream.readBits(6); // 111111  (63)
+// bitstream.readBits(10); // 1111110000  (1008)
+// ES6'ified by mbw@geus.dk 20190605
+
+
+export class BitStream  {
+
+	constructor(uint8Array)		{
+		this.a = uint8Array;
+		this.position = 0;
+		this.bitsPending = 0;			
+	}
+
+	writeBits(bits, value) {
+		if (bits === 0) { return; }
+		value &= (0xffffffff >>> (32 - bits));
+		let bitsConsumed;
+		if (this.bitsPending > 0) {
+			if (this.bitsPending > bits) {
+				this.a[this.position - 1] |= value << (this.bitsPending - bits);
+				bitsConsumed = bits;
+				this.bitsPending -= bits;
+			} else if (this.bitsPending === bits) {
+				this.a[this.position - 1] |= value;
+				bitsConsumed = bits;
+				this.bitsPending = 0;
+			} else {
+				this.a[this.position - 1] |= value >> (bits - this.bitsPending);
+				bitsConsumed = bitsPending;
+				this.bitsPending = 0;
+			}
+		} else {
+			bitsConsumed = Math.min(8, bits);
+			this.bitsPending = 8 - bitsConsumed;
+			this.a[this.position++] = (value >> (bits - bitsConsumed)) << this.bitsPending;
+		}
+		bits -= bitsConsumed;
+		if (bits > 0) {
+			this.writeBits(bits, value);
+		}
+	}
+
+	readBits(bits, bitBuffer) {
+		if (typeof bitBuffer === "undefined") { bitBuffer = 0; }
+		if (bits === 0) { return bitBuffer; }
+		let partial;
+		let bitsConsumed;
+		if (this.bitsPending > 0) {
+			const byte = this.a[this.position - 1] & (0xff >> (8 - this.bitsPending));
+			bitsConsumed = Math.min(this.bitsPending, bits);
+			this.bitsPending -= bitsConsumed;
+			partial = byte >> this.bitsPending;
+		} else {
+			bitsConsumed = Math.min(8, bits);
+			this.bitsPending = 8 - bitsConsumed;
+			partial = this.a[this.position++] >> this.bitsPending;
+		}
+		bits -= bitsConsumed;
+		bitBuffer = (bitBuffer << bitsConsumed) | partial;
+		return (bits > 0) ? this.readBits(bits, bitBuffer) : bitBuffer;
+	}
+
+	seekTo(bitPos) {
+		this.position = (bitPos / 8) | 0;
+		this.bitsPending = bitPos % 8;
+		if(this.bitsPending > 0) {
+			this.bitsPending = 8 - this.bitsPending;
+			this.position++;
+		}
+	}
+
+}

src/js/main.js

@@ -4,7 +4,9 @@ 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 { BoxLayer } from './layer/BoxLayer';
+import { Vector3} from 'three/src/math/Vector3';
+import { DxfLayer } from './layer/DxfLayer';
 // import * as util from './core/utilities';
 // import { OrbitControls } from './lib/OrbitControls.js'
 import { Map } from './core/Map';
@@ -42,7 +44,9 @@ class Application {
         // 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
+        var Empty = Object.freeze([]);
+        this.renderer.clippingPlanes = Empty; // GUI sets it to globalPlanes
+        this.renderer.localClippingEnabled = true;
         this.container.appendChild(this.renderer.domElement);
 
         /* Scene: that will hold all our elements such as objects, cameras and lights. */
@@ -60,15 +64,54 @@ class Application {
         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.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.camera = new PerspectiveCamera( 30, this.width / this.height, 100, 100000 );
-        this.map = new Map(this.camera, this.scene, this.renderer.domElement, this.container);
+        this.camera.up.set( 0, 0, 1 );
-        let boxLayer = new BoxLayer({ width: 10, height: 10, depth: 10 });
+        const dirLight = new DirectionalLight( 0xffffff, 1 );
-        this.map.addLayer(boxLayer);
+        dirLight.position.set( 585000 + 10000, 6135000 + 10000, -500 + 5000 );
+        this.camera.add( dirLight );
 
-        domEvent.on(window, 'click', this.onWindowResize, this);
+        let x = { min: 3955850, max: 4527300, avg: 4282010 };
+        let y=  { min: 2183600, max: 2502700, avg: 2302070 };
+        let z = { min: -60066, max: 3574.94, avg: -13616.3 };
+        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);
+        const camDirection = new Vector3(-0.5, -Math.SQRT1_2, 0.5);
+        const camOffset = camDirection.multiplyScalar(size * 2);
+        this.camera.position.copy(center);
+        this.camera.position.add(camOffset);
+        this.camera.near = size * 0.1;
+        this.camera.far = size * 25;
+        this.camera.updateProjectionMatrix();
+
+
+        // this.controls = new OrbitControls(this.camera, this.scene, this.renderer.domElement);
+        this.map = new Map(size, center, this.camera, this.scene, this.renderer.domElement, this.container);
+        // this.map.target = center;
+        // this.map.minDistance =  size*0.75;
+        // this.map.maxDistance = size*15;
+       
+        // let boxLayer = new BoxLayer({ width: 10, height: 10, depth: 10 });
+        // this.map.addLayer(boxLayer);
+
+
+        let dxfLayer = new DxfLayer({
+            geomId: 134, q: true, type: "3dface", name: "Mittelpannon", description: "test"
+        });
+        dxfLayer.addListener('add', this.animate, this); 
+        // dxfLayer.addListener('added', function(){
+        //     console.log('added');         
+        //   });
+        // dxfLayer.idx = [0, 1, 2, 3, 4, 5];
+        // dxfLayer.vertices = new Float32Array([10.421, -20.878, 0.068, 11.241, -20.954, 0.055, 10.225, -20.297, 0.078, 0.161, -6.548, 0.535, -0.163, -6.675, 0.538, 0.116, -6.874, 0.537,]);
+       
+        this.map.addLayer(dxfLayer);
+
+      
+
+        // domEvent.on(window, 'click', this.onWindowResize, this);
 
         // util.setLoading("webgl");  
         this.start();
@@ -83,7 +126,7 @@ class Application {
         }
     }
 
-    _setCanvasSize (width, height) {
+    _setCanvasSize(width, height) {
         this.width = width;
         this.height = height;
         this.camera.aspect = width / height;
@@ -143,10 +186,10 @@ class Application {
         this.renderer.render(this.scene, this.camera);
     }
 
-    add(layer) {
+    // add(layer) {
-        this.objects.push(layer);
+    //     this.objects.push(layer);
-        this.scene.add(layer.getMesh());
+    //     this.scene.add(layer.getMesh());
-    }
+    // }
 }
 
 var container = document.getElementById("webgl");

webpack.config.js

@@ -18,7 +18,7 @@ const devMode = (process.env.NODE_ENV !== 'production');
 const fileNamePrefix = isProduction ? '[chunkhash].' : '';
 
 module.exports = {
-    mode: process.env.NODE_ENV,
+    // mode: process.env.NODE_ENV,
     context: __dirname,
     entry: './src/js/main.js',
     output: {
@@ -37,19 +37,19 @@ module.exports = {
                     name: 'fonts/[name].[ext]'
                 }
             },
-            {
+            // {
-                test: /\.(png|jpg|gif)$/,
+            //     test: /\.(png|jpg|gif)$/,
-                loaders: [
+            //     loaders: [
-                    {
+            //         {
-                        loader: 'url-loader',
+            //             loader: 'url-loader',
-                        options: {
+            //             options: {
-                            limit: 10000,
+            //                 limit: 10000,
-                            name: 'images/[name].[ext]'
+            //                 name: 'images/[name].[ext]'
-                        }
+            //             }
-                    },
+            //         },
-                    'img-loader'
+            //         'img-loader'
-                ],
+            //     ],
-            },
+            // },
             {
                 test: /\.js$/,
                 exclude: /(node_modules|bower_components)/,
@@ -65,9 +65,8 @@ module.exports = {
                 test: /\.(less|css)$/,
                 use: [
                     {
-                        // loader: (isProduction === true) ? MiniCssExtractPlugin.loader : 'style-loader',
+                        loader: (isProduction === true) ? MiniCssExtractPlugin.loader : 'style-loader',
                         // loader: 'style-loader',                      
-                        loader: MiniCssExtractPlugin.loader,
                         // loader: MiniCssExtractPlugin.loader,
                         // options: {
                         //     hmr: process.env.NODE_ENV === 'development',
@@ -93,23 +92,31 @@ module.exports = {
     stats: {
         colors: true
     },
-    // devtool: 'source-map',
+    // devtool: 'inline-source-map',
 
     optimization: {
         minimize: isProduction,
-        minimizer: [new TerserPlugin({
+        minimizer: [
-            parallel: true,
+            new TerserPlugin({
-            sourceMap: true,
+                // cache: true,
-            terserOptions: {
+                parallel: true,
-                extractComments: 'all',
+                // sourceMap: true, // Must be set to true if using source-maps in production
-                compress: {
+                extractComments: true,
-                    drop_console: true,
+                terserOptions: {
-                    drop_debugger: true,
+                    
+                    compress: {
+                        directives: false,
+                    //     drop_console: true,
+                    //     drop_debugger: true,
+                    //     keep_classnames: false,
+                    //     keep_fnames: false,
+                    },
+                    mangle: true, // Note `mangle.properties` is `false` by default.
                     keep_classnames: false,
                     keep_fnames: false,
-                },
+                }
-            }
+            })
-        })],
+        ],
     },
 
     plugins: [
@@ -119,6 +126,7 @@ module.exports = {
             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
@@ -127,6 +135,7 @@ module.exports = {
             filename: '[name].css',
             chunkFilename: '[id].css',
         }),
+
         // new PurifyCSSPlugin({
         //     paths: glob.sync(__dirname + '/*.html'),
         //     minimize: true,
@@ -144,14 +153,14 @@ if (isProduction === true) {
         // 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
+        // function () { // Create a manifest.json file that contain the hashed file names of generated static resources
-            this.plugin("done", function (status) {
+        //     this.plugin("done", function (status) {
-                require("fs").writeFileSync(
+        //         require("fs").writeFileSync(
-                    __dirname + "/dist/manifest.json",
+        //             __dirname + "/dist/manifest.json",
-                    JSON.stringify(status.toJson().assetsByChunkName)
+        //             JSON.stringify(status.toJson().assetsByChunkName)
-                );
+        //         );
-            });
+        //     });
-        },
+        // },
 
     );
     //development