From f465b4d7e33299dbbfb0d0f00db15df69803715f Mon Sep 17 00:00:00 2001 From: Jesus Serrano Date: Fri, 4 Dec 2020 00:14:49 +0100 Subject: [PATCH] #119 Create an Azure Maps example Updated builds --- CHANGELOG.md | 1 + dist/threebox.min.js | 4 ++-- examples/17-azuremaps.html | 6 ++++-- examples/README.md | 10 +++++++++- examples/images/azuremaps.png | Bin 0 -> 2630231 bytes tests/threebox-tests-bundle.js | 21 +++++++++++++-------- 6 files changed, 29 insertions(+), 13 deletions(-) create mode 100644 examples/images/azuremaps.png diff --git a/CHANGELOG.md b/CHANGELOG.md index 9656fdc3..9e80bceb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,7 @@ Minor version by [@jscastro76](https://github.com/jscastro76), some enhancements - [**#109**](https://github.com/jscastro76/threebox/issues/109) add speed param to animations #109 - [**#114**](https://github.com/jscastro76/threebox/issues/114) `tb.setSunlight` must accept LngLatLike coords #114 - [**#117**](https://github.com/jscastro76/threebox/issues/117) cache functions must be 100% async #117 +- [**#119**](https://github.com/jscastro76/threebox/issues/119) Create a sample with azure maps #119. Added added [17-azuremaps.html](https://github.com/jscastro76/threebox/blob/master/examples/17-azuremaps.html) #### :beetle: Bug fixes diff --git a/dist/threebox.min.js b/dist/threebox.min.js index ea4cf6ff..d04f72a2 100644 --- a/dist/threebox.min.js +++ b/dist/threebox.min.js @@ -2,7 +2,7 @@ window.Threebox=require("./src/Threebox.js"),window.THREE=require("./src/three.js"); },{"./src/Threebox.js":2,"./src/three.js":22}],2:[function(require,module,exports){ -const THREE=require("./three.js"),CameraSync=require("./camera/CameraSync.js"),utils=require("./utils/utils.js"),SunCalc=require("./utils/suncalc.js"),AnimationManager=require("./animation/AnimationManager.js"),ThreeboxConstants=require("./utils/constants.js"),Objects=require("./objects/objects.js"),material=require("./utils/material.js"),sphere=require("./objects/sphere.js"),label=require("./objects/label.js"),tooltip=require("./objects/tooltip.js"),loader=require("./objects/loadObj.js"),Object3D=require("./objects/Object3D.js"),line=require("./objects/line.js"),tube=require("./objects/tube.js"),LabelRenderer=require("./objects/LabelRenderer.js"),BuildingShadows=require("./objects/effects/BuildingShadows.js");function Threebox(t,e,i){this.init(t,e,i)}Threebox.prototype={repaint:function(){this.map.repaint=!0},init:function(t,e,i){this.options=utils._validate(i||{},defaultOptions),this.map=t,this.map.tb=this,this.objects=new Objects,this.renderer=new THREE.WebGLRenderer({alpha:!0,antialias:!0,canvas:t.getCanvas(),context:e}),this.renderer.setPixelRatio(window.devicePixelRatio),this.renderer.setSize(this.map.getCanvas().clientWidth,this.map.getCanvas().clientHeight),this.renderer.outputEncoding=THREE.sRGBEncoding,this.renderer.autoClear=!1,this.labelRenderer=new LabelRenderer(this.map),this.scene=new THREE.Scene,this.camera=new THREE.PerspectiveCamera(ThreeboxConstants.FOV_DEGREES,this.map.getCanvas().clientWidth/this.map.getCanvas().clientHeight,1,1e21),this.camera.layers.enable(0),this.camera.layers.enable(1),this.world=new THREE.Group,this.world.name="world",this.scene.add(this.world),this.objectsCache=new Map,this.zoomLayers=[],this.cameraSync=new CameraSync(this.map,this.camera,this.world),this.raycaster=new THREE.Raycaster,this.raycaster.layers.set(0),this.mapCenter=this.map.getCenter(),this.mapCenterUnits=utils.projectToWorld([this.mapCenter.lng,this.mapCenter.lat]),this.lightDateTime=new Date,this.lightLng=this.mapCenter.lng,this.lightLat=this.mapCenter.lat,this.sunPosition,this.rotationStep=5,this.gridStep=6,this.altitudeStep=.1,this.lights=this.initLights,this.options.defaultLights&&this.defaultLights(),this.options.realSunlight&&this.realSunlight(this.options.realSunlightHelper),this.enableSelectingFeatures=this.options.enableSelectingFeatures||!1,this.enableSelectingObjects=this.options.enableSelectingObjects||!1,this.enableDraggingObjects=this.options.enableDraggingObjects||!1,this.enableRotatingObjects=this.options.enableRotatingObjects||!1,this.enableTooltips=this.options.enableTooltips||!1,this.multiLayer=this.options.multiLayer||!1,this.map.on("load",function(){let e,i,s,n,r,o;this.tb.options.multiLayer&&this.addLayer({id:"threebox_layer",type:"custom",renderingMode:"3d",map:this,onAdd:function(t,e){},render:function(t,e){this.map.tb.update()}});let a,l=this.getCanvasContainer();this.getCanvasContainer().style.cursor="default";let h,u,d,c,g=[];function p(t){var e=l.getBoundingClientRect();return{x:t.originalEvent.clientX-e.left-l.clientLeft,y:t.originalEvent.clientY-e.top-l.clientTop}}function m(t,e){void 0!==t.id&&(e.setFeatureState({source:t.source,sourceLayer:t.sourceLayer,id:t.id},{select:!1}),v(t,e),(t=e.queryRenderedFeatures({layers:[t.layer.id],filter:["==",["id"],t.id]})[0])&&e.fire("SelectedFeatureChange",{detail:t}),o=null)}function b(t,e){o=t,e.setFeatureState({source:o.source,sourceLayer:o.sourceLayer,id:o.id},{select:!0}),L(o=e.queryRenderedFeatures({layers:[o.layer.id],filter:["==",["id"],o.id]})[0],e),e.fire("SelectedFeatureChange",{detail:o})}function y(t,e){r&&void 0!==r&&r.id!=t&&(e.setFeatureState({source:r.source,sourceLayer:r.sourceLayer,id:r.id},{hover:!1}),v(r,e),r=null)}function f(t){t.selected=!1,e=null}function L(t,e){if(!e.tb.enableTooltips)return;let i=e.tb.getFeatureCenter(t),s=e.tb.tooltip({text:t.properties.name||t.id||t.type,mapboxStyle:!0,feature:t});s.setCoords(i),e.tb.add(s,t.layer.id),t.tooltip=s,t.tooltip.tooltip.visible=!0}function v(t,e){t.tooltip&&(t.tooltip.visibility=!1,e.tb.remove(t.tooltip),t.tooltip=null)}t.onContextMenu=function(t){alert("contextMenu")},t.onClick=function(i){let s,n=[];if(t.tb.enableSelectingObjects&&(n=this.tb.queryRenderedFeatures(i.point)),s="object"==typeof n[0]){let t=Threebox.prototype.findParent3DObject(n[0]);if(t){if(o&&m(o,this),e){if(e.uuid!=t.uuid)e.selected=!1,t.selected=!0,e=t;else if(e.uuid==t.uuid)return void f(e)}else(e=t).selected=!0;e.dispatchEvent(new CustomEvent("Wireframed",{detail:e,bubbles:!0,cancelable:!0})),e.dispatchEvent(new CustomEvent("IsPlayingChanged",{detail:e,bubbles:!0,cancelable:!0})),this.repaint=!0,i.preventDefault()}}else{let s=[];if(t.tb.enableSelectingFeatures&&(s=this.queryRenderedFeatures(i.point)),s.length>0&&"fill-extrusion"==s[0].layer.type&&void 0!==s[0].id)if(e&&f(e),o){if(o.id!=s[0].id)m(o,this),b(s[0],this);else if(o.id==s[0].id)return void m(o,this)}else b(s[0],this)}},t.onMouseMove=function(l){let g,m=p(l);if(this.getCanvasContainer().style.cursor="default",l.originalEvent.altKey&&i){if(!t.tb.enableRotatingObjects)return;s="rotate",this.getCanvasContainer().style.cursor="move";Math.min(a.x,m.x),Math.max(a.x,m.x),Math.min(a.y,m.y),Math.max(a.y,m.y);let e={x:0,y:0,z:Math.round(c[2]+~~((m.x-a.x)/this.tb.rotationStep)%360*this.tb.rotationStep%360)};return i.setRotation(e),void i.addHelp("rot: "+e.z+"°")}if(l.originalEvent.shiftKey&&i){if(!t.tb.enableDraggingObjects)return;s="translate",this.getCanvasContainer().style.cursor="move";let e=l.lngLat,n=[Number((e.lng+h).toFixed(this.tb.gridStep)),Number((e.lat+u).toFixed(this.tb.gridStep)),i.modelHeight];return i.setCoords(n),void i.addHelp("lng: "+n[0]+"°, lat: "+n[1]+"°")}if(l.originalEvent.ctrlKey&&i){if(!t.tb.enableDraggingObjects)return;s="altitude",this.getCanvasContainer().style.cursor="move";let e=l.point.y*this.tb.altitudeStep,n=[i.coordinates[0],i.coordinates[1],Number((-e-d).toFixed(this.tb.gridStep))];return i.setCoords(n),void i.addHelp("alt: "+n[2]+"m")}let b=[];if(t.tb.enableSelectingObjects&&(b=this.tb.queryRenderedFeatures(l.point)),g="object"==typeof b[0]){let t=Threebox.prototype.findParent3DObject(b[0]);t&&(y(r,this),this.getCanvasContainer().style.cursor="pointer",e&&t.uuid==e.uuid||(n&&(n.over=!1,n=null),t.over=!0,n=t),this.repaint=!0,l.preventDefault())}else{n&&(n.over=!1,n=null);let e=[];t.tb.enableSelectingFeatures&&(e=this.queryRenderedFeatures(l.point)),e.length>0&&(y(e[0],this),"fill-extrusion"==e[0].layer.type&&void 0!==e[0].id&&(o&&o.id==e[0].id||(this.getCanvasContainer().style.cursor="pointer",r=e[0],this.setFeatureState({source:r.source,sourceLayer:r.sourceLayer,id:r.id},{hover:!0}),L(r=t.queryRenderedFeatures({layers:[r.layer.id],filter:["==",["id"],r.id]})[0],this))))}},t.onMouseDown=function(s){(s.originalEvent.shiftKey||s.originalEvent.altKey||s.originalEvent.ctrlKey)&&0===s.originalEvent.button&&e&&(t.tb.enableDraggingObjects||t.tb.enableRotatingObjects)&&(s.preventDefault(),t.getCanvasContainer().style.cursor="move",t.once("mouseup",t.onMouseUp),t.once("mouseout",t.onMouseUp),i=e,a=p(s),g=i.coordinates,c=utils.degreeify(i.rotation),h=g[0]-s.lngLat.lng,u=g[1]-s.lngLat.lat,d=-i.modelHeight-s.point.y*this.tb.altitudeStep)},t.onMouseUp=function(e){this.getCanvasContainer().style.cursor="default",this.off("mouseup",t.onMouseUp),this.off("mouseout",t.onMouseUp),this.dragPan.enable(),i&&(i.dispatchEvent(new CustomEvent("ObjectDragged",{detail:{draggedObject:i,draggedAction:s},bubbles:!0,cancelable:!0})),i.removeHelp(),i=null,s=null)},t.onMouseOut=function(t){if(r){let e=this.queryRenderedFeatures(t.point);e.length>0&&r.id!=e[0].id&&(this.getCanvasContainer().style.cursor="default",y(e[0],this))}},t.onZoomEnd=function(t){this.tb.zoomLayers.every(t=>(this.tb.setLayerZoomVisibility(t),!0))},this.on("click",t.onClick),this.on("mousemove",t.onMouseMove),this.on("mouseout",t.onMouseOut),this.on("mousedown",t.onMouseDown),this.on("zoom",t.onZoomEnd)})},sphere:function(t){return this.setDefaultView(t,this.options),sphere(t,this.world)},line:line,label:label,tooltip:tooltip,tube:function(t){return this.setDefaultView(t,this.options),tube(t,this.world)},Object3D:function(t,e){return this.setDefaultView(t,this.options),Object3D(t,e)},loadObj:async function(t,e){this.setDefaultView(t,this.options);let i=this.objectsCache.get(t.obj);i?i.promise.then(i=>{e(i.duplicate(t))}).catch(e=>{this.objectsCache.delete(t.obj),console.error("Could not load model file: "+t.obj)}):this.objectsCache.set(t.obj,{promise:new Promise(async(i,s)=>{loader(t,e,async t=>{t.duplicate?i(t.duplicate()):s(t)})})})},material:function(t){return material(t)},initLights:{ambientLight:null,dirLight:null,dirLightBack:null,dirLightHelper:null,hemiLight:null,pointLight:null},utils:utils,SunCalc:SunCalc,Constants:ThreeboxConstants,projectToWorld:function(t){return this.utils.projectToWorld(t)},unprojectFromWorld:function(t){return this.utils.unprojectFromWorld(t)},projectedUnitsPerMeter:function(t){return this.utils.projectedUnitsPerMeter(t)},getFeatureCenter:function(t,e,i){return utils.getFeatureCenter(t,e,i)},getObjectHeightOnFloor:function(t,e,i){return utils.getObjectHeightOnFloor(t,e,i)},queryRenderedFeatures:function(t){let e=new THREE.Vector2;return e.x=t.x/this.map.transform.width*2-1,e.y=1-t.y/this.map.transform.height*2,this.raycaster.setFromCamera(e,this.camera),this.raycaster.intersectObjects(this.world.children,!0)},findParent3DObject:function(t){var e;return t.object.traverseAncestors(function(t){t.parent&&"Group"==t.parent.type&&t.userData.obj&&(e=t)}),e},setLayoutProperty:function(t,e,i){this.map.setLayoutProperty(t,e,i),null==i||"visibility"!==e||this.world.children.forEach(function(e){e.layer===t&&(e.visibility=i)})},setLayerZoomRange:function(t,e,i){this.map.getLayer(t)&&(this.map.setLayerZoomRange(t,e,i),this.zoomLayers.includes(t)||this.zoomLayers.push(t),this.setLayerZoomVisibility(t))},setLayerHeigthProperty:function(t,e){let i=this.map.getLayer(t);if(i)if("fill-extrusion"==i.type){let t=this.map.getStyle().sources[i.source].data;t.features.forEach(function(t){t.properties.level=e}),this.map.getSource(i.source).setData(t)}else"custom"==i.type&&this.world.children.forEach(function(i){let s=i.userData.feature;if(s&&s.layer===t){let t=this.tb.getFeatureCenter(s,i,e);i.setCoords(t)}})},setStyle:function(t,e){this.clear().then(()=>{this.map.setStyle(t,e)})},toggleLayer:function(t,e){this.map.getLayer(t)&&(this.setLayoutProperty(t,"visibility",e?"visible":"none"),this.labelRenderer.toggleLabels(t,e))},setLayerZoomVisibility:function(t){let e=this.map.getZoom(),i=this.map.getLayer(t);i.visibility;if(i){if(i.minzoom&&e=i.maxzoom)return void this.toggleLayer(i.id,!1);this.toggleLayer(i.id,!0)}},update:function(){this.map.repaint&&(this.map.repaint=!1);var t=Date.now();this.objects.animationManager.update(t),this.updateLightHelper(),this.renderer.state.reset(),this.renderer.render(this.scene,this.camera),this.labelRenderer.render(this.scene,this.camera),!1===this.options.passiveRendering&&this.map.triggerRepaint()},add:function(t,e,i){if(!this.enableTooltips&&t.tooltip&&(t.tooltip.visibility=!1),this.world.add(t),e){t.layer=e,t.source=i;let s=this.map.getLayer(e);if(s){let e=s.visibility,i=void 0===e;t.visibility=!(!i&&"visible"!==e)}}},remove:function(t){t.dispose&&t.dispose(),this.world.remove(t),t=null},clear:async function(t=null,e=!1){return new Promise((i,s)=>{let n=[];this.world.children.forEach(function(t){n.push(t)});for(let e=0;e{t.promise.then(t=>{t.dispose(),t=null})}),i("clear")})},removeLayer:function(t){this.clear(t,!0).then(()=>{this.map.removeLayer(t)})},getSunPosition:function(t,e){return SunCalc.getPosition(t,e[1],e[0])},getSunTimes:function(t,e){return SunCalc.getTimes(t,e[1],e[0],e[2]?e[2]:0)},setBuildingShadows:function(t){if(this.map.getLayer(t.buildingsLayerId)){let e=new BuildingShadows(t,this);this.map.addLayer(e,t.buildingsLayerId)}else console.warn("The layer '"+t.buildingsLayerId+"' does not exist in the map.")},setSunlight:function(t=new Date,e){if(!this.lights.dirLight||!this.options.realSunlight)return void console.warn("To use setSunlight it's required to set realSunlight : true in Threebox initial options.");var i=new Date(t.getTime());if(e?e.lng&&e.lat?this.mapCenter=e:this.mapCenter={lng:e[0],lat:e[1]}:this.mapCenter=this.map.getCenter(),this.lightDateTime&&this.lightDateTime.getTime()===i.getTime()&&this.lightLng===this.mapCenter.lng&&this.lightLat===this.mapCenter.lat)return;this.lightDateTime=i,this.lightLng=this.mapCenter.lng,this.lightLat=this.mapCenter.lat,this.sunPosition=this.getSunPosition(i,[this.mapCenter.lng,this.mapCenter.lat]);let s=this.sunPosition.altitude,n=Math.PI+this.sunPosition.azimuth,r=ThreeboxConstants.WORLD_SIZE/2,o=Math.sin(s),a=Math.cos(s),l=Math.cos(n)*a,h=Math.sin(n)*a;this.lights.dirLight.position.set(h,l,o),this.lights.dirLight.position.multiplyScalar(r),this.lights.dirLight.intensity=Math.max(o,-.15),this.lights.dirLight.updateMatrixWorld(),this.updateLightHelper(),this.map.loaded()&&this.map.setLight({anchor:"map",position:[1.5,180+180*this.sunPosition.azimuth/Math.PI,90-180*this.sunPosition.altitude/Math.PI],"position-transition":{duration:0},color:`hsl(40, ${50*Math.cos(this.sunPosition.altitude)}%, ${96*Math.sin(this.sunPosition.altitude)}%)`},{duration:0})},updateLightHelper:function(){this.lights.dirLightHelper&&(this.lights.dirLightHelper.position.setFromMatrixPosition(this.lights.dirLight.matrixWorld),this.lights.dirLightHelper.updateMatrix(),this.lights.dirLightHelper.update())},dispose:async function(){return console.log(this.memory()),new Promise(t=>{t(this.clear(null,!0).then(t=>(this.map.remove(),this.map={},this.scene.remove(this.world),this.scene.dispose(),this.world.children=[],this.world=null,this.objectsCache.clear(),this.labelRenderer.dispose(),console.log(this.memory()),this.renderer.dispose(),t)))})},defaultLights:function(){this.lights.ambientLight=new THREE.AmbientLight(new THREE.Color("hsl(0, 0%, 100%)"),.75),this.scene.add(this.lights.ambientLight),this.lights.dirLightBack=new THREE.DirectionalLight(new THREE.Color("hsl(0, 0%, 100%)"),.25),this.lights.dirLightBack.position.set(30,100,100),this.scene.add(this.lights.dirLightBack),this.lights.dirLight=new THREE.DirectionalLight(new THREE.Color("hsl(0, 0%, 100%)"),.25),this.lights.dirLight.position.set(-30,100,-100),this.scene.add(this.lights.dirLight)},realSunlight:function(t=!1){this.renderer.shadowMap.enabled=!0,this.lights.dirLight=new THREE.DirectionalLight(16777215,1),this.scene.add(this.lights.dirLight),t&&(this.lights.dirLightHelper=new THREE.DirectionalLightHelper(this.lights.dirLight,5),this.scene.add(this.lights.dirLightHelper));this.lights.dirLight.castShadow=!0,this.lights.dirLight.shadow.radius=2,this.lights.dirLight.shadow.mapSize.width=8192,this.lights.dirLight.shadow.mapSize.height=8192,this.lights.dirLight.shadow.camera.top=this.lights.dirLight.shadow.camera.right=1e3,this.lights.dirLight.shadow.camera.bottom=this.lights.dirLight.shadow.camera.left=-1e3,this.lights.dirLight.shadow.camera.near=1,this.lights.dirLight.shadow.camera.visible=!0,this.lights.dirLight.shadow.camera.far=4e8,this.lights.hemiLight=new THREE.HemisphereLight(new THREE.Color(16777215),new THREE.Color(16777215),.6),this.lights.hemiLight.color.setHSL(.661,.96,.12),this.lights.hemiLight.groundColor.setHSL(.11,.96,.14),this.lights.hemiLight.position.set(0,0,50),this.scene.add(this.lights.hemiLight),this.setSunlight()},setDefaultView:function(t,e){t.bbox=t.bbox||e.enableSelectingObjects,t.tooltip=t.tooltip||e.enableTooltips},memory:function(){return this.renderer.info.memory},programs:function(){return this.renderer.info.programs.length},version:"2.1.1"};var defaultOptions={defaultLights:!1,realSunlight:!1,realSunlightHelper:!1,passiveRendering:!0,enableSelectingFeatures:!1,enableSelectingObjects:!1,enableDraggingObjects:!1,enableRotatingObjects:!1,enableTooltips:!1,multiLayer:!1};module.exports=exports=Threebox; +const THREE=require("./three.js"),CameraSync=require("./camera/CameraSync.js"),utils=require("./utils/utils.js"),SunCalc=require("./utils/suncalc.js"),AnimationManager=require("./animation/AnimationManager.js"),ThreeboxConstants=require("./utils/constants.js"),Objects=require("./objects/objects.js"),material=require("./utils/material.js"),sphere=require("./objects/sphere.js"),label=require("./objects/label.js"),tooltip=require("./objects/tooltip.js"),loader=require("./objects/loadObj.js"),Object3D=require("./objects/Object3D.js"),line=require("./objects/line.js"),tube=require("./objects/tube.js"),LabelRenderer=require("./objects/LabelRenderer.js"),BuildingShadows=require("./objects/effects/BuildingShadows.js");function Threebox(t,e,i){this.init(t,e,i)}Threebox.prototype={repaint:function(){this.map.repaint=!0},init:function(t,e,i){this.options=utils._validate(i||{},defaultOptions),this.map=t,this.map.tb=this,this.objects=new Objects,this.renderer=new THREE.WebGLRenderer({alpha:!0,antialias:!0,canvas:t.getCanvas(),context:e}),this.renderer.setPixelRatio(window.devicePixelRatio),this.renderer.setSize(this.map.getCanvas().clientWidth,this.map.getCanvas().clientHeight),this.renderer.outputEncoding=THREE.sRGBEncoding,this.renderer.autoClear=!1,this.labelRenderer=new LabelRenderer(this.map),this.scene=new THREE.Scene,this.camera=new THREE.PerspectiveCamera(ThreeboxConstants.FOV_DEGREES,this.map.getCanvas().clientWidth/this.map.getCanvas().clientHeight,1,1e21),this.camera.layers.enable(0),this.camera.layers.enable(1),this.world=new THREE.Group,this.world.name="world",this.scene.add(this.world),this.objectsCache=new Map,this.zoomLayers=[],this.cameraSync=new CameraSync(this.map,this.camera,this.world),this.raycaster=new THREE.Raycaster,this.raycaster.layers.set(0),this.mapCenter=this.map.getCenter(),this.mapCenterUnits=utils.projectToWorld([this.mapCenter.lng,this.mapCenter.lat]),this.lightDateTime=new Date,this.lightLng=this.mapCenter.lng,this.lightLat=this.mapCenter.lat,this.sunPosition,this.rotationStep=5,this.gridStep=6,this.altitudeStep=.1,this.lights=this.initLights,this.options.defaultLights&&this.defaultLights(),this.options.realSunlight&&this.realSunlight(this.options.realSunlightHelper),this.enableSelectingFeatures=this.options.enableSelectingFeatures||!1,this.enableSelectingObjects=this.options.enableSelectingObjects||!1,this.enableDraggingObjects=this.options.enableDraggingObjects||!1,this.enableRotatingObjects=this.options.enableRotatingObjects||!1,this.enableTooltips=this.options.enableTooltips||!1,this.multiLayer=this.options.multiLayer||!1,this.map.on("style.load",function(){this.tb.zoomLayers=[],this.tb.options.multiLayer&&this.addLayer({id:"threebox_layer",type:"custom",renderingMode:"3d",map:this,onAdd:function(t,e){},render:function(t,e){this.map.tb.update()}})}),this.map.on("load",function(){let e,i,s,n,r,o,a,l=this.getCanvasContainer();this.getCanvasContainer().style.cursor="default";let h,u,d,c,g=[];function p(t){var e=l.getBoundingClientRect();return{x:t.originalEvent.clientX-e.left-l.clientLeft,y:t.originalEvent.clientY-e.top-l.clientTop}}function m(t,e){void 0!==t.id&&(e.setFeatureState({source:t.source,sourceLayer:t.sourceLayer,id:t.id},{select:!1}),v(t,e),(t=e.queryRenderedFeatures({layers:[t.layer.id],filter:["==",["id"],t.id]})[0])&&e.fire("SelectedFeatureChange",{detail:t}),o=null)}function b(t,e){o=t,e.setFeatureState({source:o.source,sourceLayer:o.sourceLayer,id:o.id},{select:!0}),L(o=e.queryRenderedFeatures({layers:[o.layer.id],filter:["==",["id"],o.id]})[0],e),e.fire("SelectedFeatureChange",{detail:o})}function y(t,e){r&&void 0!==r&&r.id!=t&&(e.setFeatureState({source:r.source,sourceLayer:r.sourceLayer,id:r.id},{hover:!1}),v(r,e),r=null)}function f(t){t.selected=!1,e=null}function L(t,e){if(!e.tb.enableTooltips)return;let i=e.tb.getFeatureCenter(t),s=e.tb.tooltip({text:t.properties.name||t.id||t.type,mapboxStyle:!0,feature:t});s.setCoords(i),e.tb.add(s,t.layer.id),t.tooltip=s,t.tooltip.tooltip.visible=!0}function v(t,e){t.tooltip&&(t.tooltip.visibility=!1,e.tb.remove(t.tooltip),t.tooltip=null)}t.onContextMenu=function(t){alert("contextMenu")},t.onClick=function(i){let s,n=[];if(t.tb.enableSelectingObjects&&(n=this.tb.queryRenderedFeatures(i.point)),s="object"==typeof n[0]){let t=Threebox.prototype.findParent3DObject(n[0]);if(t){if(o&&m(o,this),e){if(e.uuid!=t.uuid)e.selected=!1,t.selected=!0,e=t;else if(e.uuid==t.uuid)return void f(e)}else(e=t).selected=!0;e.dispatchEvent(new CustomEvent("Wireframed",{detail:e,bubbles:!0,cancelable:!0})),e.dispatchEvent(new CustomEvent("IsPlayingChanged",{detail:e,bubbles:!0,cancelable:!0})),this.repaint=!0,i.preventDefault()}}else{let s=[];if(t.tb.enableSelectingFeatures&&(s=this.queryRenderedFeatures(i.point)),s.length>0&&"fill-extrusion"==s[0].layer.type&&void 0!==s[0].id)if(e&&f(e),o){if(o.id!=s[0].id)m(o,this),b(s[0],this);else if(o.id==s[0].id)return void m(o,this)}else b(s[0],this)}},t.onMouseMove=function(l){let g,m=p(l);if(this.getCanvasContainer().style.cursor="default",l.originalEvent.altKey&&i){if(!t.tb.enableRotatingObjects)return;s="rotate",this.getCanvasContainer().style.cursor="move";Math.min(a.x,m.x),Math.max(a.x,m.x),Math.min(a.y,m.y),Math.max(a.y,m.y);let e={x:0,y:0,z:Math.round(c[2]+~~((m.x-a.x)/this.tb.rotationStep)%360*this.tb.rotationStep%360)};return i.setRotation(e),void i.addHelp("rot: "+e.z+"°")}if(l.originalEvent.shiftKey&&i){if(!t.tb.enableDraggingObjects)return;s="translate",this.getCanvasContainer().style.cursor="move";let e=l.lngLat,n=[Number((e.lng+h).toFixed(this.tb.gridStep)),Number((e.lat+u).toFixed(this.tb.gridStep)),i.modelHeight];return i.setCoords(n),void i.addHelp("lng: "+n[0]+"°, lat: "+n[1]+"°")}if(l.originalEvent.ctrlKey&&i){if(!t.tb.enableDraggingObjects)return;s="altitude",this.getCanvasContainer().style.cursor="move";let e=l.point.y*this.tb.altitudeStep,n=[i.coordinates[0],i.coordinates[1],Number((-e-d).toFixed(this.tb.gridStep))];return i.setCoords(n),void i.addHelp("alt: "+n[2]+"m")}let b=[];if(t.tb.enableSelectingObjects&&(b=this.tb.queryRenderedFeatures(l.point)),g="object"==typeof b[0]){let t=Threebox.prototype.findParent3DObject(b[0]);t&&(y(r,this),this.getCanvasContainer().style.cursor="pointer",e&&t.uuid==e.uuid||(n&&(n.over=!1,n=null),t.over=!0,n=t),this.repaint=!0,l.preventDefault())}else{n&&(n.over=!1,n=null);let e=[];t.tb.enableSelectingFeatures&&(e=this.queryRenderedFeatures(l.point)),e.length>0&&(y(e[0],this),"fill-extrusion"==e[0].layer.type&&void 0!==e[0].id&&(o&&o.id==e[0].id||(this.getCanvasContainer().style.cursor="pointer",r=e[0],this.setFeatureState({source:r.source,sourceLayer:r.sourceLayer,id:r.id},{hover:!0}),L(r=t.queryRenderedFeatures({layers:[r.layer.id],filter:["==",["id"],r.id]})[0],this))))}},t.onMouseDown=function(s){(s.originalEvent.shiftKey||s.originalEvent.altKey||s.originalEvent.ctrlKey)&&0===s.originalEvent.button&&e&&(t.tb.enableDraggingObjects||t.tb.enableRotatingObjects)&&(s.preventDefault(),t.getCanvasContainer().style.cursor="move",t.once("mouseup",t.onMouseUp),t.once("mouseout",t.onMouseUp),i=e,a=p(s),g=i.coordinates,c=utils.degreeify(i.rotation),h=g[0]-s.lngLat.lng,u=g[1]-s.lngLat.lat,d=-i.modelHeight-s.point.y*this.tb.altitudeStep)},t.onMouseUp=function(e){this.getCanvasContainer().style.cursor="default",this.off("mouseup",t.onMouseUp),this.off("mouseout",t.onMouseUp),this.dragPan.enable(),i&&(i.dispatchEvent(new CustomEvent("ObjectDragged",{detail:{draggedObject:i,draggedAction:s},bubbles:!0,cancelable:!0})),i.removeHelp(),i=null,s=null)},t.onMouseOut=function(t){if(r){let e=this.queryRenderedFeatures(t.point);e.length>0&&r.id!=e[0].id&&(this.getCanvasContainer().style.cursor="default",y(e[0],this))}},t.onZoomEnd=function(t){this.tb.zoomLayers.every(t=>(this.tb.setLayerZoomVisibility(t),!0))},this.on("click",t.onClick),this.on("mousemove",t.onMouseMove),this.on("mouseout",t.onMouseOut),this.on("mousedown",t.onMouseDown),this.on("zoom",t.onZoomEnd)})},sphere:function(t){return this.setDefaultView(t,this.options),sphere(t,this.world)},line:line,label:label,tooltip:tooltip,tube:function(t){return this.setDefaultView(t,this.options),tube(t,this.world)},Object3D:function(t,e){return this.setDefaultView(t,this.options),Object3D(t,e)},loadObj:async function(t,e){this.setDefaultView(t,this.options);let i=this.objectsCache.get(t.obj);i?i.promise.then(i=>{e(i.duplicate(t))}).catch(e=>{this.objectsCache.delete(t.obj),console.error("Could not load model file: "+t.obj)}):this.objectsCache.set(t.obj,{promise:new Promise(async(i,s)=>{loader(t,e,async t=>{t.duplicate?i(t.duplicate()):s(t)})})})},material:function(t){return material(t)},initLights:{ambientLight:null,dirLight:null,dirLightBack:null,dirLightHelper:null,hemiLight:null,pointLight:null},utils:utils,SunCalc:SunCalc,Constants:ThreeboxConstants,projectToWorld:function(t){return this.utils.projectToWorld(t)},unprojectFromWorld:function(t){return this.utils.unprojectFromWorld(t)},projectedUnitsPerMeter:function(t){return this.utils.projectedUnitsPerMeter(t)},getFeatureCenter:function(t,e,i){return utils.getFeatureCenter(t,e,i)},getObjectHeightOnFloor:function(t,e,i){return utils.getObjectHeightOnFloor(t,e,i)},queryRenderedFeatures:function(t){let e=new THREE.Vector2;return e.x=t.x/this.map.transform.width*2-1,e.y=1-t.y/this.map.transform.height*2,this.raycaster.setFromCamera(e,this.camera),this.raycaster.intersectObjects(this.world.children,!0)},findParent3DObject:function(t){var e;return t.object.traverseAncestors(function(t){t.parent&&"Group"==t.parent.type&&t.userData.obj&&(e=t)}),e},setLayoutProperty:function(t,e,i){this.map.setLayoutProperty(t,e,i),null==i||"visibility"!==e||this.world.children.forEach(function(e){e.layer===t&&(e.visibility=i)})},setLayerZoomRange:function(t,e,i){this.map.getLayer(t)&&(this.map.setLayerZoomRange(t,e,i),this.zoomLayers.includes(t)||this.zoomLayers.push(t),this.setLayerZoomVisibility(t))},setLayerHeigthProperty:function(t,e){let i=this.map.getLayer(t);if(i)if("fill-extrusion"==i.type){let t=this.map.getStyle().sources[i.source].data;t.features.forEach(function(t){t.properties.level=e}),this.map.getSource(i.source).setData(t)}else"custom"==i.type&&this.world.children.forEach(function(i){let s=i.userData.feature;if(s&&s.layer===t){let t=this.tb.getFeatureCenter(s,i,e);i.setCoords(t)}})},setStyle:function(t,e){this.clear().then(()=>{this.map.setStyle(t,e)})},toggleLayer:function(t,e){this.map.getLayer(t)&&(this.setLayoutProperty(t,"visibility",e?"visible":"none"),this.labelRenderer.toggleLabels(t,e))},setLayerZoomVisibility:function(t){let e=this.map.getZoom(),i=this.map.getLayer(t);i.visibility;if(i){if(i.minzoom&&e=i.maxzoom)return void this.toggleLayer(i.id,!1);this.toggleLayer(i.id,!0)}},update:function(){this.map.repaint&&(this.map.repaint=!1);var t=Date.now();this.objects.animationManager.update(t),this.updateLightHelper(),this.renderer.state.reset(),this.renderer.render(this.scene,this.camera),this.labelRenderer.render(this.scene,this.camera),!1===this.options.passiveRendering&&this.map.triggerRepaint()},add:function(t,e,i){if(!this.enableTooltips&&t.tooltip&&(t.tooltip.visibility=!1),this.world.add(t),e){t.layer=e,t.source=i;let s=this.map.getLayer(e);if(s){let e=s.visibility,i=void 0===e;t.visibility=!(!i&&"visible"!==e)}}},remove:function(t){t.dispose&&t.dispose(),this.world.remove(t),t=null},clear:async function(t=null,e=!1){return new Promise((i,s)=>{let n=[];this.world.children.forEach(function(t){n.push(t)});for(let e=0;e{t.promise.then(t=>{t.dispose(),t=null})}),i("clear")})},removeLayer:function(t){this.clear(t,!0).then(()=>{this.map.removeLayer(t)})},getSunPosition:function(t,e){return SunCalc.getPosition(t,e[1],e[0])},getSunTimes:function(t,e){return SunCalc.getTimes(t,e[1],e[0],e[2]?e[2]:0)},setBuildingShadows:function(t){if(this.map.getLayer(t.buildingsLayerId)){let e=new BuildingShadows(t,this);this.map.addLayer(e,t.buildingsLayerId)}else console.warn("The layer '"+t.buildingsLayerId+"' does not exist in the map.")},setSunlight:function(t=new Date,e){if(!this.lights.dirLight||!this.options.realSunlight)return void console.warn("To use setSunlight it's required to set realSunlight : true in Threebox initial options.");var i=new Date(t.getTime());if(e?e.lng&&e.lat?this.mapCenter=e:this.mapCenter={lng:e[0],lat:e[1]}:this.mapCenter=this.map.getCenter(),this.lightDateTime&&this.lightDateTime.getTime()===i.getTime()&&this.lightLng===this.mapCenter.lng&&this.lightLat===this.mapCenter.lat)return;this.lightDateTime=i,this.lightLng=this.mapCenter.lng,this.lightLat=this.mapCenter.lat,this.sunPosition=this.getSunPosition(i,[this.mapCenter.lng,this.mapCenter.lat]);let s=this.sunPosition.altitude,n=Math.PI+this.sunPosition.azimuth,r=ThreeboxConstants.WORLD_SIZE/2,o=Math.sin(s),a=Math.cos(s),l=Math.cos(n)*a,h=Math.sin(n)*a;this.lights.dirLight.position.set(h,l,o),this.lights.dirLight.position.multiplyScalar(r),this.lights.dirLight.intensity=Math.max(o,-.15),this.lights.dirLight.updateMatrixWorld(),this.updateLightHelper(),this.map.loaded()&&this.map.setLight({anchor:"map",position:[1.5,180+180*this.sunPosition.azimuth/Math.PI,90-180*this.sunPosition.altitude/Math.PI],"position-transition":{duration:0},color:`hsl(40, ${50*Math.cos(this.sunPosition.altitude)}%, ${96*Math.sin(this.sunPosition.altitude)}%)`},{duration:0})},updateLightHelper:function(){this.lights.dirLightHelper&&(this.lights.dirLightHelper.position.setFromMatrixPosition(this.lights.dirLight.matrixWorld),this.lights.dirLightHelper.updateMatrix(),this.lights.dirLightHelper.update())},dispose:async function(){return console.log(this.memory()),new Promise(t=>{t(this.clear(null,!0).then(t=>(this.map.remove(),this.map={},this.scene.remove(this.world),this.scene.dispose(),this.world.children=[],this.world=null,this.objectsCache.clear(),this.labelRenderer.dispose(),console.log(this.memory()),this.renderer.dispose(),t)))})},defaultLights:function(){this.lights.ambientLight=new THREE.AmbientLight(new THREE.Color("hsl(0, 0%, 100%)"),.75),this.scene.add(this.lights.ambientLight),this.lights.dirLightBack=new THREE.DirectionalLight(new THREE.Color("hsl(0, 0%, 100%)"),.25),this.lights.dirLightBack.position.set(30,100,100),this.scene.add(this.lights.dirLightBack),this.lights.dirLight=new THREE.DirectionalLight(new THREE.Color("hsl(0, 0%, 100%)"),.25),this.lights.dirLight.position.set(-30,100,-100),this.scene.add(this.lights.dirLight)},realSunlight:function(t=!1){this.renderer.shadowMap.enabled=!0,this.lights.dirLight=new THREE.DirectionalLight(16777215,1),this.scene.add(this.lights.dirLight),t&&(this.lights.dirLightHelper=new THREE.DirectionalLightHelper(this.lights.dirLight,5),this.scene.add(this.lights.dirLightHelper));this.lights.dirLight.castShadow=!0,this.lights.dirLight.shadow.radius=2,this.lights.dirLight.shadow.mapSize.width=8192,this.lights.dirLight.shadow.mapSize.height=8192,this.lights.dirLight.shadow.camera.top=this.lights.dirLight.shadow.camera.right=1e3,this.lights.dirLight.shadow.camera.bottom=this.lights.dirLight.shadow.camera.left=-1e3,this.lights.dirLight.shadow.camera.near=1,this.lights.dirLight.shadow.camera.visible=!0,this.lights.dirLight.shadow.camera.far=4e8,this.lights.hemiLight=new THREE.HemisphereLight(new THREE.Color(16777215),new THREE.Color(16777215),.6),this.lights.hemiLight.color.setHSL(.661,.96,.12),this.lights.hemiLight.groundColor.setHSL(.11,.96,.14),this.lights.hemiLight.position.set(0,0,50),this.scene.add(this.lights.hemiLight),this.setSunlight()},setDefaultView:function(t,e){t.bbox=t.bbox||e.enableSelectingObjects,t.tooltip=t.tooltip||e.enableTooltips},memory:function(){return this.renderer.info.memory},programs:function(){return this.renderer.info.programs.length},version:"2.1.1"};var defaultOptions={defaultLights:!1,realSunlight:!1,realSunlightHelper:!1,passiveRendering:!0,enableSelectingFeatures:!1,enableSelectingObjects:!1,enableDraggingObjects:!1,enableRotatingObjects:!1,enableTooltips:!1,multiLayer:!1};module.exports=exports=Threebox; },{"./animation/AnimationManager.js":3,"./camera/CameraSync.js":4,"./objects/LabelRenderer.js":6,"./objects/Object3D.js":7,"./objects/effects/BuildingShadows.js":9,"./objects/label.js":10,"./objects/line.js":11,"./objects/loadObj.js":12,"./objects/objects.js":18,"./objects/sphere.js":19,"./objects/tooltip.js":20,"./objects/tube.js":21,"./three.js":22,"./utils/constants.js":23,"./utils/material.js":24,"./utils/suncalc.js":25,"./utils/utils.js":26}],3:[function(require,module,exports){ const THREE=require("../three.js"),utils=require("../utils/utils.js");function AnimationManager(t){this.map=t,this.enrolledObjects=[],this.previousFrameTime}AnimationManager.prototype={unenroll:function(t){this.enrolledObjects.splice(this.enrolledObjects.indexOf(t),1)},enroll:function(t){if(t.clock=new THREE.Clock,t.hasDefaultAnimation=!1,t.defaultAction,t.actions=[],t.mixer,t.animations&&t.animations.length>0){t.hasDefaultAnimation=!0;let i=t.userData.defaultAnimation?t.userData.defaultAnimation:0;t.mixer=new THREE.AnimationMixer(t),e(i)}function e(e){for(let i=0;it.animations.length&&console.log("The animation index "+e+" doesn't exist for this object");let a=t.animations[i],n=t.mixer.clipAction(a);t.actions.push(n),e===i?(t.defaultAction=n,n.setEffectiveWeight(1)):n.setEffectiveWeight(0),n.play()}}let i=!1;Object.defineProperty(t,"isPlaying",{get:()=>i,set(e){i!=e&&(i=e,t.dispatchEvent(new CustomEvent("IsPlayingChanged",{detail:t,bubbles:!0,cancelable:!0})))}}),this.enrolledObjects.push(t),t.animationQueue=[],t.set=function(e){if(e.duration>0){let i={start:Date.now(),expiration:Date.now()+e.duration,endState:{}};utils.extend(e,i);let a=e.coords,n=e.rotation,o=e.scale||e.scaleX||e.scaleY||e.scaleZ;if(n){let i=t.rotation;e.startRotation=[i.x,i.y,i.z],e.endState.rotation=utils.types.rotation(e.rotation,e.startRotation),e.rotationPerMs=e.endState.rotation.map(function(t,i){return(t-e.startRotation[i])/e.duration})}if(o){let i=t.scale;e.startScale=[i.x,i.y,i.z],e.endState.scale=utils.types.scale(e.scale,e.startScale),e.scalePerMs=e.endState.scale.map(function(t,i){return(t-e.startScale[i])/e.duration})}a&&(e.pathCurve=new THREE.CatmullRomCurve3(utils.lnglatsToWorld([t.coordinates,e.coords])));let s={type:"set",parameters:e};this.animationQueue.push(s),tb.map.repaint=!0}else this.stop(),e.rotation=utils.radify(e.rotation),this._setObject(e);return this},t.animationMethod=null,t.stop=function(e){return t.mixer&&(t.isPlaying=!1,cancelAnimationFrame(t.animationMethod)),this.animationQueue=[],this},t.followPath=function(t,e){let i={type:"followPath",parameters:utils._validate(t,defaults.followPath)};return utils.extend(i.parameters,{pathCurve:new THREE.CatmullRomCurve3(utils.lnglatsToWorld(t.path)),start:Date.now(),expiration:Date.now()+i.parameters.duration,cb:e}),this.animationQueue.push(i),tb.map.repaint=!0,this},t._setObject=function(t){let e=t.position,i=t.rotation,a=t.scale,n=t.worldCoordinates,o=t.quaternion,s=t.translate;if(e){this.coordinates=e;let t=utils.projectToWorld(e);this.position.copy(t)}if(s){this.coordinates=[this.coordinates[0]+s[0],this.coordinates[1]+s[1],this.coordinates[2]+s[2]];let t=utils.projectToWorld(s);this.translateX(t.x),this.translateY(t.y),this.translateZ(t.z)}i&&this.rotation.set(i[0],i[1],i[2]),a&&this.scale.set(a[0],a[1],a[2]),o&&this.quaternion.setFromAxisAngle(o[0],o[1]),n&&this.position.copy(n),this.updateMatrixWorld(),tb.map.repaint=!0},t.playDefault=function(e){if(t.mixer&&t.hasDefaultAnimation){let i={start:Date.now(),expiration:Date.now()+e.duration,endState:{}};utils.extend(e,i),t.mixer.timeScale=e.speed||1;let a={type:"playDefault",parameters:e};return this.animationQueue.push(a),tb.map.repaint=!0,this}},t.playAnimation=function(i){t.mixer&&(i.animation&&e(i.animation),t.playDefault(i))},t.pauseAllActions=function(){t.mixer&&t.actions.forEach(function(t){t.paused=!0})},t.unPauseAllActions=function(){t.mixer&&t.actions.forEach(function(t){t.paused=!1})},t.deactivateAllActions=function(){t.mixer&&t.actions.forEach(function(t){t.stop()})},t.activateAllActions=function(){t.mixer&&t.actions.forEach(function(t){t.play()})},t.idle=function(){return t.mixer&&t.mixer.update(.01),tb.map.repaint=!0,this}},update:function(t){void 0===this.previousFrameTime&&(this.previousFrameTime=t);if(!this.enrolledObjects)return!1;for(let e=this.enrolledObjects.length-1;e>=0;e--){let i=this.enrolledObjects[e];if(i.animationQueue&&0!==i.animationQueue.length)for(let e=i.animationQueue.length-1;e>=0;e--){let a=i.animationQueue[e];if(!a)continue;let n=a.parameters;if(!n.expiration)return i.animationQueue.splice(e,1),void(i.animationQueue[e]&&(i.animationQueue[e].parameters.start=t));if(t>=n.expiration)n.expiration=!1,"playDefault"===a.type?i.stop():(n.endState&&i._setObject(n.endState),void 0!==n.cb&&n.cb());else{let e=(t-n.start)/n.duration;if("set"===a.type){let t={};n.pathCurve&&(t.worldCoordinates=n.pathCurve.getPoint(e)),n.rotationPerMs&&(t.rotation=n.startRotation.map(function(t,i){return t+n.rotationPerMs[i]*e*n.duration})),n.scalePerMs&&(t.scale=n.startScale.map(function(t,i){return t+n.scalePerMs[i]*e*n.duration})),i._setObject(t)}if("followPath"===a.type){let t=n.pathCurve.getPointAt(e);if(objectState={worldCoordinates:t},n.trackHeading){let t=n.pathCurve.getTangentAt(e).normalize(),i=new THREE.Vector3(0,0,0),a=new THREE.Vector3(0,1,0);i.crossVectors(a,t).normalize();let o=Math.acos(a.dot(t));objectState.quaternion=[i,o]}i._setObject(objectState)}"playDefault"===a.type&&(i.activateAllActions(),i.isPlaying=!0,i.animationMethod=requestAnimationFrame(this.update),i.mixer.update(i.clock.getDelta()),tb.map.repaint=!0)}}}this.previousFrameTime=t}};const defaults={followPath:{path:null,duration:1e3,trackHeading:!0}};module.exports=exports=AnimationManager; @@ -14,7 +14,7 @@ const THREE=require("../three.js"),utils=require("../utils/utils.js"),ThreeboxCo const THREE=require("../three.js");THREE.CSS2DObject=function(e){THREE.Object3D.call(this),this.element=e||document.createElement("div"),this.element.style.position="absolute",this.alwaysVisible=!1,Object.defineProperty(this,"layer",{get(){return this.parent&&this.parent.parent?this.parent.parent.layer:null}}),this.dispose=function(){this.remove(),this.element=null},this.remove=function(){this.element instanceof Element&&null!==this.element.parentNode&&this.element.parentNode.removeChild(this.element)},this.addEventListener("removed",function(){this.remove()})},THREE.CSS2DObject.prototype=Object.assign(Object.create(THREE.Object3D.prototype),{constructor:THREE.CSS2DObject,copy:function(e,t){return THREE.Object3D.prototype.copy.call(this,e,t),this.element=e.element.cloneNode(!0),this}}),THREE.CSS2DRenderer=function(){var e,t,r,n,i=this,o=new THREE.Vector3,s=new THREE.Matrix4,a=new THREE.Matrix4,l={objects:new WeakMap,list:new Map};this.cacheList=l.list;var c=document.createElement("div");c.style.overflow="hidden",this.domElement=c,this.getSize=function(){return{width:e,height:t}},this.setSize=function(i,o){r=(e=i)/2,n=(t=o)/2,c.style.width=i+"px",c.style.height=o+"px"},this.renderObject=function(e,t,s){if(e instanceof THREE.CSS2DObject)if(e.visible){e.onBeforeRender(i,t,s),o.setFromMatrixPosition(e.matrixWorld),o.applyMatrix4(a);var d=e.element,u="translate(-50%,-50%) translate("+(o.x*r+r)+"px,"+(-o.y*n+n)+"px)";d.style.WebkitTransform=u,d.style.MozTransform=u,d.style.oTransform=u,d.style.transform=u,d.style.display=e.visible&&o.z>=-1&&o.z<=1?"":"none";var m={distanceToCameraSquared:h(s,e)};l.objects.set({key:e.uuid},m),l.list.set(e.uuid,e),d.parentNode!==c&&c.appendChild(d),e.onAfterRender(i,t,s)}else l.objects.delete({key:e.uuid}),l.list.delete(e.uuid),e.remove();for(var p=0,E=e.children.length;p{i(this.renderer.render(e,t))})},this.toggleLabels=async function(e,t){return new Promise(i=>{i(this.setVisibility(e,t,this.scene,this.camera,this.renderer))})},this.setVisibility=function(e,t,i,r,s){this.renderer.cacheList.forEach(function(n){n.visible!=t&&n.layer===e&&(t&&n.alwaysVisible||!t)&&(n.visible=t,s.renderObject(n,i,r))})}}module.exports=exports=LabelRenderer; +const THREE=require("./CSS2DRenderer.js");function LabelRenderer(e){this.map=e,this.renderer=new THREE.CSS2DRenderer,this.renderer.setSize(this.map.getCanvas().clientWidth,this.map.getCanvas().clientHeight),this.renderer.domElement.style.position="absolute",this.renderer.domElement.id="labelCanvas",this.renderer.domElement.style.top=0,this.renderer.domElement.style.zIndex="0",this.map.getCanvasContainer().appendChild(this.renderer.domElement),this.scene,this.camera,this.dispose=function(){this.map.getCanvasContainer().removeChild(this.renderer.domElement),this.renderer.domElement.remove(),this.renderer={}},this.setSize=function(e,t){this.renderer.setSize(e,t)},this.map.on("resize",function(){this.renderer.setSize(this.map.getCanvas().clientWidth,this.map.getCanvas().clientHeight)}.bind(this)),this.state={reset:function(){}},this.render=async function(e,t){return this.scene=e,this.camera=t,new Promise(i=>{i(this.renderer.render(e,t))})},this.toggleLabels=async function(e,t){return new Promise(i=>{i(this.setVisibility(e,t,this.scene,this.camera,this.renderer))})},this.setVisibility=function(e,t,i,r,s){this.renderer.cacheList.forEach(function(n){n.visible!=t&&n.layer===e&&(t&&n.alwaysVisible||!t)&&(n.visible=t,s.renderObject(n,i,r))})}}module.exports=exports=LabelRenderer; },{"./CSS2DRenderer.js":5}],7:[function(require,module,exports){ const Objects=require("./objects.js"),utils=require("../utils/utils.js");function Object3D(e){let t=(e=utils._validate(e,Objects.prototype._defaults.Object3D)).obj;t.name="model";let o=Objects.prototype._makeGroup(t,e);return e.obj.name="model",Objects.prototype._addMethods(o),o.setAnchor(e.anchor),o.setCenter(e.adjustment),o.visibility=!0,o}module.exports=exports=Object3D; diff --git a/examples/17-azuremaps.html b/examples/17-azuremaps.html index a2d239d1..c8ae15df 100644 --- a/examples/17-azuremaps.html +++ b/examples/17-azuremaps.html @@ -17,6 +17,8 @@