@ohuoy/easymap 1.0.21 → 1.0.23

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

@@ -0,0 +1,1104 @@
+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
+    }
+
+    drawWallPoints2(dataList){
+        let center = [dataList[0].lng,dataList[0].lat] 
+        let width = 10,height = 10,depth = 10,widthSegments = 1,heightSegments = 1,depthSegments = 1;
+        widthSegments = Math.floor( widthSegments );
+		heightSegments = Math.floor( heightSegments );
+		depthSegments = Math.floor( depthSegments );
+        const indices = [];
+		const vertices = [];
+		const normals = [];
+        const colors = []
+		const uvs = [];
+        let numberOfVertices = 0;
+		let groupStart = 0;
+        function buildPlane( u, v, w, udir, vdir, width, height, depth, gridX, gridY, materialIndex ) {
+            const segmentWidth = width / gridX;
+            const segmentHeight = height / gridY;
+            const widthHalf = width / 2;
+            const heightHalf = height / 2;
+            const depthHalf = depth / 2;
+            const gridX1 = gridX + 1;
+            const gridY1 = gridY + 1;
+            let vertexCounter = 0;
+            let groupCount = 0;
+            const vector = new THREE.Vector3();
+            const color= new THREE.Color();
+            // generate vertices, normals and uvs
+            for ( let iy = 0; iy < gridY1; iy ++ ) {
+                const y = iy * segmentHeight - heightHalf;
+                for ( let ix = 0; ix < gridX1; ix ++ ) {
+                    const x = ix * segmentWidth - widthHalf;
+                    // set values to correct vector component
+                    vector[ u ] = x * udir;
+                    vector[ v ] = y * vdir;
+                    vector[ w ] = depthHalf;
+                    // now apply vector to vertex buffer
+                    vertices.push( vector.x, vector.y, vector.z );
+                    // set values to correct vector component
+                    vector[ u ] = 0;
+                    vector[ v ] = 0;
+                    vector[ w ] = depth > 0 ? 1 : - 1;
+                    // now apply vector to normal buffer
+                    normals.push( vector.x, vector.y, vector.z );
+                    // uvs
+                    uvs.push( ix / gridX );
+                    uvs.push( 1 - ( iy / gridY ) );
+                    // counters
+                    vertexCounter += 1;
+                }
+            }
+            // indices
+            // 1. you need three indices to draw a single face
+            // 2. a single segment consists of two faces
+            // 3. so we need to generate six (2*3) indices per segment
+            for ( let iy = 0; iy < gridY; iy ++ ) {
+    
+                for ( let ix = 0; ix < gridX; ix ++ ) {
+    
+                    const a = numberOfVertices + ix + gridX1 * iy;
+                    const b = numberOfVertices + ix + gridX1 * ( iy + 1 );
+                    const c = numberOfVertices + ( ix + 1 ) + gridX1 * ( iy + 1 );
+                    const d = numberOfVertices + ( ix + 1 ) + gridX1 * iy;
+                    // faces
+                    indices.push( a, b, d );
+                    indices.push( b, c, d );
+                    // let _color = color.setRGB(Math.random(),Math.random(),Math.random(),THREE.SRGBColorSpace )
+                    colors.push(Math.random(),Math.random(),Math.random())
+                    colors.push(Math.random(),Math.random(),Math.random())
+                    colors.push(Math.random(),Math.random(),Math.random())
+                    colors.push(Math.random(),Math.random(),Math.random())
+                    // increase counter
+                    groupCount += 6;
+                }
+            }
+            // add a group to the geometry. this will ensure multi material support
+            // scope.addGroup( groupStart, groupCount, materialIndex );
+            // calculate new start value for groups
+            groupStart += groupCount;
+            // update total number of vertices
+            numberOfVertices += vertexCounter;
+        }
+        buildPlane( 'z', 'y', 'x', - 1, - 1, depth, height, width, depthSegments, heightSegments, 0 ); // px
+		buildPlane( 'z', 'y', 'x', 1, - 1, depth, height, - width, depthSegments, heightSegments, 1 ); // nx
+		// buildPlane( 'x', 'z', 'y', 1, 1, width, depth, height, widthSegments, depthSegments, 2 ); // py
+		// buildPlane( 'x', 'z', 'y', 1, - 1, width, depth, - height, widthSegments, depthSegments, 3 ); // ny
+		buildPlane( 'x', 'y', 'z', 1, - 1, width, height, depth, widthSegments, heightSegments, 4 ); // pz
+		buildPlane( 'x', 'y', 'z', - 1, - 1, width, height, - depth, widthSegments, heightSegments, 5 ); // nz
+        let geometry = new THREE.BufferGeometry();  
+        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 ) );
+        let material = new THREE.MeshBasicMaterial( {
+            side: THREE.BackSide,
+            // 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 = this.tb.Object3D({ obj: mesh, fixedZoom :15 ,anchor:'center'});
+        mesh.setCoords(center)
+        this.tb.renderer.outputEncoding = THREE.sRGBEncoding;
+        this.tb.add(mesh); 
+
+        // let geometry2 = new THREE.BoxGeometry( 1, 1, 1 ); 
+        // geometry2.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
+        // debugger
+        // const material2 = new THREE.MeshBasicMaterial( {color: 0xFFFF00} ); 
+        // let cube = new THREE.Mesh( geometry2, material ); 
+        // cube = this.tb.Object3D({ obj: cube, fixedZoom :15 ,anchor:'center'});
+        // cube.setCoords([center[0] + 0.1,center[1]])
+        // this.tb.add(cube); 
+    }
+
+
+    drawWallPoints3(dataList){
+        this.removeObj(this.group);     
+        let center = [dataList[0].lng,dataList[0].lat] 
+        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)           
+                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 a = index +1
+                        let b = index     
+                        let c = index +len
+                        let d = index +len +1
+                        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.BackSide,
+            // wireframe:true,
+            depthFunc:THREE.NotEqualDepth   ,
+            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
+        } );
+        // const material = new THREE.RawShaderMaterial({
+        //     // uniforms:{},
+        //     // attributes:{},
+        //     // side:THREE.DoubleSide,
+        //     wireframe:true,
+        //     depthTest:false,
+        //     depthWrite:false,
+        //     vertexColors:true,
+        //     vertexShader: `
+        //     precision highp float;
+        //     uniform mat4 projectionMatrix;
+        //     uniform mat4 modelViewMatrix;
+        //     attribute vec3 position;
+        //     attribute vec3 color;
+
+        //     varying vec3 vColor;
+        //     void main(){
+        //         vColor = color;
+        //         gl_Position =projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+        //     }
+        //     `,// 顶点着色器
+        //     fragmentShader: `
+        //     varying vec3 vColor;
+        //     void main() {
+        //         gl_FragColor = vec4(vColor,1.0);
+        //     }`,// 片元着色器
+        // });
+        
+        
+        // material.needsUpdate = true;
+        // material.color.convertSRGBToLinear();
+        let mesh = new THREE.Mesh( geometry, material );   ;
+        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
+        }); 
+    }
+
+
+    drawWallPoints5(dataList){
+        this.removeObj(this.group);     
+        // let center = [dataList[0].lng,dataList[0].lat] 
+        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();
+        let setData=(dir)=>{
+            for(let i in dataList){
+                let _i = Number(i);
+                let bo = i < dataList.length -1;
+                let nextIndex = _i +1;
+                if(dir == 1){
+                    _i = dataList.length -1 -Number(i);
+                    bo = _i > 0
+                    nextIndex = _i-1;
+                }
+                let item = dataList[_i]            
+                let lng = item.lng;
+                let lat = item.lat;
+                let position = projectToWorld([lng,lat])
+
+                if(bo){
+                    let next = dataList[nextIndex]
+                    if(lng == next.lng && lat == next.lat){
+                        continue;
+                    }
+                    let nposition = projectToWorld([next.lng,next.lat])     
+                    let x = position.x,y = position.y,z= position.z;
+                    let nx = nposition.x ,ny =nposition.y,nz = position.z;
+                    let c,_n;
+                    if(dir == 1){
+                        let p1 = new THREE.Vector3(x,y,(z+this.scale))
+                        let p2 = new THREE.Vector3(x,y,(z+2*this.scale) )
+                        let p3 = new THREE.Vector3(nx,ny,(nz+this.scale) )
+                        let p4 = new THREE.Vector3(nx,ny,(nz+2*this.scale) )
+                        const a = p2.clone().sub(p1);
+                        const b = p2.clone().sub(p4); 
+                        const d = p4.clone().sub(p3); 
+                        c = a.clone().cross(b) ;  
+                        // d = b.clone().cross(d) ; 
+                         _n= c.normalize();  
+                        // let _n2 = d.normalize();                                    
+                        normals.push(_n.x,_n.y,_n.z)
+                        // normals.push(_n.x,_n.y,_n.z)
+                        // normals.push(_n2.x,_n2.y,_n2.z)
+                    }                            
+                    else{
+                        let p1 = new THREE.Vector3(x,y,z+this.scale )
+                        let p2 = new THREE.Vector3(x,y,z+2*this.scale)
+                        let p3 = new THREE.Vector3(nx,ny,nz+2*this.scale)
+                        const a = p2.clone().sub(p1);
+                        const b = p2.clone().sub(p3); 
+                        c = a.clone().cross(b) ;  
+                        _n= c.normalize(); 
+                        normals.push(_n.x,_n.y,_n.z)   
+                    }  
+                    for(let j in item.data){
+                        let h = (j * 1 +noDataLenth) * this.scale                    
+                        j = Number(j)       
+                        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+h )
+                            //设置法线
+                            normals.push(_n.x,_n.y,_n.z)                                                                                                                                                                                       
+                            uvs.push(j/limitIndex);
+                            uvs.push(1-_i/dataList.length-1);
+                        //     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 a = index +1
+                                let b = index     
+                                let c = index +len
+                                let d = index +len +1   
+                                // if(dir==1){
+                                //     indices.push( a,d,b); // face one
+                                //     indices.push( b, d, c ); // face two  
+                                // }else{
+                                //     indices.push( b,d,a); // face one
+                                //     indices.push( c,d,b ); // face two                                                                      
+                                // }    
+                                if(dir==-1){
+                                    if(_n.x >= 0){
+                                        if(_n.y >= 0){
+                                            indices.push( a,d,b); // face one
+                                            indices.push( b, d, c );
+                                            // indices.push( a,b,d); // face one
+                                            // indices.push( b,c,d ); // face two   
+                                        }else{
+                                            indices.push( a,d,b); // face one
+                                            indices.push( b, d, c ); 
+                                        }
+                                        
+                                    }
+                                    else if(_n.x < 0 ){
+                                        if(_n.y >= 0){
+                                           indices.push( a,b,d); // face one
+                                            indices.push( b,c,d ); // face two                          
+                                        }
+                                        else{
+                                            indices.push( a,b,d); // face one
+                                            indices.push( b,c,d ); // face two  
+                                        }
+                                    }
+                                }                                   
+                                else{
+                                    if(_n.x > 0){
+                                        if(_n.y >= 0){
+                                            // indices.push( a,d,b); // face one
+                                            // indices.push( b, d, c );
+                                            // indices.push( a,d,b); // face one
+                                            // indices.push( b, d, c );  
+                                            indices.push( a,b,d); // face one
+                                            indices.push( b,c,d ); // face two   
+                                        }else{
+                                            indices.push( a,b,d); // face one
+                                            indices.push( b,c,d ); // face two  
+                                            // indices.push( a,d,b); // face one
+                                            // indices.push( b, d, c ); 
+                                        }
+                                        
+                                    }
+                                    if(_n.x <= 0 ){
+                                        if(_n.y >= 0){
+                                            // indices.push( a,b,d); // face one
+                                            // indices.push( b,c,d ); //
+                                            indices.push( a,d,b); // face one
+                                            indices.push( b, d, c );                       
+                                        }
+                                        else{
+                                            // indices.push( a,b,d); // face one
+                                            // indices.push( b,c,d ); // 
+                                            indices.push( a,d,b); // face one
+                                            indices.push( b, d, c );  
+                                        }
+                                    }
+                                }
+                                index = index +1;    
+                            }                        
+                        }                
+                    } 
+                    index = vertices.length / 3    
+                }
+                            
+            }
+        }
+        setData(-1)
+        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.BackSide,
+            // 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 );
+        indices  =[]
+        vertices = []
+        normals = []
+        colors = []
+        uvs = [];
+        // mesh = this.tb.Object3D({ obj: mesh, fixedZoom :15 ,anchor:'center'});
+        // mesh.setCoords(center)
+        // this.tb.renderer.outputEncoding = THREE.sRGBEncoding;
+        // this.tb.add(mesh);   
+        setData(1)
+        let geometry2 = new THREE.BufferGeometry();  
+        geometry2.setIndex( indices );
+        geometry2.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+        geometry2.setAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );
+        geometry2.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3) );
+        geometry2.setAttribute( 'uv', new THREE.Float32BufferAttribute( uvs, 2 ) );
+        // geometry.computeBoundingSphere();
+        // geometry.computeVertexNormals();
+        let material2 = new THREE.MeshBasicMaterial( {
+            // side:THREE.BackSide,
+            // 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
+        } );  
+        let mesh2 = new THREE.Mesh( geometry2, material2 );
+        // mesh2 = this.tb.Object3D({ obj: mesh2, fixedZoom :15 ,anchor:'center'});
+        // mesh2.setCoords(center)
+        // this.tb.renderer.outputEncoding = THREE.sRGBEncoding;
+        // this.tb.add(mesh2);   
+        // mesh.renderOrder = 1;
+        // mesh = this.tb.Object3D({ obj: mesh, units: 'meters',anchor:'center'});
+        // this.tb.add(mesh);
+        this.group.add( mesh );
+        this.group.add( mesh2 );     
+        this.map.fitBounds(getBBox(dataList.map(a=>[a.lng,a.lat])), {
+            padding: {top: 45, bottom:45, left: 35, right: 35},
+            maxZoom:11,
+            pitch:30
+        }); 
+    }
+
+    
+
+    drawWallPoints(dataList){
+        this.removeObj(this.group);     
+        let center = [dataList[0].lng,dataList[0].lat] 
+        // let geometry = new THREE.BufferGeometry();  
+        // let indices  =[]    
+        // let vertices = []
+        // let normals = [];
+        // let colors = []
+        // let uvs = [];
+
+        // let indices2  =[]    
+        // let vertices2 = []
+        // let normals2 = [];
+        // let colors2 = []
+        // let uvs2 = [];
+        // 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){
+        //     let _i = Number(i);
+        //     let bo = i < dataList.length -1;
+        //     let nextIndex = _i +1;
+        //     let item = dataList[_i]
+        //     let lng = item.lng;
+        //     let lat = item.lat;
+        //     let position = projectToWorld([lng,lat])            
+        //     if(bo){
+        //         let itemN = dataList[dataList.length -1 -_i]
+        //         let positionN = projectToWorld([itemN.lng,itemN.lat])          
+        //         let next = dataList[nextIndex]
+        //         if(lng == next.lng && lat == next.lat){
+        //             continue;
+        //         }
+        //         let nposition = projectToWorld([next.lng,next.lat])     
+        //         let x = position.x,y = position.y,z= position.z;
+        //         let nx = nposition.x ,ny =nposition.y,nz = position.z;
+        //         let c,_n;
+
+        //         let p1 = new THREE.Vector3(x,y,z+this.scale )
+        //         let p2 = new THREE.Vector3(x,y,z+2*this.scale)
+        //         let p3 = new THREE.Vector3(nx,ny,nz+2*this.scale)
+        //         const a = p2.clone().sub(p1);
+        //         const b = p2.clone().sub(p3); 
+        //         c = a.clone().cross(b) ;  
+        //         _n= c.normalize(); 
+        //         // normals.push(_n.x,_n.y,_n.z)   
+
+        //         for(let j in item.data){
+        //             let h = (j * 1 +noDataLenth) * this.scale                    
+        //             j = Number(j)       
+        //             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)
+        //                  let point = [position.x ,position.y,position.z+h ]
+        //                  let pointR = [positionN.x + _n.x+1,positionN.y + _n.y+1,positionN.z+h ]
+        //                 //正面
+        //                 vertices.push(...point)
+        //                 vertices.push(...pointR)
+                      
+        //                 //设置法线
+        //                 normals.push(_n.x,_n.y,_n.z)  
+        //                 normals.push(_n.x,_n.y,_n.z)    
+
+        //                 uvs.push(j/limitIndex);
+        //                 uvs.push(1-_i/dataList.length-1);
+          
+        //             //     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 );
+        //                 color = this.colorFun(itemN.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 a = index +2
+        //                     let b = index     
+        //                     let c = index +len*2 
+        //                     let d = index +len*2   +2
+                                    
+        //                         //正
+        //                         indices.push( a,b,d); // face one
+        //                         indices.push( b, c, d ); 
+        //                          //背
+        //                          indices.push( a+1,b+1,d+1); // face one
+        //                          indices.push( b+1, c+1, d+1 ); 
+                                                     
+        //                     }
+        //                     index = index +2;    
+        //                 }                        
+        //             }                
+        //         } 
+        //         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( {
+        //     color: 0xFFFFFF,
+        //     vertexColors: true,        
+        //     // forceSinglePass:true
+        // } );
+        
+        // // material.needsUpdate = true;
+        // material.color.convertSRGBToLinear();
+        // let mesh = new THREE.Mesh( geometry, material );
+        // // indices2.reverse()
+        // // vertices2.reverse()
+        // // // normals2.reverse()
+        // // colors2.reverse();
+        // // let geometry2 = new THREE.BufferGeometry();  
+        // // geometry2.setIndex( indices2);
+        // // geometry2.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices2, 3 ) );
+        // // geometry2.setAttribute( 'normal', new THREE.Float32BufferAttribute( normals2, 3 ) );
+        // // geometry2.setAttribute( 'color', new THREE.Float32BufferAttribute( colors2, 3) );
+        // // geometry2.setAttribute( 'uv', new THREE.Float32BufferAttribute( uvs, 2 ) );
+        // // let material2 = new THREE.MeshBasicMaterial( {
+            
+        // //     color: 0xFFFFFF,
+        // //     vertexColors: true,
+        // //     // forceSinglePass:true
+        // // } );
+        
+        // // let mesh2 = new THREE.Mesh( geometry2, material2 );
+        // // mesh.renderOrder = 1
+        // // mesh2.renderOrder = 0
+        // this.group.add( mesh ); 
+        // this.group.add( mesh2 );    
+         // 定义路径点和墙面参数
+         const pathPoints = [
+            new THREE.Vector3(-4, 0, 0),
+            new THREE.Vector3(-2, 0, 2),
+            new THREE.Vector3(0, 0, 0),
+            new THREE.Vector3(2, 0, -2),
+            new THREE.Vector3(4, 0, 0)
+        ];
+        const wallHeight = 3;
+        const wallWidth = 0.5; // 新增墙面宽度参数
+
+        // 创建几何数据容器
+        const vertices = [];
+        const colors = [];
+        const indices = [];
+
+        // 生成双墙面几何数据
+        for (let i = 0; i < pathPoints.length - 1; i++) {
+            const p0 = pathPoints[i];
+            const p1 = pathPoints[i + 1];
+            
+            // 计算路径方向和左右偏移量
+            const dir = new THREE.Vector3().subVectors(p1, p0);
+            const leftOffset = new THREE.Vector3(-dir.z, 0, dir.x)
+                .normalize()
+                .multiplyScalar(wallWidth/2);
+
+            // 生成左右墙面的八个顶点
+            const createWallVertices = (offset) => [
+                new THREE.Vector3(p0.x,  wallHeight/2, p0.z).add(offset), // 左上
+                new THREE.Vector3(p0.x, -wallHeight/2, p0.z).add(offset), // 左下
+                new THREE.Vector3(p1.x, -wallHeight/2, p1.z).add(offset), // 右下
+                new THREE.Vector3(p1.x,  wallHeight/2, p1.z).add(offset)  // 右上
+            ];
+
+            // 左墙面顶点
+            const leftVertices = createWallVertices(leftOffset);
+            // 右墙面顶点（反向偏移）
+            const rightVertices = createWallVertices(leftOffset.clone().negate());
+
+            // 合并顶点数据
+            const allVertices = [...leftVertices, ...rightVertices];
+            allVertices.forEach(v => vertices.push(v.x,  v.z,v.y));
+
+            // 为左右墙面生成不同颜色
+            const colorsLeft = new THREE.Color().setHSL(Math.random(), 0.8, 0.6);
+            const colorsRight = new THREE.Color().setHSL(Math.random(), 0.8, 0.6);
+            
+            // 添加颜色数据（每个墙面4个顶点）
+            for (let j = 0; j < 4; j++) colors.push(...[colorsLeft.r, colorsLeft.g, colorsLeft.b]);
+            for (let j = 0; j < 4; j++) colors.push(...[colorsRight.r, colorsRight.g, colorsRight.b]);
+
+            // 构建索引数据
+            const base = i * 8; // 每段8个顶点
+            indices.push(
+                // 左墙面
+                base, base+1, base+2,   // 下三角形
+                base, base+2, base+3,   // 上三角形
+                // 右墙面
+                base+4,  base+6,base+5, // 下三角形
+                base+4, base+7 ,base+6 // 上三角形
+            );
+        }
+
+        // 创建BufferGeometry并设置属性
+        const geometry = new THREE.BufferGeometry();
+        geometry.setAttribute(
+            'position',
+            new THREE.BufferAttribute(new Float32Array(vertices), 3)
+        );
+        geometry.setAttribute(
+            'color',
+            new THREE.BufferAttribute(new Float32Array(colors), 3)
+        );
+        geometry.setIndex(indices);
+
+        // 创建材质和网格对象
+        const material = new THREE.MeshBasicMaterial({
+            vertexColors: true,
+            side: THREE.FrontSide // 单面材质
+        });
+        let wall = new THREE.Mesh(geometry, material);
+        wall = this.tb.Object3D({ obj: wall, fixedZoom :15 ,anchor:'center'})
+        wall.setCoords(center)
+        this.tb.add(wall);    
+        this.map.fitBounds(getBBox(dataList.map(a=>[a.lng,a.lat])), {
+            padding: {top: 45, bottom:45, left: 35, right: 35},
+            maxZoom:11,
+            pitch:30
+        }); 
+    }
+
+    
+
+
+    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 center = [dataList[0].lng,dataList[0].lat] 
+        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( {
+            // 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 = this.tb.Object3D({ obj: mesh, fixedZoom :15 ,anchor:'center'});
+        mesh.setCoords(center)
+        this.tb.renderer.outputEncoding = THREE.sRGBEncoding;
+        this.tb.add(mesh);     
+        // 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;  
+        this.tb = new Threebox(
+            map,
+            gl, //get the context from Mapbox
+            { defaultLights: true ,passiveRendering: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();
+    }
+
+}