qwc2 2025.10.9 → 2025.10.14

package/plugins/map3d/MapLight3D.js

@@ -1,11 +1,558 @@
-function _typeof(o){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}function ownKeys(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter(function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable})),t.push.apply(t,o)}return t}function _objectSpread(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?ownKeys(Object(t),!0).forEach(function(r){_defineProperty(e,r,t[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):ownKeys(Object(t)).forEach(function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})}return e}function _classCallCheck(a,n){if(!(a instanceof n))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,r){for(var t=0;t<r.length;t++){var o=r[t];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,_toPropertyKey(o.key),o)}}function _createClass(e,r,t){return r&&_defineProperties(e.prototype,r),t&&_defineProperties(e,t),Object.defineProperty(e,"prototype",{writable:!1}),e}function _callSuper(t,o,e){return o=_getPrototypeOf(o),_possibleConstructorReturn(t,_isNativeReflectConstruct()?Reflect.construct(o,e||[],_getPrototypeOf(t).constructor):o.apply(t,e))}function _possibleConstructorReturn(t,e){if(e&&("object"==_typeof(e)||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return _assertThisInitialized(t)}function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function _isNativeReflectConstruct(){try{var t=!Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}))}catch(t){}return(_isNativeReflectConstruct=function _isNativeReflectConstruct(){return!!t})()}function _getPrototypeOf(t){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},_getPrototypeOf(t)}function _inherits(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&_setPrototypeOf(t,e)}function _setPrototypeOf(t,e){return _setPrototypeOf=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},_setPrototypeOf(t,e)}function _defineProperty(e,r,t){return(r=_toPropertyKey(r))in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function _toPropertyKey(t){var i=_toPrimitive(t,"string");return"symbol"==_typeof(i)?i:i+""}function _toPrimitive(t,r){if("object"!=_typeof(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var i=e.call(t,r||"default");if("object"!=_typeof(i))return i;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===r?String:Number)(t)}/**
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
  * Copyright 2024 Sourcepole AG
  * All rights reserved.
  *
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree.
- */import React from"react";import Sun from"@giro3d/giro3d/core/geographic/Sun.js";import{MapLightingMode}from"@giro3d/giro3d/entities/MapLightingOptions";import PropTypes from"prop-types";import suncalc from"suncalc";import{AmbientLight,BasicShadowMap,CameraHelper,DirectionalLight,DirectionalLightHelper,PCFShadowMap,PCFSoftShadowMap,VSMShadowMap}from"three";import Icon from"../../components/Icon";import SideBar from"../../components/SideBar";import Input from"../../components/widgets/Input";import NumberInput from"../../components/widgets/NumberInput";import ToggleSwitch from"../../components/widgets/ToggleSwitch";import CoordinatesUtils from"../../utils/CoordinatesUtils";import LocaleUtils from"../../utils/LocaleUtils";import"./style/MapLight3D.css";var MapLight3D=/*#__PURE__*/function(_React$Component){function MapLight3D(props){var _this;_classCallCheck(this,MapLight3D);_this=_callSuper(this,MapLight3D,[props]);_defineProperty(_this,"state",{showAdvanced:false,lightParams:{day:182,time:720,helpersVisible:false,moonLightIntensity:0.02,sunLightIntensity:3.5,zFactor:1,lightElevationLayersOnly:false,shadowsEnabled:true,shadowType:PCFShadowMap,shadowMapSize:4096,shadowBias:-0.0001,sunDistance:80000,normalBias:0,shadowIntensity:1,shadowVolumeNear:60000,shadowVolumeFar:100000},dayAnimation:false,dayAnimationSettings:false,dayStep:30,timeAnimation:false,timeAnimationSettings:false,timeStep:30});_defineProperty(_this,"onHide",function(){clearInterval(_this.animationInterval);_this.setState({dayAnimation:false,timeAnimation:false})});_defineProperty(_this,"renderBody",function(){var lightParams=_this.state.lightParams;var dateValue=new Date(new Date().getFullYear(),0,1+lightParams.day).toISOString().split("T")[0];var dateToDay=function dateToDay(date){var d=new Date(date);return 1+(d-new Date(Date.UTC(d.getUTCFullYear(),0,1)))/(1000*60*60*24)};var isLeapYear=function isLeapYear(year){return new Date(year,1,29).getDate()===29};var timeValue="".concat(String(Math.trunc(lightParams.time/60)).padStart(2,"0"),":").concat(String(Math.floor(lightParams.time%60)).padStart(2,"0"));var timeToMin=function timeToMin(time){var parts=time.split(":");return parseInt(parts[0],10)*60+parseInt(parts[1],10)};return/*#__PURE__*/React.createElement("div",{className:"maplight3d-body"},/*#__PURE__*/React.createElement("table",null,/*#__PURE__*/React.createElement("tbody",null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.date")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("div",{className:"map3d-animation-slider"},/*#__PURE__*/React.createElement(Icon,{icon:_this.state.dayAnimation?"square":"triangle-right",onClick:_this.toggleDayAnimation}),/*#__PURE__*/React.createElement("div",{className:"maplight3d-slider"},/*#__PURE__*/React.createElement("input",{max:365+isLeapYear(),min:1,onChange:function onChange(ev){return _this.updateLightParams("day",parseInt(ev.target.value,10))},step:1,type:"range",value:lightParams.day}),/*#__PURE__*/React.createElement(Input,{allowEmpty:false,onChange:function onChange(value){return _this.updateLightParams("day",dateToDay(value))},type:"date",value:dateValue})),/*#__PURE__*/React.createElement(Icon,{className:_this.state.dayAnimationSettings?"map3d-animation-settings-active":"",icon:"cog",onClick:function onClick(){return _this.setState(function(state){return{dayAnimationSettings:!state.dayAnimationSettings}})}})))),_this.state.dayAnimationSettings?/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",{colSpan:"2"},/*#__PURE__*/React.createElement("div",{className:"maplight3d-animation-settings"},/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("maplight3d.animationstep"),":"),/*#__PURE__*/React.createElement(NumberInput,{max:60,min:1,onChange:function onChange(dayStep){return _this.setState({dayStep:dayStep})},suffix:" "+LocaleUtils.tr("maplight3d.dayspersec"),value:_this.state.dayStep})))):null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.time")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("div",{className:"map3d-animation-slider"},/*#__PURE__*/React.createElement(Icon,{icon:_this.state.timeAnimation?"square":"triangle-right",onClick:_this.toggleTimeAnimation}),/*#__PURE__*/React.createElement("div",{className:"maplight3d-slider"},/*#__PURE__*/React.createElement("input",{max:1439,min:0,onChange:function onChange(ev){return _this.updateLightParams("time",parseInt(ev.target.value,10))},step:1,type:"range",value:lightParams.time}),/*#__PURE__*/React.createElement(Input,{allowEmpty:false,onChange:function onChange(value){return _this.updateLightParams("time",timeToMin(value))},type:"time",value:timeValue})),/*#__PURE__*/React.createElement(Icon,{className:_this.state.timeAnimationSettings?"map3d-animation-settings-active":"",icon:"cog",onClick:function onClick(){return _this.setState(function(state){return{timeAnimationSettings:!state.timeAnimationSettings}})}})))),_this.state.timeAnimationSettings?/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",{colSpan:"2"},/*#__PURE__*/React.createElement("div",{className:"maplight3d-animation-settings"},/*#__PURE__*/React.createElement("span",null,LocaleUtils.tr("maplight3d.animationstep"),":"),/*#__PURE__*/React.createElement(NumberInput,{max:60,min:1,onChange:function onChange(timeStep){return _this.setState({timeStep:timeStep})},suffix:" "+LocaleUtils.tr("maplight3d.minspersec"),value:_this.state.timeStep})))):null,/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.sunLightIntensity")),/*#__PURE__*/React.createElement("td",null,_this.renderSlider("sunLightIntensity",0,10,0.1))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.moonLightIntensity")),/*#__PURE__*/React.createElement("td",null,_this.renderSlider("moonLightIntensity",0,0.5,0.01))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadows")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(ToggleSwitch,{active:lightParams.shadowsEnabled,onChange:function onChange(value){return _this.updateLightParams("shadowsEnabled",value)}}))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadowintensity")),/*#__PURE__*/React.createElement("td",null,_this.renderSlider("shadowIntensity",0,2,0.1))),/*#__PURE__*/React.createElement("tr",null,/*#__PURE__*/React.createElement("td",{className:"maplight3d-advanced",colSpan:"2"},/*#__PURE__*/React.createElement("label",null,/*#__PURE__*/React.createElement("input",{checked:_this.state.showAdvanced,onChange:function onChange(ev){return _this.setState(function(state){return{showAdvanced:!state.showAdvanced}})},type:"checkbox"})," ",LocaleUtils.tr("maplight3d.showadvanced")))),_this.state.showAdvanced?[/*#__PURE__*/React.createElement("tr",{key:"helpersVisible"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.helpersVisible")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(ToggleSwitch,{active:lightParams.helpersVisible,onChange:function onChange(value){return _this.updateLightParams("helpersVisible",value)}}))),/*#__PURE__*/React.createElement("tr",{key:"zFactor"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.zFactor")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("input",{max:10,min:0,onChange:function onChange(ev){return _this.updateLightParams("zFactor",ev.target.value)},step:0.1,type:"range",value:lightParams.zFactor}))),/*#__PURE__*/React.createElement("tr",{key:"shadowType"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadowType")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement("select",{onChange:function onChange(ev){return _this.updateLightParams("shadowType",parseInt(ev.target.value,10))},value:lightParams.shadowType},/*#__PURE__*/React.createElement("option",{value:BasicShadowMap},"BasicShadowMap"),/*#__PURE__*/React.createElement("option",{value:PCFShadowMap},"PCFShadowMap"),/*#__PURE__*/React.createElement("option",{value:PCFSoftShadowMap},"PCFSoftShadowMap"),/*#__PURE__*/React.createElement("option",{value:VSMShadowMap},"VSMShadowMap")))),/*#__PURE__*/React.createElement("tr",{key:"shadowMapSize"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadowMapSize")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:0,max:8192,min:64,onChange:function onChange(value){return _this.updateLightParams("shadowMapSize",value)},value:lightParams.shadowMapSize}))),/*#__PURE__*/React.createElement("tr",{key:"shadowBias"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadowBias")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:5,max:0.01,min:-0.01,onChange:function onChange(value){return _this.updateLightParams("shadowBias",value)},value:lightParams.shadowBias}))),/*#__PURE__*/React.createElement("tr",{key:"normalBias"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.normalBias")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:1,max:10,min:-10,onChange:function onChange(value){return _this.updateLightParams("normalBias",value)},value:lightParams.normalBias}))),/*#__PURE__*/React.createElement("tr",{key:"shadowVolumeNear"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadowVolumeNear")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:0,max:100000,min:100,onChange:function onChange(value){return _this.updateLightParams("shadowVolumeNear",value)},value:lightParams.shadowVolumeNear}))),/*#__PURE__*/React.createElement("tr",{key:"shadowVolumeFar"},/*#__PURE__*/React.createElement("td",null,LocaleUtils.tr("maplight3d.shadowVolumeFar")),/*#__PURE__*/React.createElement("td",null,/*#__PURE__*/React.createElement(NumberInput,{decimals:0,max:100000,min:100,onChange:function onChange(value){return _this.updateLightParams("shadowVolumeFar",value)},value:lightParams.shadowVolumeFar})))]:null)))});_defineProperty(_this,"toggleDayAnimation",function(){_this.setState(function(state){return{dayAnimation:!state.dayAnimation,timeAnimation:false}},function(){clearInterval(_this.animationInterval);if(_this.state.dayAnimation){_this.animationInterval=setInterval(function(){_this.updateLightParams("day",(_this.state.lightParams.day+_this.state.dayStep/10)%365)},100)}})});_defineProperty(_this,"toggleTimeAnimation",function(){_this.setState(function(state){return{timeAnimation:!state.timeAnimation,dayAnimation:false}},function(){clearInterval(_this.animationInterval);if(_this.state.timeAnimation){_this.animationInterval=setInterval(function(){_this.updateLightParams("time",(_this.state.lightParams.time+_this.state.timeStep/10)%1440)},100)}})});_defineProperty(_this,"renderSlider",function(key,min,max,step){var labelFormatter=arguments.length>4&&arguments[4]!==undefined?arguments[4]:undefined;var value=_this.state.lightParams[key];var parseValue=function parseValue(x){return Number.isInteger(step)?parseInt(x,10):parseFloat(x)};labelFormatter=labelFormatter!==null&&labelFormatter!==void 0?labelFormatter:function(x){return x.toFixed(-Math.log10(step))};return/*#__PURE__*/React.createElement("div",{className:"maplight3d-slider"},/*#__PURE__*/React.createElement("input",{max:max,min:min,onChange:function onChange(ev){return _this.updateLightParams(key,parseValue(ev.target.value))},step:step,type:"range",value:value}),/*#__PURE__*/React.createElement("div",{className:"maplight3d-slider-label"},/*#__PURE__*/React.createElement("span",{style:{left:(value-min)*100/(max-min)+"%"}},labelFormatter(value))))});_defineProperty(_this,"updateLightParams",function(key,value){_this.setState(function(state){return{lightParams:_objectSpread(_objectSpread({},state.lightParams),{},_defineProperty({},key,value))}})});_defineProperty(_this,"configureShadows",function(sunLight,lightParams,shadowIntensityK){if(!lightParams.shadowsEnabled){_this.props.sceneContext.scene.renderer.shadowMap.enabled=false;sunLight.castShadow=false;return}var cameraHeight=_this.props.sceneContext.scene.view.camera.position.z;var targetHeight=_this.props.sceneContext.scene.view.controls.target.z;var volumeSize=Math.min(20000,Math.max(1000,cameraHeight-targetHeight));sunLight.shadow.camera.top=volumeSize;sunLight.shadow.camera.bottom=-volumeSize;sunLight.shadow.camera.left=-volumeSize;sunLight.shadow.camera.right=volumeSize;sunLight.shadow.camera.near=lightParams.shadowVolumeNear;sunLight.shadow.camera.far=lightParams.shadowVolumeFar;sunLight.shadow.camera.updateProjectionMatrix();sunLight.shadow.mapSize.set(lightParams.shadowMapSize,lightParams.shadowMapSize);sunLight.shadow.bias=lightParams.shadowBias;sunLight.shadow.normalBias=lightParams.normalBias;sunLight.shadow.intensity=lightParams.shadowIntensity*shadowIntensityK;_this.props.sceneContext.scene.renderer.shadowMap.enabled=true;sunLight.castShadow=true});_defineProperty(_this,"setLighting",function(){var sceneContext=_this.props.sceneContext;var lightParams=_this.state.lightParams;var ambientLight=sceneContext.getSceneObject("__ambientLight");var sunLight=sceneContext.getSceneObject("__sunLight");var moonLight=sceneContext.getSceneObject("__moonLight");var lightTarget=sceneContext.scene.view.controls.target.clone();lightTarget.z=0;// Compute azimuth / zenith and sun position
-var date=new Date(new Date().getFullYear(),0,lightParams.day,Math.trunc(lightParams.time/60),lightParams.time%60);var latlon=CoordinatesUtils.reproject([lightTarget.x,lightTarget.y],sceneContext.mapCrs,"EPSG:4326");var sunPos=suncalc.getPosition(date,latlon[1],latlon[0]);var zenith=90-sunPos.altitude/Math.PI*180;var azimuth=180+sunPos.azimuth/Math.PI*180;var sunLocalPos=Sun.getLocalPosition({point:lightTarget,zenith:Math.min(90,zenith),azimuth:azimuth,distance:lightParams.sunDistance});// Compute dynamic params
-var noonColor={r:1,g:0.98,b:0.98};var horizonColor={r:1,g:0.5,b:0.3};var duskColor={r:0.15,g:0.22,b:0.35};var lerpColor=function lerpColor(a,b,t){return{r:(1-t)*a.r+t*b.r,g:(1-t)*a.g+t*b.g,b:(1-t)*a.b+t*b.b}};var sunColor=noonColor;var ambientIntensity=0;var shadowIntensityK=0;var sunLightIntensityK=Math.min(1,(98-Math.min(98,zenith))/16);var moonLightIntensityK=1-Math.min(1,(90-Math.min(90,zenith))/16);if(zenith<90){var k=Math.pow(zenith/90,3);sunColor=lerpColor(noonColor,horizonColor,k);ambientIntensity=(1-zenith/90)*1.5;shadowIntensityK=(1-k)*0.9+0.2*k}else if(zenith<102){var _k=(zenith-90)/12;sunColor=lerpColor(horizonColor,duskColor,_k);shadowIntensityK=0.2*(1-_k)}// Set lighting params
-sceneContext.map.lighting.enabled=true;sceneContext.map.lighting.mode=lightParams.shadowsEnabled?MapLightingMode.LightBased:MapLightingMode.Hillshade;sceneContext.map.lighting.elevationLayersOnly=lightParams.lightElevationLayersOnly;sceneContext.map.lighting.hillshadeAzimuth=azimuth;sceneContext.map.lighting.hillshadeZenith=Math.min(90,zenith);sceneContext.map.lighting.zFactor=lightParams.zFactor;sceneContext.scene.notifyChange(sceneContext.map);sceneContext.scene.renderer.shadowMap.type=lightParams.shadowType;ambientLight.intensity=ambientIntensity;sunLight.position.copy(sunLocalPos);sunLight.intensity=lightParams.sunLightIntensity*sunLightIntensityK;sunLight.color=sunColor;sunLight.target.position.copy(lightTarget);sunLight.updateMatrixWorld(true);sunLight.target.updateMatrixWorld(true);_this.configureShadows(sunLight,lightParams,shadowIntensityK);// NOTE: just a top-down light
-moonLight.position.set(lightTarget.x,lightTarget.y,8000);moonLight.intensity=lightParams.moonLightIntensity*moonLightIntensityK;moonLight.target.position.copy(lightTarget);moonLight.updateMatrixWorld(true);moonLight.target.updateMatrixWorld(true);if(lightParams.helpersVisible){var sunLightHelper=sceneContext.getSceneObject("__sunLightHelper");sunLightHelper.update();sunLightHelper.updateMatrixWorld(true);var shadowCameraHelper=sceneContext.getSceneObject("__shadowCameraHelper");shadowCameraHelper.update();shadowCameraHelper.updateMatrixWorld(true)}sceneContext.scene.notifyChange()});_this.state.lightParams.day=props.defaultDay;var _parts=props.defaultTime.split(":").slice(0,2).map(Number);_this.state.lightParams.time=_parts[0]*60+_parts[1];return _this}_inherits(MapLight3D,_React$Component);return _createClass(MapLight3D,[{key:"componentDidMount",value:function componentDidMount(){this.animationInterval=null;this.componentDidUpdate({})}},{key:"componentDidUpdate",value:function componentDidUpdate(prevProps,prevState){var _prevProps$sceneConte;if(this.props.sceneContext.scene!==((_prevProps$sceneConte=prevProps.sceneContext)===null||_prevProps$sceneConte===void 0?void 0:_prevProps$sceneConte.scene)){var ambientLight=new AmbientLight(16777215,1);this.props.sceneContext.addSceneObject("__ambientLight",ambientLight);var sunLight=new DirectionalLight(16777215,this.state.sunLightIntensity);this.props.sceneContext.addSceneObject("__sunLight",sunLight);var moonLight=new DirectionalLight(16777215,this.state.moonLightIntensity);this.props.sceneContext.addSceneObject("__moonLight",moonLight);if(this.state.lightParams.helpersVisible){var sunLightHelper=new DirectionalLightHelper(sunLight,200,"white");this.props.sceneContext.addSceneObject("__sunLightHelper",sunLightHelper);var shadowCameraHelper=new CameraHelper(sunLight.shadow.camera);this.props.sceneContext.addSceneObject("__shadowCameraHelper",shadowCameraHelper)}this.props.sceneContext.scene.view.controls.addEventListener("change",this.setLighting);this.setLighting()}else if(this.state.lightParams!==prevState.lightParams){if(this.state.lightParams.helpersVisible&&!prevState.lightParams.helpersVisible){var _sunLight=this.props.sceneContext.getSceneObject("__sunLight");var _sunLightHelper=new DirectionalLightHelper(_sunLight,200,"white");this.props.sceneContext.addSceneObject("__sunLightHelper",_sunLightHelper);var _shadowCameraHelper=new CameraHelper(_sunLight.shadow.camera);this.props.sceneContext.addSceneObject("__shadowCameraHelper",_shadowCameraHelper)}else if(prevState.lightParams.helpersVisible&&!this.state.lightParams.helpersVisible){this.props.sceneContext.removeSceneObject("__sunLightHelper");this.props.sceneContext.removeSceneObject("__shadowCameraHelper")}this.setLighting()}}},{key:"componentWillUnmount",value:function componentWillUnmount(){clearInterval(this.lightPositionInterval);this.props.sceneContext.removeSceneObject("__sunLight");this.props.sceneContext.removeSceneObject("__moonLight");this.props.sceneContext.removeSceneObject("__sunLightHelper");this.props.sceneContext.removeSceneObject("__shadowCameraHelper")}},{key:"render",value:function render(){var _this2=this;return/*#__PURE__*/React.createElement(SideBar,{icon:"light",id:"MapLight3D",onHide:this.onHide,title:LocaleUtils.tr("appmenu.items.MapLight3D"),width:"25em"},function(){return{body:_this2.renderBody()}})}}])}(React.Component);_defineProperty(MapLight3D,"propTypes",{/** Default viewer day (1-365) */defaultDay:PropTypes.number,/** Default viewer time (00:00-23:59) */defaultTime:PropTypes.string,sceneContext:PropTypes.object});_defineProperty(MapLight3D,"defaultProps",{defaultDay:182,defaultTime:"12:00"});export{MapLight3D as default};
+ */
+
+import React from 'react';
+import Sun from '@giro3d/giro3d/core/geographic/Sun.js';
+import { MapLightingMode } from '@giro3d/giro3d/entities/MapLightingOptions';
+import PropTypes from 'prop-types';
+import suncalc from 'suncalc';
+import { AmbientLight, BasicShadowMap, CameraHelper, DirectionalLight, DirectionalLightHelper, PCFShadowMap, PCFSoftShadowMap, VSMShadowMap } from 'three';
+import Icon from '../../components/Icon';
+import SideBar from '../../components/SideBar';
+import Input from '../../components/widgets/Input';
+import NumberInput from '../../components/widgets/NumberInput';
+import ToggleSwitch from '../../components/widgets/ToggleSwitch';
+import CoordinatesUtils from '../../utils/CoordinatesUtils';
+import LocaleUtils from '../../utils/LocaleUtils';
+import './style/MapLight3D.css';
+var MapLight3D = /*#__PURE__*/function (_React$Component) {
+  function MapLight3D(props) {
+    var _this;
+    _classCallCheck(this, MapLight3D);
+    _this = _callSuper(this, MapLight3D, [props]);
+    _defineProperty(_this, "state", {
+      showAdvanced: false,
+      lightParams: {
+        day: 182,
+        time: 720,
+        helpersVisible: false,
+        moonLightIntensity: 0.02,
+        sunLightIntensity: 3.5,
+        zFactor: 1,
+        lightElevationLayersOnly: false,
+        shadowsEnabled: true,
+        shadowType: PCFShadowMap,
+        shadowMapSize: 4096,
+        shadowBias: -0.0001,
+        sunDistance: 80000,
+        normalBias: 0,
+        shadowIntensity: 1.0,
+        shadowVolumeNear: 60000,
+        shadowVolumeFar: 100000
+      },
+      dayAnimation: false,
+      dayAnimationSettings: false,
+      dayStep: 30,
+      timeAnimation: false,
+      timeAnimationSettings: false,
+      timeStep: 30
+    });
+    _defineProperty(_this, "onHide", function () {
+      clearInterval(_this.animationInterval);
+      _this.setState({
+        dayAnimation: false,
+        timeAnimation: false
+      });
+    });
+    _defineProperty(_this, "renderBody", function () {
+      var lightParams = _this.state.lightParams;
+      var dateValue = new Date(new Date().getFullYear(), 0, 1 + lightParams.day).toISOString().split("T")[0];
+      var dateToDay = function dateToDay(date) {
+        var d = new Date(date);
+        return 1 + (d - new Date(Date.UTC(d.getUTCFullYear(), 0, 1))) / (1000 * 60 * 60 * 24);
+      };
+      var isLeapYear = function isLeapYear(year) {
+        return new Date(year, 1, 29).getDate() === 29;
+      };
+      var timeValue = "".concat(String(Math.trunc(lightParams.time / 60)).padStart(2, '0'), ":").concat(String(Math.floor(lightParams.time % 60)).padStart(2, '0'));
+      var timeToMin = function timeToMin(time) {
+        var parts = time.split(":");
+        return parseInt(parts[0], 10) * 60 + parseInt(parts[1], 10);
+      };
+      return /*#__PURE__*/React.createElement("div", {
+        className: "maplight3d-body"
+      }, /*#__PURE__*/React.createElement("table", null, /*#__PURE__*/React.createElement("tbody", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("maplight3d.date")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
+        className: "map3d-animation-slider"
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: _this.state.dayAnimation ? "square" : "triangle-right",
+        onClick: _this.toggleDayAnimation
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "maplight3d-slider"
+      }, /*#__PURE__*/React.createElement("input", {
+        max: 365 + isLeapYear(),
+        min: 1,
+        onChange: function onChange(ev) {
+          return _this.updateLightParams("day", parseInt(ev.target.value, 10));
+        },
+        step: 1,
+        type: "range",
+        value: lightParams.day
+      }), /*#__PURE__*/React.createElement(Input, {
+        allowEmpty: false,
+        onChange: function onChange(value) {
+          return _this.updateLightParams("day", dateToDay(value));
+        },
+        type: "date",
+        value: dateValue
+      })), /*#__PURE__*/React.createElement(Icon, {
+        className: _this.state.dayAnimationSettings ? "map3d-animation-settings-active" : "",
+        icon: "cog",
+        onClick: function onClick() {
+          return _this.setState(function (state) {
+            return {
+              dayAnimationSettings: !state.dayAnimationSettings
+            };
+          });
+        }
+      })))), _this.state.dayAnimationSettings ? /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+        colSpan: "2"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "maplight3d-animation-settings"
+      }, /*#__PURE__*/React.createElement("span", null, LocaleUtils.tr("maplight3d.animationstep"), ":"), /*#__PURE__*/React.createElement(NumberInput, {
+        max: 60,
+        min: 1,
+        onChange: function onChange(dayStep) {
+          return _this.setState({
+            dayStep: dayStep
+          });
+        },
+        suffix: " " + LocaleUtils.tr("maplight3d.dayspersec"),
+        value: _this.state.dayStep
+      })))) : null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("maplight3d.time")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("div", {
+        className: "map3d-animation-slider"
+      }, /*#__PURE__*/React.createElement(Icon, {
+        icon: _this.state.timeAnimation ? "square" : "triangle-right",
+        onClick: _this.toggleTimeAnimation
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "maplight3d-slider"
+      }, /*#__PURE__*/React.createElement("input", {
+        max: 1439,
+        min: 0,
+        onChange: function onChange(ev) {
+          return _this.updateLightParams("time", parseInt(ev.target.value, 10));
+        },
+        step: 1,
+        type: "range",
+        value: lightParams.time
+      }), /*#__PURE__*/React.createElement(Input, {
+        allowEmpty: false,
+        onChange: function onChange(value) {
+          return _this.updateLightParams("time", timeToMin(value));
+        },
+        type: "time",
+        value: timeValue
+      })), /*#__PURE__*/React.createElement(Icon, {
+        className: _this.state.timeAnimationSettings ? "map3d-animation-settings-active" : "",
+        icon: "cog",
+        onClick: function onClick() {
+          return _this.setState(function (state) {
+            return {
+              timeAnimationSettings: !state.timeAnimationSettings
+            };
+          });
+        }
+      })))), _this.state.timeAnimationSettings ? /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+        colSpan: "2"
+      }, /*#__PURE__*/React.createElement("div", {
+        className: "maplight3d-animation-settings"
+      }, /*#__PURE__*/React.createElement("span", null, LocaleUtils.tr("maplight3d.animationstep"), ":"), /*#__PURE__*/React.createElement(NumberInput, {
+        max: 60,
+        min: 1,
+        onChange: function onChange(timeStep) {
+          return _this.setState({
+            timeStep: timeStep
+          });
+        },
+        suffix: " " + LocaleUtils.tr("maplight3d.minspersec"),
+        value: _this.state.timeStep
+      })))) : null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("maplight3d.sunLightIntensity")), /*#__PURE__*/React.createElement("td", null, _this.renderSlider('sunLightIntensity', 0, 10, 0.1))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("maplight3d.moonLightIntensity")), /*#__PURE__*/React.createElement("td", null, _this.renderSlider('moonLightIntensity', 0, 0.5, 0.01))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("maplight3d.shadows")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(ToggleSwitch, {
+        active: lightParams.shadowsEnabled,
+        onChange: function onChange(value) {
+          return _this.updateLightParams('shadowsEnabled', value);
+        }
+      }))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("maplight3d.shadowintensity")), /*#__PURE__*/React.createElement("td", null, _this.renderSlider('shadowIntensity', 0, 2, 0.1))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
+        className: "maplight3d-advanced",
+        colSpan: "2"
+      }, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
+        checked: _this.state.showAdvanced,
+        onChange: function onChange(ev) {
+          return _this.setState(function (state) {
+            return {
+              showAdvanced: !state.showAdvanced
+            };
+          });
+        },
+        type: "checkbox"
+      }), " ", LocaleUtils.tr("maplight3d.showadvanced")))), _this.state.showAdvanced ? [/*#__PURE__*/React.createElement("tr", {
+        key: "helpersVisible"
+      }, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("maplight3d.helpersVisible")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(ToggleSwitch, {
+        active: lightParams.helpersVisible,
+        onChange: function onChange(value) {
+          return _this.updateLightParams('helpersVisible', value);
+        }
+      }))), /*#__PURE__*/React.createElement("tr", {
+        key: "zFactor"
+      }, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("maplight3d.zFactor")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("input", {
+        max: 10,
+        min: 0,
+        onChange: function onChange(ev) {
+          return _this.updateLightParams('zFactor', ev.target.value);
+        },
+        step: 0.1,
+        type: "range",
+        value: lightParams.zFactor
+      }))), /*#__PURE__*/React.createElement("tr", {
+        key: "shadowType"
+      }, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("maplight3d.shadowType")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("select", {
+        onChange: function onChange(ev) {
+          return _this.updateLightParams('shadowType', parseInt(ev.target.value, 10));
+        },
+        value: lightParams.shadowType
+      }, /*#__PURE__*/React.createElement("option", {
+        value: BasicShadowMap
+      }, "BasicShadowMap"), /*#__PURE__*/React.createElement("option", {
+        value: PCFShadowMap
+      }, "PCFShadowMap"), /*#__PURE__*/React.createElement("option", {
+        value: PCFSoftShadowMap
+      }, "PCFSoftShadowMap"), /*#__PURE__*/React.createElement("option", {
+        value: VSMShadowMap
+      }, "VSMShadowMap")))), /*#__PURE__*/React.createElement("tr", {
+        key: "shadowMapSize"
+      }, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("maplight3d.shadowMapSize")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(NumberInput, {
+        decimals: 0,
+        max: 8192,
+        min: 64,
+        onChange: function onChange(value) {
+          return _this.updateLightParams('shadowMapSize', value);
+        },
+        value: lightParams.shadowMapSize
+      }))), /*#__PURE__*/React.createElement("tr", {
+        key: "shadowBias"
+      }, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("maplight3d.shadowBias")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(NumberInput, {
+        decimals: 5,
+        max: 0.01,
+        min: -0.01,
+        onChange: function onChange(value) {
+          return _this.updateLightParams('shadowBias', value);
+        },
+        value: lightParams.shadowBias
+      }))), /*#__PURE__*/React.createElement("tr", {
+        key: "normalBias"
+      }, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("maplight3d.normalBias")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(NumberInput, {
+        decimals: 1,
+        max: 10,
+        min: -10,
+        onChange: function onChange(value) {
+          return _this.updateLightParams('normalBias', value);
+        },
+        value: lightParams.normalBias
+      }))), /*#__PURE__*/React.createElement("tr", {
+        key: "shadowVolumeNear"
+      }, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("maplight3d.shadowVolumeNear")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(NumberInput, {
+        decimals: 0,
+        max: 100000,
+        min: 100,
+        onChange: function onChange(value) {
+          return _this.updateLightParams('shadowVolumeNear', value);
+        },
+        value: lightParams.shadowVolumeNear
+      }))), /*#__PURE__*/React.createElement("tr", {
+        key: "shadowVolumeFar"
+      }, /*#__PURE__*/React.createElement("td", null, LocaleUtils.tr("maplight3d.shadowVolumeFar")), /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement(NumberInput, {
+        decimals: 0,
+        max: 100000,
+        min: 100,
+        onChange: function onChange(value) {
+          return _this.updateLightParams('shadowVolumeFar', value);
+        },
+        value: lightParams.shadowVolumeFar
+      })))] : null)));
+    });
+    _defineProperty(_this, "toggleDayAnimation", function () {
+      _this.setState(function (state) {
+        return {
+          dayAnimation: !state.dayAnimation,
+          timeAnimation: false
+        };
+      }, function () {
+        clearInterval(_this.animationInterval);
+        if (_this.state.dayAnimation) {
+          _this.animationInterval = setInterval(function () {
+            _this.updateLightParams('day', (_this.state.lightParams.day + _this.state.dayStep / 10) % 365);
+          }, 100);
+        }
+      });
+    });
+    _defineProperty(_this, "toggleTimeAnimation", function () {
+      _this.setState(function (state) {
+        return {
+          timeAnimation: !state.timeAnimation,
+          dayAnimation: false
+        };
+      }, function () {
+        clearInterval(_this.animationInterval);
+        if (_this.state.timeAnimation) {
+          _this.animationInterval = setInterval(function () {
+            _this.updateLightParams('time', (_this.state.lightParams.time + _this.state.timeStep / 10) % 1440);
+          }, 100);
+        }
+      });
+    });
+    _defineProperty(_this, "renderSlider", function (key, min, max, step) {
+      var labelFormatter = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : undefined;
+      var value = _this.state.lightParams[key];
+      var parseValue = function parseValue(x) {
+        return Number.isInteger(step) ? parseInt(x, 10) : parseFloat(x);
+      };
+      labelFormatter = labelFormatter !== null && labelFormatter !== void 0 ? labelFormatter : function (x) {
+        return x.toFixed(-Math.log10(step));
+      };
+      return /*#__PURE__*/React.createElement("div", {
+        className: "maplight3d-slider"
+      }, /*#__PURE__*/React.createElement("input", {
+        max: max,
+        min: min,
+        onChange: function onChange(ev) {
+          return _this.updateLightParams(key, parseValue(ev.target.value));
+        },
+        step: step,
+        type: "range",
+        value: value
+      }), /*#__PURE__*/React.createElement("div", {
+        className: "maplight3d-slider-label"
+      }, /*#__PURE__*/React.createElement("span", {
+        style: {
+          left: (value - min) * 100 / (max - min) + "%"
+        }
+      }, labelFormatter(value))));
+    });
+    _defineProperty(_this, "updateLightParams", function (key, value) {
+      _this.setState(function (state) {
+        return {
+          lightParams: _objectSpread(_objectSpread({}, state.lightParams), {}, _defineProperty({}, key, value))
+        };
+      });
+    });
+    _defineProperty(_this, "configureShadows", function (sunLight, lightParams, shadowIntensityK) {
+      if (!lightParams.shadowsEnabled) {
+        _this.props.sceneContext.scene.renderer.shadowMap.enabled = false;
+        sunLight.castShadow = false;
+        return;
+      }
+      var cameraHeight = _this.props.sceneContext.scene.view.camera.position.z;
+      var targetHeight = _this.props.sceneContext.scene.view.controls.target.z;
+      var volumeSize = Math.min(20000, Math.max(1000, cameraHeight - targetHeight));
+      sunLight.shadow.camera.top = volumeSize;
+      sunLight.shadow.camera.bottom = -volumeSize;
+      sunLight.shadow.camera.left = -volumeSize;
+      sunLight.shadow.camera.right = volumeSize;
+      sunLight.shadow.camera.near = lightParams.shadowVolumeNear;
+      sunLight.shadow.camera.far = lightParams.shadowVolumeFar;
+      sunLight.shadow.camera.updateProjectionMatrix();
+      sunLight.shadow.mapSize.set(lightParams.shadowMapSize, lightParams.shadowMapSize);
+      sunLight.shadow.bias = lightParams.shadowBias;
+      sunLight.shadow.normalBias = lightParams.normalBias;
+      sunLight.shadow.intensity = lightParams.shadowIntensity * shadowIntensityK;
+      _this.props.sceneContext.scene.renderer.shadowMap.enabled = true;
+      sunLight.castShadow = true;
+    });
+    _defineProperty(_this, "setLighting", function () {
+      var sceneContext = _this.props.sceneContext;
+      var lightParams = _this.state.lightParams;
+      var ambientLight = sceneContext.getSceneObject("__ambientLight");
+      var sunLight = sceneContext.getSceneObject("__sunLight");
+      var moonLight = sceneContext.getSceneObject("__moonLight");
+      var lightTarget = sceneContext.scene.view.controls.target.clone();
+      lightTarget.z = 0;
+
+      // Compute azimuth / zenith and sun position
+      var date = new Date(new Date().getFullYear(), 0, lightParams.day, Math.trunc(lightParams.time / 60), lightParams.time % 60);
+      var latlon = CoordinatesUtils.reproject([lightTarget.x, lightTarget.y], sceneContext.mapCrs, 'EPSG:4326');
+      var sunPos = suncalc.getPosition(date, latlon[1], latlon[0]);
+      var zenith = 90 - sunPos.altitude / Math.PI * 180;
+      var azimuth = 180 + sunPos.azimuth / Math.PI * 180;
+      var sunLocalPos = Sun.getLocalPosition({
+        point: lightTarget,
+        zenith: Math.min(90, zenith),
+        azimuth: azimuth,
+        distance: lightParams.sunDistance
+      });
+
+      // Compute dynamic params
+      var noonColor = {
+        r: 1.0,
+        g: 0.98,
+        b: 0.98
+      };
+      var horizonColor = {
+        r: 1.0,
+        g: 0.5,
+        b: 0.3
+      };
+      var duskColor = {
+        r: 0.15,
+        g: 0.22,
+        b: 0.35
+      };
+      var lerpColor = function lerpColor(a, b, t) {
+        return {
+          r: (1 - t) * a.r + t * b.r,
+          g: (1 - t) * a.g + t * b.g,
+          b: (1 - t) * a.b + t * b.b
+        };
+      };
+      var sunColor = noonColor;
+      var ambientIntensity = 0;
+      var shadowIntensityK = 0;
+      var sunLightIntensityK = Math.min(1, (98 - Math.min(98, zenith)) / 16);
+      var moonLightIntensityK = 1 - Math.min(1, (90 - Math.min(90, zenith)) / 16);
+      if (zenith < 90) {
+        var k = Math.pow(zenith / 90, 3);
+        sunColor = lerpColor(noonColor, horizonColor, k);
+        ambientIntensity = (1 - zenith / 90) * 1.5;
+        shadowIntensityK = (1 - k) * 0.9 + 0.2 * k;
+      } else if (zenith < 102) {
+        var _k = (zenith - 90) / 12;
+        sunColor = lerpColor(horizonColor, duskColor, _k);
+        shadowIntensityK = 0.2 * (1 - _k);
+      }
+
+      // Set lighting params
+      sceneContext.map.lighting.enabled = true;
+      sceneContext.map.lighting.mode = lightParams.shadowsEnabled ? MapLightingMode.LightBased : MapLightingMode.Hillshade;
+      sceneContext.map.lighting.elevationLayersOnly = lightParams.lightElevationLayersOnly;
+      sceneContext.map.lighting.hillshadeAzimuth = azimuth;
+      sceneContext.map.lighting.hillshadeZenith = Math.min(90, zenith);
+      sceneContext.map.lighting.zFactor = lightParams.zFactor;
+      sceneContext.scene.notifyChange(sceneContext.map);
+      sceneContext.scene.renderer.shadowMap.type = lightParams.shadowType;
+      ambientLight.intensity = ambientIntensity;
+      sunLight.position.copy(sunLocalPos);
+      sunLight.intensity = lightParams.sunLightIntensity * sunLightIntensityK;
+      sunLight.color = sunColor;
+      sunLight.target.position.copy(lightTarget);
+      sunLight.updateMatrixWorld(true);
+      sunLight.target.updateMatrixWorld(true);
+      _this.configureShadows(sunLight, lightParams, shadowIntensityK);
+
+      // NOTE: just a top-down light
+      moonLight.position.set(lightTarget.x, lightTarget.y, 8000);
+      moonLight.intensity = lightParams.moonLightIntensity * moonLightIntensityK;
+      moonLight.target.position.copy(lightTarget);
+      moonLight.updateMatrixWorld(true);
+      moonLight.target.updateMatrixWorld(true);
+      if (lightParams.helpersVisible) {
+        var sunLightHelper = sceneContext.getSceneObject("__sunLightHelper");
+        sunLightHelper.update();
+        sunLightHelper.updateMatrixWorld(true);
+        var shadowCameraHelper = sceneContext.getSceneObject("__shadowCameraHelper");
+        shadowCameraHelper.update();
+        shadowCameraHelper.updateMatrixWorld(true);
+      }
+      sceneContext.scene.notifyChange();
+    });
+    _this.state.lightParams.day = props.defaultDay;
+    var _parts = props.defaultTime.split(":").slice(0, 2).map(Number);
+    _this.state.lightParams.time = _parts[0] * 60 + _parts[1];
+    return _this;
+  }
+  _inherits(MapLight3D, _React$Component);
+  return _createClass(MapLight3D, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.animationInterval = null;
+      this.componentDidUpdate({});
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var _prevProps$sceneConte;
+      if (this.props.sceneContext.scene !== ((_prevProps$sceneConte = prevProps.sceneContext) === null || _prevProps$sceneConte === void 0 ? void 0 : _prevProps$sceneConte.scene)) {
+        var ambientLight = new AmbientLight(0xffffff, 1);
+        this.props.sceneContext.addSceneObject("__ambientLight", ambientLight);
+        var sunLight = new DirectionalLight(0xffffff, this.state.sunLightIntensity);
+        this.props.sceneContext.addSceneObject("__sunLight", sunLight);
+        var moonLight = new DirectionalLight(0xffffff, this.state.moonLightIntensity);
+        this.props.sceneContext.addSceneObject("__moonLight", moonLight);
+        if (this.state.lightParams.helpersVisible) {
+          var sunLightHelper = new DirectionalLightHelper(sunLight, 200, 'white');
+          this.props.sceneContext.addSceneObject("__sunLightHelper", sunLightHelper);
+          var shadowCameraHelper = new CameraHelper(sunLight.shadow.camera);
+          this.props.sceneContext.addSceneObject("__shadowCameraHelper", shadowCameraHelper);
+        }
+        this.props.sceneContext.scene.view.controls.addEventListener('change', this.setLighting);
+        this.setLighting();
+      } else if (this.state.lightParams !== prevState.lightParams) {
+        if (this.state.lightParams.helpersVisible && !prevState.lightParams.helpersVisible) {
+          var _sunLight = this.props.sceneContext.getSceneObject("__sunLight");
+          var _sunLightHelper = new DirectionalLightHelper(_sunLight, 200, 'white');
+          this.props.sceneContext.addSceneObject("__sunLightHelper", _sunLightHelper);
+          var _shadowCameraHelper = new CameraHelper(_sunLight.shadow.camera);
+          this.props.sceneContext.addSceneObject("__shadowCameraHelper", _shadowCameraHelper);
+        } else if (prevState.lightParams.helpersVisible && !this.state.lightParams.helpersVisible) {
+          this.props.sceneContext.removeSceneObject("__sunLightHelper");
+          this.props.sceneContext.removeSceneObject("__shadowCameraHelper");
+        }
+        this.setLighting();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      clearInterval(this.lightPositionInterval);
+      this.props.sceneContext.removeSceneObject("__sunLight");
+      this.props.sceneContext.removeSceneObject("__moonLight");
+      this.props.sceneContext.removeSceneObject("__sunLightHelper");
+      this.props.sceneContext.removeSceneObject("__shadowCameraHelper");
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      return /*#__PURE__*/React.createElement(SideBar, {
+        icon: "light",
+        id: "MapLight3D",
+        onHide: this.onHide,
+        title: LocaleUtils.tr("appmenu.items.MapLight3D"),
+        width: "25em"
+      }, function () {
+        return {
+          body: _this2.renderBody()
+        };
+      });
+    }
+  }]);
+}(React.Component);
+_defineProperty(MapLight3D, "propTypes", {
+  /** Default viewer day (1-365) */
+  defaultDay: PropTypes.number,
+  /** Default viewer time (00:00-23:59) */
+  defaultTime: PropTypes.string,
+  sceneContext: PropTypes.object
+});
+_defineProperty(MapLight3D, "defaultProps", {
+  defaultDay: 182,
+  defaultTime: '12:00'
+});
+export { MapLight3D as default };