From ebc0c208920361d8852de449707dc779455a98ae Mon Sep 17 00:00:00 2001 From: Arno Kaimbacher Date: Tue, 17 Nov 2020 16:06:09 +0100 Subject: [PATCH] - setWireFrameMode if you press key 'W' for all layers on map --- .gitignore | 3 +- src/js/layer/DxfLayer.js | 22 ++++++++----- src/js/main.js | 68 ++++++++++++++++++++++------------------ 3 files changed, 54 insertions(+), 39 deletions(-) diff --git a/.gitignore b/.gitignore index 21206ff..d4439b2 100644 --- a/.gitignore +++ b/.gitignore @@ -29,4 +29,5 @@ desktop.ini /yarn-error.log /notes.txt -/.env \ No newline at end of file +/.env +debug.log diff --git a/src/js/layer/DxfLayer.js b/src/js/layer/DxfLayer.js index 05f79fc..90209d5 100644 --- a/src/js/layer/DxfLayer.js +++ b/src/js/layer/DxfLayer.js @@ -20,6 +20,7 @@ class DxfLayer extends Layer { this.visible = true; this.opacity = 1; this.materialParameter = []; + this.materialsArray = []; for (var k in params) { this[k] = params[k]; } @@ -29,16 +30,23 @@ class DxfLayer extends Layer { this.borderVisible = false; } + setWireframeMode (wireframe) { + this.materialsArray.forEach(function (mat) { + //if (m.w) return; + //m.mat.wireframe = wireframe; + mat.wireframe = wireframe; + }); + } + setVisible(visible) { this.visible = visible; - // this.objectGroup.visible = visible; - //Q3D.application.queryObjNeedsUpdate = true; + // this.objectGroup.visible = visible; } async onAdd(map) { - await this.build(this.getScene()); - //this.update(); + await this.build(this.getScene()); map.update(); + // this.emit('add'); } //build BufferGeometry with Index @@ -46,7 +54,7 @@ class DxfLayer extends Layer { let geometry = new BufferGeometry(); // let positions = new Float32BufferAttribute(this.vertices, 3); - let posArray = await (this.points(134)); + let posArray = await (this.points(this.geomId)); console.log(posArray); let positions = new Float32BufferAttribute(posArray, 3); geometry.setAttribute('position', positions); @@ -55,7 +63,7 @@ class DxfLayer extends Layer { //var indices = this.indices = new TypeArray(this.idx); // let indexArray = this.indices = new Uint16Array(this.idx); - let indexArray = await (this.edges(134)); + let indexArray = await (this.edges(this.geomId)); let indices = new Uint16BufferAttribute(indexArray, 1);//.setDynamic(true); geometry.setIndex(indices); @@ -68,6 +76,7 @@ class DxfLayer extends Layer { this.material = new MeshBasicMaterial({ color: color }); + this.materialsArray.push(this.material); let mesh = this.mainMesh = new Mesh(geometry, this.material); // mesh.userData.layerId = this.index; // this.addObject(mesh, true); @@ -75,7 +84,6 @@ class DxfLayer extends Layer { if (app_scene) { app_scene.add(mesh); } - // this.emit('add'); } diff --git a/src/js/main.js b/src/js/main.js index 4d10e9d..3279d00 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -5,7 +5,7 @@ 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 { Vector3} from 'three/src/math/Vector3'; +import { Vector3 } from 'three/src/math/Vector3'; import { DxfLayer } from './layer/DxfLayer'; // import * as util from './core/utilities'; // import { OrbitControls } from './lib/OrbitControls.js' @@ -18,7 +18,8 @@ class Application { constructor(container) { this.container = container; - this.running = false; // this is public + this.running = false; + this.wireframeMode = false; this.objects = []; @@ -67,14 +68,14 @@ class Application { // this.camera.position.set(0, -0.1, 150); // this.camera.lookAt(new THREE.Vector3(0, 0, 0)); - this.camera = new PerspectiveCamera( 30, this.width / this.height, 100, 100000 ); - this.camera.up.set( 0, 0, 1 ); - const dirLight = new DirectionalLight( 0xffffff, 1 ); - dirLight.position.set( 585000 + 10000, 6135000 + 10000, -500 + 5000 ); - this.camera.add( dirLight ); + this.camera = new PerspectiveCamera(30, this.width / this.height, 100, 100000); + this.camera.up.set(0, 0, 1); + const dirLight = new DirectionalLight(0xffffff, 1); + dirLight.position.set(585000 + 10000, 6135000 + 10000, -500 + 5000); + this.camera.add(dirLight); let x = { min: 3955850, max: 4527300, avg: 4282010 }; - let y= { min: 2183600, max: 2502700, avg: 2302070 }; + 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); @@ -92,7 +93,7 @@ class Application { // 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); @@ -100,23 +101,43 @@ class Application { 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); + domEvent.on(window, 'keydown', this.keydown, this); + // util.setLoading("webgl"); this.start(); } + keydown(e) { + if (e.ctrlKey || e.altKey) return; + let keyPressed = e.which; + if (!e.shiftKey) { + //if (keyPressed == 27) app.closePopup(); // ESC + if (keyPressed === 87) { + this.setWireframeMode(); // W + } + } + } + + setWireframeMode() { + let wireframe = !this.wireframeMode; + if (wireframe === this.wireframeMode) return; + + for (var key in this.map._layers) { + let layer = this.map._layers[key]; + layer.setWireframeMode(wireframe); + } + + this.wireframeMode = wireframe; + this.animate(); + } + onWindowResize() { if (this._fullWindow) { this._setCanvasSize(window.innerWidth, window.innerHeight); @@ -173,23 +194,8 @@ class Application { } 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");