@ohuoy/easymap 1.0.20 → 1.0.22

package/src/components/layer/CustomIconLayer.js

@@ -3,8 +3,9 @@ import * as THREE from 'three'
 import { sleep } from '../../utils/util.js';
 import {hasProperty,transform} from '../../utils/util.js'
 import  mapboxgl from '../../../lib/mapbox-gl/dist/mapbox-gl.js';
-var tb = {}; 
+
 export default class CustomIconLayer{
+    tb = {}; 
     iconList = []
     scale = 0.01;
     iconHtml;
@@ -30,7 +31,7 @@ export default class CustomIconLayer{
 
     onAdd(map, gl) {
         this.map = map;       
-        tb = new Threebox(
+        this.tb = new Threebox(
 			map,
 			gl, //get the context from Mapbox
 			{ defaultLights: true }
@@ -177,7 +178,7 @@ export default class CustomIconLayer{
         let center = transform([lng,lat]);
         var geometry = new THREE.CircleGeometry(0);
 		let circle = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({ color: 0x660000 }));
-		circle = tb.Object3D({ obj: circle, units: 'meters' ,anchor:'center'});
+		circle = this.tb.Object3D({ obj: circle, units: 'meters' ,anchor:'center'});
         circle.addLabel = (HTMLElement, visible, center, height,ev)=>{
             if (HTMLElement) {                
                 let label = circle.drawLabelHTML(HTMLElement, visible, center, height);
@@ -189,7 +190,7 @@ export default class CustomIconLayer{
             }
         }
 		circle.setCoords(center);    
-		tb.add(circle);
+		this.tb.add(circle);
         point.circle = circle;        
         if(point.icon){
             
@@ -225,7 +226,7 @@ export default class CustomIconLayer{
     }   
 
     render(gl, matrix) { 
-        tb.update(); 
+        this.tb.update(); 
         this.map.triggerRepaint();
     }
 }

package/src/components/layer/ExtrusionLayer.js

@@ -21,30 +21,35 @@ const params = {
     radius: 2.5,
     exposure: 0,
   };
-var tb = {}; 
-let scene;
 let sceneTarget;
 let cameraMap;
-let target;
 let cameraTarget;
-let materialTarget;
 let cameraTransform;
 
-var camera
-let outlineComposer;
+// let this.outlineComposer;
 let bloomComposer;
 let renderScene;
 let bloomPass;
 let composer;
-let outlinePass;
+// let this.outlinePass;
 let composer2;
-var group = new THREE.Group();
-let group2 = new THREE.Group();
-let group3 = new THREE.Group();
+// var this.group = new THREE.Group();
+// let this.group2 = new THREE.Group();
+// let this.group3 = new THREE.Group();
 let sceneMap;
 var darkMaterial = new THREE.MeshBasicMaterial({ color: 'black' ,transparent:true,opacity:1});
 var bloomLayer = new THREE.Layers();
 export default class ExtrusionLayer{
+    tb = {}; 
+    scene;
+    camera;
+    outlineComposer;
+    outlinePass;
+    group = new THREE.Group();
+    group2 = new THREE.Group();
+    group3 = new THREE.Group();
+    materialTarget;
+    target;
     opacity = 0.8
     previewCanvas = null;
     w = 0;
@@ -72,7 +77,7 @@ export default class ExtrusionLayer{
         }
         const material1 = new THREE.MeshLambertMaterial({ color: 0xb00000, wireframe: false });
         const material2 = new THREE.MeshLambertMaterial({ color: 0xff8000, wireframe: false });
-        let star = tb.extrusion({
+        let star = this.tb.extrusion({
             coordinates: [points],
             geometryOptions: { depth: 20, steps: 1, bevelEnabled: true, bevelThickness: 2, bevelSize: 4, bevelSegments: 1 },
             anchor: 'center',
@@ -83,7 +88,7 @@ export default class ExtrusionLayer{
         star.addTooltip("A animated extruded star over Columbus Park", true);
         star.setCoords([-74.0001269, 40.7151698, 50]);
         star.set({ rotation: {x: 0, y: 0, z: 720}, duration: 20000 })
-        tb.add(star);
+        this.tb.add(star);
     }
 
     addExtrusionsThreeBox(coordinates,center, height = 1000) {
@@ -96,11 +101,11 @@ export default class ExtrusionLayer{
         // let coords = []
         // data.forEach((b) => {
         //     // let center = b.properties.center;
-        //     // let s = tb.projectedUnitsPerMeter(center[1]);
+        //     // let s = this.tb.projectedUnitsPerMeter(center[1]);
         //     coords.push(b.geometry.coordinates)
 
         // });
-        let extrusion = tb.extrusion({                
+        let extrusion = this.tb.extrusion({                
             coordinates: coordinates,
             anchor:'center',
             geometryOptions: { curveSegments: 1, depth: height },
@@ -108,7 +113,7 @@ export default class ExtrusionLayer{
         },this.map);
         // extrusion.addTooltip(b.properties.tooltip, true);
         extrusion.setCoords([...transform(center), 0]);
-        tb.add(extrusion);
+        this.tb.add(extrusion);
         this.outlineObj(extrusion)
     }
 
@@ -144,43 +149,43 @@ export default class ExtrusionLayer{
             const geometry = new THREE.ExtrudeGeometry( shape, { curveSegments: 1, depth: height } );
             const mesh =  new THREE.Mesh( geometry, material ) ;
             mesh.layers.enable(BLOOM_SCENE)
-            group.add(mesh)    
-            // /group2.add()        
+            this.group.add(mesh)    
+            // /this.group2.add()        
         })
     }
 
     outlineObj(selectedObjects) {
-        if (outlinePass) {
-            outlineComposer.removePass(outlinePass)
-            outlinePass = null
+        if (this.outlinePass) {
+            this.outlineComposer.removePass(this.outlinePass)
+            this.outlinePass = null
         }
         // 物体边缘发光通道
-        outlinePass = new OutlinePass(
+        this.outlinePass = new OutlinePass(
             new THREE.Vector2(window.innerWidth, window.innerHeight),
-            scene,
-            camera
+            this.scene,
+            this.camera
         )
-        outlinePass.edgeStrength = 5 // 边框的亮度
-        outlinePass.edgeGlow = 0.1 // 光晕[0,1]
-        outlinePass.edgeThickness = 0.1 // 边框宽度
-        outlinePass.pulsePeriod = 2 // 呼吸闪烁的速度
-        outlinePass.visibleEdgeColor.set(0xff4ecfff)
-        outlinePass.hiddenEdgeColor.set(0x00ffff)
-        outlinePass.selectedObjects = selectedObjects
-        outlineComposer.addPass(outlinePass)
+        this.outlinePass.edgeStrength = 5 // 边框的亮度
+        this.outlinePass.edgeGlow = 0.1 // 光晕[0,1]
+        this.outlinePass.edgeThickness = 0.1 // 边框宽度
+        this.outlinePass.pulsePeriod = 2 // 呼吸闪烁的速度
+        this.outlinePass.visibleEdgeColor.set(0xff4ecfff)
+        this.outlinePass.hiddenEdgeColor.set(0x00ffff)
+        this.outlinePass.selectedObjects = selectedObjects
+        this.outlineComposer.addPass(this.outlinePass)
         // 自定义的着色器通道 作为参数
     }
     
 
     addLineThreeBox(coordinates,center, height = 1000){
         coordinates.forEach(coords => {
-            let line = tb.line({
+            let line = this.tb.line({
                 geometry:coords,
                 color:0xe6f2ff,
                 width:2
             });
             //line.setCoords([...transform(center), 0]);
-            tb.add(line);
+            this.tb.add(line);
         });
         
     }
@@ -239,7 +244,7 @@ export default class ExtrusionLayer{
         let line = new Line2(geometry, matLine);
         line.position.copy(normalized.position);
         line.computeLineDistances();
-        group.add(line)   
+        this.group.add(line)   
     }
 
     addLine(coordinates, height = 1000,opacity = 0.5,width = 2,color = 0xb6d1fc){
@@ -263,10 +268,10 @@ export default class ExtrusionLayer{
             // let line = new Line2( geometry, matLine );
             let line = this.createLine(coords,height,opacity,width,color)
             line.layers.enable(BLOOM_SCENE)
-            group.add(line)           
+            this.group.add(line)           
             lines.push(line)
         })
-        //this.outlineObj([group])
+        //this.outlineObj([this.group])
     }
 
 
@@ -289,7 +294,7 @@ export default class ExtrusionLayer{
         // composePlaneGeometry.setAttribute( 'uv', new THREE.Float32BufferAttribute( [ 0, 2, 0, 0, 2, 0 ], 2 ) );
         let composePlaneGeometry = new THREE.PlaneGeometry(w * 10000 ,h * 10000);
         //debugger
-        // materialTarget = new THREE.ShaderMaterial( {
+        // this.materialTarget = new THREE.ShaderMaterial( {
 		// 	uniforms: {
         //         'tDiffuse': { value: null },
         //         'opacity': { value: 1 }        
@@ -315,23 +320,23 @@ export default class ExtrusionLayer{
 		// 	depthTest: false,
 		// 	depthWrite: false
 		// } );
-        materialTarget = new THREE.MeshPhongMaterial({    
-            map:target.texture,     
+        this.materialTarget = new THREE.MeshPhongMaterial({    
+            map:this.target.texture,     
             opacity:1,      
             transparent: true,
         });
-        let mesh =  new THREE.Mesh(composePlaneGeometry, materialTarget);        
-        mesh = tb.Object3D({ obj: mesh, units: 'meters',fixedZoom :15 ,anchor:'center'});
+        let mesh =  new THREE.Mesh(composePlaneGeometry, this.materialTarget);        
+        mesh = this.tb.Object3D({ obj: mesh, units: 'meters',fixedZoom :15 ,anchor:'center'});
         mesh.setCoords( [0,0]);
-        tb.add(mesh);    
+        this.tb.add(mesh);    
 
-        group2.add(mesh)
+        this.group2.add(mesh)
     }
   
 
     onAdd(map, gl) {
         this.map = map;   
-        tb = new Threebox(
+        this.tb = new Threebox(
           map,
           gl, //get the context from Mapbox
           { defaultLights: true ,passiveRendering:false}
@@ -342,16 +347,16 @@ export default class ExtrusionLayer{
         this.w = w;
         this.h = h;
 
-        scene = new THREE.Scene(); 
+        this.scene = new THREE.this.scene(); 
         //sceneTarget.background = new THREE.Color('rgba(0,0,0,0)')
-        camera = new THREE.PerspectiveCamera(map.transform.fov, w / h, 0.1, 1e21);
-        scene.add(group) 
-        scene.add(new THREE.AmbientLight(0xffffff));       
-        //scene.add(group2)
+        this.camera = new THREE.PerspectiveCamera(map.transform.fov, w / h, 0.1, 1e21);
+        this.scene.add(this.group) 
+        this.scene.add(new THREE.AmbientLight(0xffffff));       
+        //this.scene.add(this.group2)
 
-        new CameraSync(this.map, camera, group); 
+        new CameraSync(this.map, this.camera, this.group); 
        
-        //new CameraSync(this.map, camera, group2);  
+        //new CameraSync(this.map, this.camera, this.group2);  
         this.renderer = new THREE.WebGLRenderer({
             canvas: map.getCanvas(),
             context: gl,
@@ -360,13 +365,13 @@ export default class ExtrusionLayer{
         });
         this.renderer.outputEncoding = THREE.sRGBEncoding;
         this.renderer.autoClear = false;   
-        scene.add(new THREE.AxesHelper(0))  
-        //scene.background =null;
-        //scene.background = new THREE.Color(0x000000);
+        this.scene.add(new THREE.AxesHelper(0))  
+        //this.scene.background =null;
+        //this.scene.background = new THREE.Color(0x000000);
         //this.renderer.setClearAlpha(0.0);   
-        // target = new THREE.WebGLRenderTarget(w,h,{encoding: THREE.sRGBEncoding });
+        // this.target = new THREE.WebGLRenderTarget(w,h,{encoding: THREE.sRGBEncoding });
         // this.setTargetTexture(w,h)
-        //renderScene = new RenderPass(scene, camera);
+        //renderScene = new RenderPass(this.scene, this.camera);
         //composer2 = new EffectComposer(this.renderer);
         //bloomPass = new UnrealBloomPass(new THREE.Vector2(w/2, h/2), params.strength, params.radius, params.threshold);
         //composer2.addPass(renderScene);
@@ -379,14 +384,14 @@ export default class ExtrusionLayer{
         // bloomComposer.renderToScreen = true;
         // bloomComposer.addPass(renderScene);
         // bloomComposer.addPass(bloomPass);
-        //outlineComposer = new EffectComposer(this.renderer)
+        //this.outlineComposer = new EffectComposer(this.renderer)
         // bloomLayer.set(BLOOM_SCENE);
 
         
         // const bloomPass = new OutlinePass(
         //     new THREE.Vector2(window.innerWidth, window.innerHeight),
-        //     scene,
-        //     camera
+        //     this.scene,
+        //     this.camera
         // )
         // bloomPass.edgeStrength = 5 // 边框的亮度
         // bloomPass.edgeGlow = 1 // 光晕[0,1]
@@ -394,7 +399,7 @@ export default class ExtrusionLayer{
         // bloomPass.pulsePeriod = 3 // 呼吸闪烁的速度
         // bloomPass.visibleEdgeColor.set(0xff4ecfff)
         // bloomPass.hiddenEdgeColor.set(0x00ffff)
-        //bloomPass.selectedObjects = [group]
+        //bloomPass.selectedObjects = [this.group]
         
 
 
@@ -422,8 +427,8 @@ export default class ExtrusionLayer{
         // composer.addPass(outputPass);
         
         
-        //let renderPass = new RenderPass(scene, camera)        
-        //outlineComposer.addPass(renderPass)
+        //let renderPass = new RenderPass(this.scene, this.camera)        
+        //this.outlineComposer.addPass(renderPass)
     }
 
 
@@ -449,17 +454,17 @@ export default class ExtrusionLayer{
     render(gl, matrix) {              
         
         //composer.render()
-        // scene.traverse(this.darkenNonBloomed);
+        // this.scene.traverse(this.darkenNonBloomed);
         // bloomComposer.render();
-        //outlineComposer.render()
+        //this.outlineComposer.render()
         //composer2.render();
         this.renderer.resetState();
-        this.renderer.render(scene,camera)
+        this.renderer.render(this.scene,this.camera)
         this.map.triggerRepaint();
     }
 
     darkenNonBloomed(obj) {   
-        // if (obj instanceof THREE.Scene) {                    
+        // if (obj instanceof THREE.this.scene) {                    
         //     obj.background = new THREE.Color(0x000fff)
         //     debugger
         // }   

package/src/components/layer/MarkerAreaLayer.js

@@ -3,12 +3,13 @@ import {hasProperty,transform,downloadFileByBase64, sleep} from '../../utils/uti
 import  mapboxgl from '../../../lib/mapbox-gl/dist/mapbox-gl.js';
 import * as THREE from 'three'
 import {Threebox} from  '../../../lib/threebox-plugin'; 
-var tb = {}; 
-let markerGroup = new THREE.Group();
+// let this.markerGroup = new THREE.Group();
 export default class MarkerAreaLayer{
+    tb = {}; 
     markerArr = []
     opacity = 0.8
     textClass = ''
+    markerGroup = new THREE.Group();
     constructor(id,config) {
         this.id = id;
         this.opacity = config?.opacity ? Number(config.opacity):0.8
@@ -24,7 +25,7 @@ export default class MarkerAreaLayer{
             transparent: true       
         });
         let mesh = new THREE.Mesh( geometry, material) ;
-        mesh = tb.Object3D({ obj: mesh, units: 'meters' ,anchor:'center'});
+        mesh = this.tb.Object3D({ obj: mesh, units: 'meters' ,anchor:'center'});
         mesh.setCoords(transform(item.coords))
         let geometryB = new THREE.CylinderGeometry( 5000 * item.size,7000 * item.size, 4000 * item.size,32)
         let materialB = new THREE.MeshBasicMaterial({
@@ -38,11 +39,11 @@ export default class MarkerAreaLayer{
         meshB.position.z -= 600000
         meshB.rotation.set(-Math.PI / 2, 0, 0);
        
-        meshB = tb.Object3D({ obj: meshB, units: 'meters' ,anchor:'center',rotation: { x: 90, y: 0, z: 0 } });
+        meshB = this.tb.Object3D({ obj: meshB, units: 'meters' ,anchor:'center',rotation: { x: 90, y: 0, z: 0 } });
         meshB.setCoords(transform(item.coords))
         //meshB.setRotation({x:0,y:Math.PI / 4,z:0})
-        markerGroup.add(mesh)
-        markerGroup.add(meshB)
+        this.markerGroup.add(mesh)
+        this.markerGroup.add(meshB)
     }
 
     
@@ -60,15 +61,15 @@ export default class MarkerAreaLayer{
 
     onAdd(map, gl) {
         this.map = map;    
-        tb = new Threebox(
+        this.tb = new Threebox(
           map,
           gl, //get the context from Mapbox
           { defaultLights: true ,passiveRendering:false}
         );   
-        tb.add(markerGroup)       
+        this.tb.add(this.markerGroup)       
     }
     render(gl, matrix) {      
-        tb.update(); 
+        this.tb.update(); 
         this.map.triggerRepaint();
     }
   

package/src/components/layer/PathLineLayer.js

@@ -4,8 +4,9 @@ import { getBBox } from '../../utils/util.js';
 import { sleep } from '../../utils/util.js';
 import {hasProperty,transform} from '../../utils/util.js'
 import  mapboxgl from '../../../lib/mapbox-gl/dist/mapbox-gl.js';
-var tb = {}; 
+
 export default class PathLineLayer{
+    tb={}
     lines = []
     constructor(id,config) {
         this.id = id;        
@@ -14,7 +15,7 @@ export default class PathLineLayer{
     }
 
     remove(){
-        this.lines.forEach(a=>tb.remove(a))
+        this.lines.forEach(a=>this.tb.remove(a))
     }
     
     drawLine(list){
@@ -57,8 +58,8 @@ export default class PathLineLayer{
             //     width: Math.random() + 1 // random width between 1 and 2
             // }
     
-            let lineMesh = tb.line(line);            
-            tb.add(lineMesh)
+            let lineMesh = this.tb.line(line);            
+            this.tb.add(lineMesh)
             this.lines.push(lineMesh)
         }) 
         this.map.fitBounds(getBBox(list.map(a=>a.point)), {
@@ -70,14 +71,14 @@ export default class PathLineLayer{
 
     onAdd(map, gl) {
         this.map = map;    
-        tb = new Threebox(
+        this.tb = new Threebox(
           map,
           gl, //get the context from Mapbox
           { defaultLights: true ,passiveRendering:false}
         );          
     }
     render(gl, matrix) {      
-        tb.update(); 
+        this.tb.update(); 
         this.map.triggerRepaint();
     }
 }

package/src/components/layer/ThreeScanLayer.js

@@ -7,8 +7,8 @@ import { Line2 } from 'three/addons/lines/Line2.js';
 import {LineMaterial} from 'three/examples/jsm/lines/LineMaterial.js'
 import * as THREE from 'three'
 import {Threebox} from  '../../../lib/threebox-plugin'; 
-var tb = {}; 
 export default class ThreeScanLayer{
+    tb = {};
     drawArray = []
     opacity = 0.8
     textClass = ''
@@ -23,11 +23,11 @@ export default class ThreeScanLayer{
     }
 
     //同时渲染多个地点图片文本
-    async drawImageList(list,delay = 300){              
+    async drawImageList(list,delay = 300){                 
         for(let i in list){
             await this.update(list[i])
             //this.drawArray.push(list[i])
-        }    
+        }   
         for(let i in this.drawArray){
             let _point = list.find(a=>a.center[0] == this.drawArray[i].center[0] && a.center[1] == this.drawArray[i].center[1])
             if(!_point){
@@ -36,16 +36,21 @@ export default class ThreeScanLayer{
             }
         }  
         this.drawArray = this.drawArray.filter(a=>a) 
-        tb.update(); 
+        this.tb.update(); 
         this.map.triggerRepaint();
         await sleep(delay)
         let canvas = this.map.getCanvas()
         return canvas.toDataURL();
     }
 
+
+    onRemove(){
+        this.removeAll()
+    }
+
     remove(point){
         point.mesh.label.element.remove()        
-        tb.remove(point.mesh)
+        this.tb.remove(point.mesh)
     }
 
     removeAll(){
@@ -54,7 +59,7 @@ export default class ThreeScanLayer{
             this.drawArray[i] = null
         }  
         this.drawArray = this.drawArray.filter(a=>a) 
-        tb.update(); 
+        this.tb.update(); 
         this.map.triggerRepaint();
     }
 
@@ -77,7 +82,7 @@ export default class ThreeScanLayer{
         let w = point.rect.width ? point.rect.width: this.rectMesh.w 
         if(!this.rectMesh.mesh || w!= this.rectMesh.w || point.rect.position[0]!=this.rectMesh.lng || point.rect.position[1] !=this.rectMesh.lat){
             if(this.rectMesh.mesh){
-                tb.remove(this.rectMesh.mesh)
+                this.tb.remove(this.rectMesh.mesh)
             }
             let bounds = getLayerMapPosition(w,transform(point.rect.position))
             bounds.push(bounds[0])
@@ -87,11 +92,11 @@ export default class ThreeScanLayer{
                 width: 20 // random width between 1 and 2
             }
 
-            let lineMesh = tb.line(lineOptions);
+            let lineMesh = this.tb.line(lineOptions);
             this.rectMesh.mesh = lineMesh;
-            tb.add(lineMesh)
+            this.tb.add(lineMesh)
             // if(this.rectMesh.mesh){
-            //     tb.remove(this.rectMesh.mesh)
+            //     this.tb.remove(this.rectMesh.mesh)
             // }
             // let plane = new THREE.PlaneGeometry( w*20,w*20);
             // let material = new THREE.MeshLambertMaterial({
@@ -108,14 +113,14 @@ export default class ThreeScanLayer{
               
             // let line = new THREE.LineSegments(edges, edgesMaterial);
             // mesh.add(line);
-            // mesh = tb.Object3D({ obj: mesh, units: 'meters',fixedZoom :15 ,anchor:'center'});
+            // mesh = this.tb.Object3D({ obj: mesh, units: 'meters',fixedZoom :15 ,anchor:'center'});
             // this.rectMesh.mesh = mesh;
             // this.rectMesh.w = w;
             
         }
         // if(this.rectMesh.mesh){
         //     this.rectMesh.mesh.setCoords(transform(point.rect.position))
-        //     tb.add(this.rectMesh.mesh);
+        //     this.tb.add(this.rectMesh.mesh);
         // }
     }
 
@@ -148,15 +153,25 @@ export default class ThreeScanLayer{
                 point.url += `?tempid=${Math.random()}`
             }
             let p = ()=>new Promise(function(resolve,reject){
-                new THREE.TextureLoader().load(point.url,(_texture)=>{
-                    resolve(_texture)
-                })
+                try{
+                    new THREE.TextureLoader().load(point.url,(_texture)=>{
+                        resolve(_texture)
+                    },()=>{},()=>{
+                        resolve(null)
+                    })
+                }catch{
+                    reject(null)
+                }
             })            
-            texture = await p()
+            texture = await p()  
+            if(!texture)  return;
+            texture.center.set(0.5,0.5);
+            texture.rotation = -Math.PI;
         }
+        texture.colorSpace = THREE.SRGBColorSpace
         texture.encoding = THREE.sRGBEncoding;
-        texture.flipY = false;
-        //texture.flipX = true; 
+        // texture.flipY = false;
+        // texture.flipX = true; 
         let index = this.drawArray.findIndex(a=>a.center[0] == point.center[0] && a.center[1] == point.center[1])
         if(index >= 0){
             let _point = this.drawArray[index]
@@ -166,7 +181,7 @@ export default class ThreeScanLayer{
                 this.drawArray = this.drawArray.filter(a=>a)    
                 let geometry = new THREE.PlaneGeometry(point.width *20,point.width*20);        
                 //geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
-                let material = new THREE.MeshPhongMaterial({    
+                let material = new THREE.MeshBasicMaterial({    
                     map:texture,     
                     opacity:this.opacity,      
                     transparent: true,
@@ -174,10 +189,10 @@ export default class ThreeScanLayer{
                 material.color.convertSRGBToLinear();
                 let mesh = new THREE.Mesh(geometry, material);
                 mesh.name = 'scanimg'
-                mesh = tb.Object3D({ obj: mesh, units: 'meters',fixedZoom :15 ,anchor:'center'});
+                mesh = this.tb.Object3D({ obj: mesh, units: 'meters',fixedZoom :15 ,anchor:'center'});
                 mesh.setCoords( transform(point.center));
-                tb.renderer.outputEncoding = THREE.sRGBEncoding;
-                tb.add(mesh);
+                this.tb.renderer.outputEncoding = THREE.sRGBEncoding;
+                this.tb.add(mesh);
                 let dom =document.createElement('div')                   
                 mesh.addLabel(dom,true,{x:mesh.anchor.x,y:mesh.anchor.y+point.distance *1200,z:mesh.anchor.z},0)
                 mesh.label.element.className += ('' +this.textClass)
@@ -201,7 +216,7 @@ export default class ThreeScanLayer{
         }else{
             let geometry = new THREE.PlaneGeometry(point.width *20,point.width*20);        
             //geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
-            let material = new THREE.MeshPhongMaterial({    
+            let material = new THREE.MeshBasicMaterial({    
                 map:texture,     
                 opacity:this.opacity,      
                 transparent: true,
@@ -209,10 +224,10 @@ export default class ThreeScanLayer{
             material.color.convertSRGBToLinear();
             let mesh = new THREE.Mesh(geometry, material);
             mesh.name = 'scanimg'
-            mesh = tb.Object3D({ obj: mesh, units: 'meters',fixedZoom :15 ,anchor:'center'});
+            mesh = this.tb.Object3D({ obj: mesh, units: 'meters',fixedZoom :15 ,anchor:'center'});
             mesh.setCoords( transform(point.center));
-            tb.renderer.outputEncoding = THREE.sRGBEncoding;
-            tb.add(mesh);
+            this.tb.renderer.outputEncoding = THREE.sRGBEncoding;
+            this.tb.add(mesh);
             let dom =document.createElement('div')                   
             mesh.addLabel(dom,true,{x:mesh.anchor.x,y:mesh.anchor.y+point.distance *1200,z:mesh.anchor.z},0)
             mesh.label.element.className += ('' +this.textClass)
@@ -246,10 +261,10 @@ export default class ThreeScanLayer{
         material.color.convertSRGBToLinear();
         let mesh = new THREE.Mesh(geometry, material);
         mesh.name = 'scanimg'
-        mesh = tb.Object3D({ obj: mesh, units: 'meters',fixedZoom :15 ,anchor:'center'});
+        mesh = this.tb.Object3D({ obj: mesh, units: 'meters',fixedZoom :15 ,anchor:'center'});
         mesh.setCoords( transform(point.center));
-        tb.renderer.outputEncoding = THREE.sRGBEncoding;
-        tb.add(mesh);     
+        this.tb.renderer.outputEncoding = THREE.sRGBEncoding;
+        this.tb.add(mesh);     
         let dom =document.createElement('div')         
         mesh.addLabel(dom,true,{x:mesh.anchor.x,y:mesh.anchor.y+point.distance *1200,z:mesh.anchor.z},0)
         mesh.label.element.className += ('' +this.textClass)
@@ -258,15 +273,15 @@ export default class ThreeScanLayer{
     }
 
     onAdd(map, gl) {
-        this.map = map;    
-        tb = new Threebox(
+        this.map = map;   
+        this.tb = new Threebox(
           map,
           gl, //get the context from Mapbox
           { defaultLights: true ,passiveRendering:false}
         );          
     }
-    render(gl, matrix) {      
-        tb.update(); 
+    render(gl, matrix) {    
+        this.tb.update(); 
         this.map.triggerRepaint();
     }