@ohuoy/easymap 1.0.21 → 1.0.23

package/src/components/layer/ThreeWallLayer copy.js

@@ -0,0 +1,517 @@
+import * as THREE from 'three'
+import { getBBox } from '../../utils/util';
+import {Threebox} from  '../../../lib/threebox-plugin'; 
+ import { lnglatsToWorld ,normalizeVertices,flattenVectors,projectToWorld} from '../../utils/mapUtil';
+import CameraSync from '../../utils/CameraSync';
+const WORLD_SIZE = 1024000;
+// var this.
+// let this.scene;
+let cameraTransform;
+// var this.group = new THREE.Group();
+export default class ThreeWallLayer{
+    tb = {}; 
+    group = new THREE.Group();
+    scene;
+    opacity = 0.8
+    scale = 2
+    limit = 6
+    colorFun = ()=>{
+        return [0,0,0,0]
+    }
+    addedFun = null
+    constructor(id,config) {
+        this.id = id;
+        this.opacity = Number(config.opacity) 
+        if(config.colorFun){
+            this.colorFun = config.colorFun       
+        }        
+        this.type = 'custom';
+        this.renderingMode = '2d';    
+        this.addedFun = config.addedFun
+    }
+
+    drawWallPoints(){
+        // this.removeObj(this.group);   
+        debugger   
+        // let geometry = new THREE.BufferGeometry();  
+        // let indices  =[[
+        //     1,
+        //     0,
+        //     3,
+        //     0,
+        //     2,
+        //     3
+        // ]]    
+        // let vertices = [
+        //     -332702,
+        //     -1016287,
+        //     2,
+        //     -332702,
+        //     -1016287,
+        //     4000,
+        //     -542702,
+        //     -1016287,
+        //     2,
+        //     -542702,
+        //     -1016287,
+        //     4000,
+        // ]
+        // let normals = [1,0,0];
+        // let colors = []
+        // const _color = new THREE.Color();
+        // _color.setRGB( 0/255, 133/255, 205/255, THREE.SRGBColorSpace );
+        // colors.push( _color.r, _color.g, _color.b );
+        // colors.push( _color.r, _color.g, _color.b );
+        // geometry.setIndex( indices );
+        // geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+        // // geometry.setAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );
+        // geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3) );
+        // // geometry.setAttribute( 'uv', new THREE.Float32BufferAttribute( uvs, 2 ) );
+        // geometry.computeBoundingSphere();
+        // geometry.computeVertexNormals();
+        // let material = new THREE.MeshBasicMaterial( {
+        //     side: THREE.DoubleSide,
+        //     // wireframe:true,
+        //     transparent:true,
+        //     // opacity:this.opacity,
+        //     opacity:1,
+        //     vertexColors: true,
+        // } );
+        
+        // material.color.convertSRGBToLinear();
+        // let mesh = new THREE.Mesh( geometry, material );
+        // mesh.renderOrder = 1;
+        // this.group.add( mesh );  
+        const triangles = 12000;
+    const geometry = new THREE.BufferGeometry();
+    const normals = [];
+    const positions = [];
+    const colors = [];
+    const color = new THREE.Color();
+
+    const pA = new THREE.Vector3();
+    const pB = new THREE.Vector3();
+    const pC = new THREE.Vector3();
+
+    const cb = new THREE.Vector3();
+    const ab = new THREE.Vector3();
+
+    const n = 800, n2 = n / 2;
+    const d = 120, d2 = d / 2;
+
+    for (let i = 0; i < triangles; i++) {
+
+        const x = -332702 + Math.random() * n - n2;
+        const y = -1016287 + Math.random() * n - n2;
+        const z = Math.random() * n - n2;
+
+        const ax = x + Math.random() * d - d2;
+        const ay = y + Math.random() * d - d2;
+        const az = z + Math.random() * d - d2;
+
+        const bx = x + Math.random() * d - d2;
+        const by = y + Math.random() * d - d2;
+        const bz = z + Math.random() * d - d2;
+
+        const cx = x + Math.random() * d - d2;
+        const cy = y + Math.random() * d - d2;
+        const cz = z + Math.random() * d - d2;
+
+        positions.push(ax, ay, az);
+        positions.push(bx, by, bz);
+        positions.push(cx, cy, cz);
+
+        pA.set(ax, ay, az);
+        pB.set(bx, by, bz);
+        pC.set(cx, cy, cz);
+
+        cb.subVectors(pC, pB);
+        ab.subVectors(pA, pB);
+        cb.cross(ab);
+
+        cb.normalize();
+
+
+        const nx = cb.x;
+        const ny = cb.y;
+        const nz = cb.z;
+
+        normals.push(nx, ny, nz);
+        normals.push(nx, ny, nz);
+        normals.push(nx, ny, nz);
+
+        color.setRGB(Math.random(), Math.random(), Math.random());
+
+        const alpha = Math.random();
+
+        colors.push(color.r, color.g, color.b, alpha);
+        colors.push(color.r, color.g, color.b, alpha);
+        colors.push(color.r, color.g, color.b, alpha);
+
+    }
+
+    geometry.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3));
+    geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));
+    geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));
+    geometry.computeBoundingSphere();
+
+    const material = new THREE.MeshPhongMaterial({
+        color: 0xFFFFFF,
+        vertexColors: true,
+        side: THREE.DoubleSide,
+    });
+
+    let mesh = new THREE.Mesh(geometry, material);
+    this.scene.add(mesh);
+        // for(let i in dataList){
+        //     i = Number(i)            
+        //     let item = dataList[i]            
+        //     let lng = item.lng;
+        //     let lat = item.lat;
+        //     let position = projectToWorld([lng,lat])
+        //     if(i < dataList.length -1){
+        //         let next = dataList[i+1]
+        //         if(lng == next.lng && lat == next.lat){
+        //             continue;
+        //         }
+        //     }
+        //     for(let j in item.data){
+        //         j = Number(j)
+        //         let indexJ = j+noDataLenth-1;                
+        //         if(j > -noDataLenth && j <= limitIndex){
+
+        //         }
+        //     }
+        // }
+    }
+
+    removeObj = (obj) => {
+        const clearCache = (item) => {
+            item.geometry.dispose();
+            item.material.dispose();
+          };
+        let arr = obj.children.filter((x) =>!! x);
+        arr.forEach((item) => {
+          if (item.children.length) {
+            removeObj(item);
+          } else {
+            clearCache(item);
+            item.clear();
+          }
+        });
+        obj.clear();
+        arr = null;
+      };
+
+    drawWall(dataList){  
+        this.removeObj(this.group);      
+        let geometry = new THREE.BufferGeometry();  
+        let indices  =[]    
+        let vertices = []
+        let normals = [];
+        let colors = []
+        let uvs = [];
+        let distance = dataList[0].distance;
+        let noDataLenth = distance[0] / distance[1]
+        let limitIndex = this.limit / distance[1]
+        limitIndex = limitIndex >= distance[2] -1 ? distance[2] -1 : limitIndex
+        // dataList = dataList.slice(0,5)
+        let len = limitIndex + noDataLenth;
+        let index = 0;
+        const _color = new THREE.Color();
+        for(let i in dataList){
+            i = Number(i)            
+            let item = dataList[i]            
+            let lng = item.lng;
+            let lat = item.lat;
+            let position = projectToWorld([lng,lat])
+            if(i < dataList.length -1){
+                let next = dataList[i+1]
+                if(lng == next.lng && lat == next.lat){
+                    continue;
+                }
+            }
+            
+            for(let j in item.data){
+                j = Number(j)
+                let indexJ = j+noDataLenth-1;                
+                if(j > -noDataLenth && j <= limitIndex){
+                    //let position = mapboxgl.MercatorCoordinate.fromLngLat({lng: lng, lat: lat}, (j+noDataLenth) * this.scale);                                       
+                    //(Math.floor(position.x * 1000000 )/10000,(j+noDataLenth) * this.scale ,Math.floor(position.y * 1000000)/10000)
+                    vertices.push(position.x ,position.y,position.z+(j+noDataLenth) * this.scale )
+                //     uvs.push(j)
+                //     uvs.push(j-0.5)
+                //    // debugger
+                //     normals.push( 1, 1, 1);
+                    let color = this.colorFun(item.data[j])
+                    _color.setRGB( color[0]/255, color[1]/255, color[2]/255, THREE.SRGBColorSpace );
+                    colors.push( _color.r, _color.g, _color.b );
+                    if(i < (dataList.length -2) && j< (limitIndex -1)){  
+                        let cb = new THREE.Vector3();//方向向量
+                        let ab = new THREE.Vector3();                                          
+                        let a = index +1
+                        let b = index     
+                        let c = index +len
+                        let d = index +len +1
+                        let pA = new THREE.Vector3(vertices[a],vertices[a+1],vertices[a+2]);
+                        let pB = new THREE.Vector3(vertices[b],vertices[b+1],vertices[b+2]);
+                        let pC = new THREE.Vector3(vertices[c],vertices[c+1],vertices[c+2]);
+                        let pD = new THREE.Vector3(vertices[d],vertices[d+1],vertices[d+2]);
+                        cb.subVectors(pC,pB)
+                        ab.subVectors(pA,pB)
+                        cb.cross(ab)
+                        cb.normalize();
+                        normals.push(cb.x,cb.y,cb.z)
+                        normals.push(cb.x,cb.y,cb.z)
+                        indices.push( a,b,d); // face one
+                        indices.push( b, c, d ); // face two   
+                        index = index +1;                     
+                    }
+                }                
+            } 
+            index = vertices.length / 3    
+        }
+        geometry.setIndex( indices );
+        geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+        geometry.setAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );
+        geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3) );
+        // geometry.setAttribute( 'uv', new THREE.Float32BufferAttribute( uvs, 2 ) );
+        geometry.computeBoundingSphere();
+        geometry.computeVertexNormals();
+        let material = new THREE.MeshBasicMaterial( {
+            side: THREE.DoubleSide,
+            // wireframe:true,
+            color: 0xFFFFFF,
+            // forceSinglePass:false,
+            // depthWrite:false,
+            // depthTest:false,
+            //transparent:true,
+            // opacity:this.opacity,
+           // opacity:1,
+            // shadowSide: THREE.DoubleSide,
+            // depthFunc:THREE.LessDepth,
+            // depthTest:false,
+            // depthWrite:false,
+            vertexColors: true,
+            // forceSinglePass:true
+        } );
+        
+        // material.needsUpdate = true;
+        material.color.convertSRGBToLinear();
+        let mesh = new THREE.Mesh( geometry, material );
+        mesh.renderOrder = 1;
+        // mesh = this.tb.Object3D({ obj: mesh, units: 'meters',anchor:'center'});
+        // this.tb.add(mesh);
+        this.group.add( mesh );     
+        this.map.fitBounds(getBBox(dataList.map(a=>[a.lng,a.lat])), {
+            padding: {top: 45, bottom:45, left: 35, right: 35},
+            maxZoom:11,
+            pitch:30
+        });  
+       
+    }
+
+    drawWallTest(dataList){  
+        let geometry = new THREE.BufferGeometry();  
+        let indices  =[]    
+        let vertices = []
+        let normals = [];
+        let colors = []
+        let size = 20;
+				let segments = 10;
+
+				let halfSize = size / 2;
+				let segmentSize = size / segments;
+
+				let _color = new THREE.Color();
+
+				// generate vertices, normals and color data for a simple grid geometry
+
+				for ( let i = 0; i <= segments; i ++ ) {
+
+					let y = ( i * segmentSize ) - halfSize;
+
+					for ( let j = 0; j <= segments; j ++ ) {
+
+						let x = ( j * segmentSize ) - halfSize;
+
+						vertices.push( x, - y, 0 );
+						normals.push( 0, 0, 1 );
+
+						let r = ( x / size ) + 0.5;
+						let g = ( y / size ) + 0.5;
+
+						_color.setRGB( r, g, 1, THREE.SRGBColorSpace );
+
+						colors.push( _color.r, _color.g, _color.b );
+
+					}
+
+				}
+
+				// generate indices (data for element array buffer)
+
+				for ( let i = 0; i < segments; i ++ ) {
+
+					for ( let j = 0; j < segments; j ++ ) {
+
+						let a = i * ( segments + 1 ) + ( j + 1 );
+						let b = i * ( segments + 1 ) + j;
+						let c = ( i + 1 ) * ( segments + 1 ) + j;
+						let d = ( i + 1 ) * ( segments + 1 ) + ( j + 1 );
+
+						// generate two faces (triangles) per iteration
+
+						indices.push( a, b, d ); // face one
+						indices.push( b, c, d ); // face two
+
+					}
+
+				}
+
+				//
+
+				geometry.setIndex( indices );
+				geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+				geometry.setAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );
+				geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
+
+				let material = new THREE.MeshBasicMaterial( {
+					// side: THREE.DoubleSide,
+					vertexColors: true
+				} );
+
+				let mesh = new THREE.Mesh( geometry, material );
+				this.scene.add( mesh );
+                // mesh = this.tb.Object3D({ obj: mesh, units: 'meters',anchor:'center'});
+                // this.tb.add(mesh);  
+        // for(let line of lines){
+        //     this.createLine(line.coords,`rgba(${line.color.join(',')})`)
+        // }
+    }
+
+    createLine(path,color){
+        let line = this.tb.line({
+            width:this.width,
+            opacity:this.opacity,
+            color:color,
+            geometry:path
+        })
+        this.tb.add(line)
+    }
+
+    onAdd(map, gl) {
+        this.map = map;
+        let container = map.getCanvas();
+        const w = container.clientWidth;
+        const h = container.clientHeight;
+        this.camera = new THREE.PerspectiveCamera(map.transform.fov, w / h, 0.1, 1);
+        this.scene = new THREE.Scene();  
+        this.scene.add(this.group)
+        new CameraSync(this.map, this.camera, this.group);
+        // let centerlngLat = map.getCenter()
+        // let center = mapboxgl.MercatorCoordinate.fromLngLat(centerlngLat)
+        // const scale = center.meterInMercatorCoordinateUnits();
+        // //this.scale = scale;
+        // let {x,y,z} = center;
+        // const modelRotate = [Math.PI / 2, 0, 0];
+        
+
+        // cameraTransform = new THREE.Matrix4()
+        // .makeTranslation(
+        //     x,
+        //     y,
+        //     z
+        // )
+        // .scale(
+        //     new THREE.Vector3(
+        //         scale,
+        //         -scale,
+        //         scale
+        //     )
+        // )
+        // .multiply( new THREE.Matrix4().makeRotationAxis(
+        //     new THREE.Vector3(1, 0, 0),
+        //     modelRotate[0]
+        // ))
+        // .multiply(new THREE.Matrix4().makeRotationAxis(
+        //     new THREE.Vector3(0, 1, 0),
+        //     modelRotate[1]
+        // ))
+        // .multiply(new THREE.Matrix4().makeRotationAxis(
+        //     new THREE.Vector3(0, 0, 1),
+        //     modelRotate[2]
+        // ));
+        // create two three.js lights to illuminate the model
+        // let directionalLight = new THREE.DirectionalLight(0xffffff);
+        // directionalLight.position.set(0, -70, 100).normalize();
+        // this.scene.add(directionalLight);
+
+        // let directionalLight2 = new THREE.DirectionalLight(0xffffff);
+        // directionalLight2.position.set(0, 70, 100).normalize();
+        // this.scene.add(directionalLight2);  
+        // this.tb = new Threebox(
+        //   map,
+        //   gl, //get the context from Mapbox
+        //   { defaultLights: true ,passiveRendering:false}
+        // ); 
+        this.scene.add(new THREE.AxesHelper(1000));
+        // this.scene.add(new THREE.CameraHelper( this.camera ));
+        // var ambient = new THREE.AmbientLight(0x444444);
+        // this.scene.add(ambient);
+        this.renderer = new THREE.WebGLRenderer({
+            canvas: map.getCanvas(),
+            context: gl, 
+            logarithmicDepthBuffer: true,
+            antialias: true
+        });
+        this.renderer.outputEncoding = THREE.sRGBEncoding;
+
+        this.renderer.autoClear = false;  
+        if(this.addedFun)       
+            this.addedFun()
+    }
+
+    render(gl, matrix) {      
+        //this.tb.update(); 
+        // const rotationX = new THREE.Matrix4().makeRotationAxis(
+        //     new THREE.Vector3(1, 0, 0),
+        //     modelTransform.rotateX
+        // );
+        // const rotationY = new THREE.Matrix4().makeRotationAxis(
+        //     new THREE.Vector3(0, 1, 0),
+        //     modelTransform.rotateY
+        // );
+        // const rotationZ = new THREE.Matrix4().makeRotationAxis(
+        //     new THREE.Vector3(0, 0, 1),
+        //     modelTransform.rotateZ
+        // );
+
+        // const m = new THREE.Matrix4().fromArray(matrix);
+        // const l = new THREE.Matrix4()
+        //     .makeTranslation(
+        //         modelTransform.translateX,
+        //         modelTransform.translateY,
+        //         modelTransform.translateZ
+        //     )
+        //     .scale(
+        //         new THREE.Vector3(
+        //             modelTransform.scale,
+        //             -modelTransform.scale,
+        //             modelTransform.scale
+        //         )
+        //     )
+        //     .multiply(rotationX)
+        //     .multiply(rotationY)
+        //     .multiply(rotationZ);
+
+        //this.camera.projectionMatrix = m.multiply(l);
+        // var m = new THREE.Matrix4().fromArray(matrix);
+        // this.camera.projectionMatrix = m.multiply(cameraTransform);;
+       // this.renderer.resetState();
+        
+        this.renderer.render(this.scene, this.camera);
+        this.map.triggerRepaint();
+    }
+
+}