diff --git a/assets/2dss.jpg b/assets/2dss.jpg
new file mode 100644
index 0000000..22efe86
Binary files /dev/null and b/assets/2dss.jpg differ
diff --git a/assets/Westeros2_natural.jpg b/assets/Westeros2_natural.jpg
new file mode 100644
index 0000000..c850a69
Binary files /dev/null and b/assets/Westeros2_natural.jpg differ
diff --git a/assets/height3.png b/assets/height3.png
new file mode 100644
index 0000000..69cb187
Binary files /dev/null and b/assets/height3.png differ
diff --git a/assets/ss.jpg b/assets/ss.jpg
new file mode 100644
index 0000000..6d8f00b
Binary files /dev/null and b/assets/ss.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..6ef7fc4
--- /dev/null
+++ b/index.html
@@ -0,0 +1,48 @@
+
+
+
+
+ custom WebGL layer-Threejs
+
+
+
+
+
+Game of Throne 3d Map
+
+
+
+
+
+
+
+
speed: "+t.speed+"
direction: "+(t.direction%360).toFixed(1)},200)}catch(t){console.error(t)}console.log("dashBoard register success.")}else console.error("dashBoard must bind with a drone instance.")}},{key:"featureList",value:function(t){if(void 0==t||"string"!=typeof t)return console.warn("invalid containerId.."),null}}]),t}();function N(t){return(N="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}var W={fps:30,objs:null,get:function(t){return this.objs=t,this},to:function(t,e,i){if(this.lastAniParams=[t,e],void 0!=t&&void 0!=e&&null!=W.objs){var n=function(){var t=!1,e=!1;if(a>=r)if(W.loop){a=0;for(var n=0;n",l.setIconDiv(p,a)):void 0!=c&&void 0!=u?l.isChanged(this.lastData[e],c)&&(l.setChart(p,x,u,2*Q),this.lastData[e]=c):p.innerHTML=(i.content||"")+"",void 0!=u&&$(p),f.className="dom-ele",d.className="dom-ele",f.style.left=r[0]+"px",f.style.top=r[1]-(U-10)+"px",d.style.left=r[0]-K+"px",d.style.top=r[1]-K+"px",void 0==this.doms[3*e])p.className="dom-popup ".concat(s),f.className=d.className="dom-ele ".concat(s),console.warn("add ".concat(s," css to dom.")),this.domContainer.appendChild(p),this.domContainer.appendChild(f),this.domContainer.appendChild(d),(y=this.doms).push.apply(y,[p,f,d])}}}}.bind(q(q(i))),i.domOpts=t.doms,t&&t.map&&(i.setMap(t.map),t.map.on("move",i.redraw)),i.doms=[],i.lastData=[],i.redraw(),console.log("Dom overlayer add to Map..."),i}return function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&H(t,e)}(e,I),function(t,e,i){e&&J(t.prototype,e),i&&J(t,i)}(e,[{key:"_init",value:function(){var t=this.map._canvasContainer,e=this.map._canvas,i=document.createElement("div");return i.style.position="absolute",i.className="overlay-dom",i.style.width=e.style.width,i.style.height="0",t.parentElement.appendChild(i),i}},{key:"setDoms",value:function(t){Array.isArray(t)&&(this.domOpts=t,this.clearDoms(),this.redraw())}},{key:"findDom",value:function(t){for(var e=0;e0&&void 0!==arguments[0]&&arguments[0],arguments.length>1&&arguments[1];if(this.canvas&&(t=this.canvas.getContext("2d")),t instanceof CanvasRenderingContext2D){t.clearRect(0,0,this.canvas.width,this.canvas.height),function(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1];t.strokeStyle="green",t.setLineDash([]),t.globalAlpha=.95,t.globalCompositeOperation="source-over",e?(console.warn("enabling line shadowBlur"),t.shadowBlur=4,t.shadowColor="#0f0"):t.shadowBlur=0;t.lineCap="round",t.lineJoin="round",t.lineWidth=12}(t);var i=[0,0];if(!Array.isArray(this.data))return;i=this.data.map(function(t){return e.lnglat2pix(t[0],t[1])}),t.beginPath(),t.moveTo(i[0][0],i[0][1]);for(var n=1;n2&&void 0!==arguments[2]?arguments[2]:30,n=arguments.length>3?arguments[3]:void 0,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:.5,r=arguments.length>5?arguments[5]:void 0,a=Math.atan((e[1]-t[1])/(e[0]-t[0]));e[0]-t[0]<0&&(a+=Math.PI);for(var h=[],l=function(t,e){return Math.sqrt(Math.pow(e[1]-t[1],2)+Math.pow(e[0]-t[0],2))}(t,e)/i,s=function(t,e){r&&n&&(n.save(),n.translate(t,e),n.rotate(a),n.drawImage(r,-r.width/2,-r.width/2),n.restore())},c=o;c<=l;c+=1){var u=Math.round(t[0]+c*i*Math.cos(a)),p=Math.round(t[1]+c*i*Math.sin(a));h.push([u,p]),s(u,p)}}(e,i,30,t,n,o)}}l&&(pt=l.debounce(function t(e,i){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2],o=.5;o=o<1?o+.01:.5;for(var r=1;r {
+ imgWidth = evt.target.width;
+ imgHeight = evt.target.height;
+ // !!important, align vertice and imgPix count by - 1.
+ bufferPlane = bufferPlaneGeom(imgWidth - 1, imgHeight - 1, imgWidth - 1, imgHeight - 1);
+ loadHeight();
+ }
+ image.src = imgURL;
+}
+
+var ambientlight = new THREE.AmbientLight(0xffffff);
+
+function updateTerrainLayer() {
+ // trackControl.update();
+ // this.renderer.render(this.scene, this.camera);
+ // requestAnimationFrame(draw);
+}
+
+// add material for bufferPlane.. called by THREE textureLoader.
+function addTexture(texture) {
+ texture.mapping = THREE.CubeReflectionMapping;
+ console.log('texture loaded. mapping type is : '+ texture.mapping);
+ var imgMaterial = new THREE.MeshLambertMaterial({
+ map: texture,
+ side: THREE.DoubleSide
+ });
+
+ wireMaterial = new THREE.MeshLambertMaterial({
+ color: 0x88eeff,
+ wireframe: true
+ });
+
+ // console.log('bufferPlane has faces number: ' + customMesh.faces.length);
+ bufferPlaneMesh = new THREE.Mesh(bufferPlane, imgMaterial);
+ bufferPlaneMesh.position.set(-288, 0, 55);
+ bufferPlaneMesh.rotation.x -= Math.PI / 2
+ bufferPlaneMesh.receiveShadow = true;
+ scene.add(bufferPlaneMesh);
+ var statusBar = document.querySelector("#reset");
+ if (statusBar) {
+ statusBar.innerHTML = "receive data completed.";
+ }
+ // requestAnimationFrame(rotate1);
+}
+
+function toggleTerrain() {
+ bufferPlaneMesh.visible = !bufferPlaneMesh.visible;
+}
+
+function customObj3d() {
+ var mesh = new THREE.Object3D();
+
+ mesh.add( new THREE.LineSegments(
+
+ new THREE.Geometry(),
+
+ new THREE.LineBasicMaterial( {
+ color: 0xffffff,
+ transparent: true,
+ opacity: 0.5
+ } )
+
+ ) );
+
+ mesh.add( new THREE.Mesh(
+
+ new THREE.Geometry(),
+
+ new THREE.MeshPhongMaterial( {
+ color: 0x156289,
+ emissive: 0x072534,
+ side: THREE.DoubleSide,
+ shading: THREE.FlatShading
+ } )
+
+ ) );
+ return mesh;
+}
+function bufferPlaneGeom(width, height, xseg, yseg) {
+ var geometry = new THREE.PlaneBufferGeometry( width, height, xseg, yseg);
+ // var material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide, wireframe: true} );
+ // var plane = new THREE.Mesh( geometry, material );
+ // plane.position.set(0, 0, -10);
+
+ return geometry;
+}
+
+// set z-depth value for vertices in geometry
+function attachHeight(geometry, data) {
+ // return position flatArray [x,y,z,x1,y1,z1...] in geometry
+ var flatArray = geometry.attributes.position.array;
+ var verticesCount = flatArray.length / 3.0;
+ console.warn('bufferGeom Vertices Array length: '+ verticesCount);
+ // Actually you would find triangle verticeCount is more than imgWidth*imgHeight by (imgWidth + imgHeight + 1). Align required.
+ for ( var i = 0, j = 0; i < verticesCount; i ++, j += 3 ) {
+ if (data[i] === undefined) {
+ console.warn(`data[${i}] is undefined..`);
+ break;
+ } else {
+ // set each vertice z-depth value with height
+ flatArray[ j-1 ] = data[i] * extrusionRatio;
+ }
+ }
+ console.warn('height attach finished... height[i]:' + data[i - 200]);
+ return geometry;
+}
+
+function generateHeight( width, height ) {
+
+ var size = width * height, data = new Uint8Array( size ),
+ perlin = new ImprovedNoise(), quality = 1, z = Math.random();
+
+ for ( var j = 0; j < 4; j ++ ) {
+
+ for ( var i = 0; i < size; i ++ ) {
+
+ var x = i % width, y = ~~ ( i / width );
+ data[ i ] += Math.abs( perlin.noise( x / quality, y / quality, z ) * quality * 1.75 );
+
+ }
+
+ quality *= 5;
+
+ }
+ console.log('return generateHeight data');
+ return data;
+}
+
+// xlen means width of this geometry, interval means segment..
+function customGeom(xlen, ylen, segment) {
+ var startX = 0;
+ var endX = startX + xlen;
+ var startY = 0;
+ var endY = startY + ylen;
+ var inter = parseInt(xlen/segment);
+ var geometry = new THREE.Geometry();
+ for (let i = 0; i < xlen; i++) {
+ for (let k = 0; k < ylen; k++) {
+ geometry.vertices.push(new THREE.Vector3(startX, startY + k * inter, Math.random()*0.5));
+ }
+ startX += inter;
+ }
+
+ var vertices = geometry.vertices;
+ console.log('custom geometry, vertices number:' + vertices.length);
+ for (let j = 0; j < vertices.length-segment-1; j++) {
+ if ((j+1) % segment == 0 ) {
+ continue;
+ }
+ geometry.faces.push(new THREE.Face3(j, j+segment, j+segment+1));
+ geometry.faces.push(new THREE.Face3(j+segment+1, j+1, j));
+ }
+ return geometry;
+}
+
+function loadHeight() {
+ /*var fileContain = document.getElementById('heightFile');*/
+ var canvas = document.getElementById('height');
+ // Malloc memory for Array length with 1024*1024, storing uint8(0~255)
+ var data = new Uint8Array(imgWidth * imgHeight);
+ canvas.width = imgWidth;
+ canvas.height = imgHeight;
+
+ context = canvas.getContext('2d');
+ context.fillStyle = '#000';
+ context.fillRect( 0, 0, imgWidth, imgHeight);
+
+ var img = new Image();
+ img.onload = function() {
+ context.drawImage(img, 0, 0);
+
+ // get FlatArray of band value [r,g,b,r1,g1,b1...] for JPG, [r,g,b,a,r1,g1,b1,a1...] for PNG.
+ image = context.getImageData( 0, 0, imgWidth, imgHeight );
+ imageData = image.data;
+ console.warn(`image data length: ${imageData.length}, extract band g`);
+ // get the Second band value from height source image.
+ for (var i = 0, j = 0, l = imageData.length; i < l; j++, i+=4) {
+ // var hue = (imageData[i] + imageData[i + 1] + imageData[i + 2]) / 3;
+ data[j] = imageData[i];
+ // // //// green * 1.2 - blue * .6 - hue * .2
+ // data[j] = imageData[i + 1] * 1.2 - imageData[i + 2] * .6 - hue * .4; // + 1 to get second band as height value.
+ // extract imageData as single band.
+ imageData[i] = data[j];
+ imageData[i + 1] = 0;
+ imageData[i + 2] = 0;
+ }
+ context.clearRect( 0, 0, imgWidth, imgHeight);
+ context.putImageData(image, 0, 0);
+ // attach height to bufferPlane geometry.
+ attachHeight(bufferPlane, data);
+ loadTexture();
+ }
+ // img.src = imgURL;
+ img.src = heightImgURL;
+ return data;
+}
+
+// load a resource
+function loadTexture() {
+ loader.load(
+ // resource URL
+ imgURL,
+ // Function when resource is loaded
+ this.addTexture,
+ // Function called when download progresses
+ function ( xhr ) {
+ console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
+ },
+ // Function called when download errors
+ function ( xhr ) {
+ console.log( 'An error happened' );
+ }
+ );
+}
\ No newline at end of file