fix(rendering): add SunLightLayer only if explicitly enabled in options

examples/3dtiles_loader.html

@@ -81,7 +81,7 @@
             const isEmbedded = window.self !== window.top;
 
             window.gui = new dat.GUI();
-            
+
 
             // ---- Create a GlobeView ----
 
@@ -97,6 +97,7 @@
             // Create a GlobeView
             const view = new GlobeView(viewerDiv, placement, {
                 realisticLighting: true,
+                withSunLightLayer: true,
                 shadows: true,
                 controls: {
                     minDistance: 100,

examples/demo/src/Views/View3D.ts

@@ -30,6 +30,7 @@ class View3D extends View {
             placement,
             {
                 realisticLighting: true,
+                withSunLightLayer: true,
             },
         );
 

examples/mars.html

@@ -62,6 +62,7 @@
                     scaleDepth: 0.38,
                 },
                 realisticLighting: true,
+                withSunLightLayer: true,
             });
             setupLoadingScreen(viewerDiv, view);
 

examples/view_3d_map.html

@@ -50,6 +50,7 @@
             // Create a GlobeView
             const view = new itowns.GlobeView(viewerDiv, placement, {
                 realisticLighting: true,
+                withSunLightLayer: true,
             });
 
             // Setup loading screen and debug menu

examples/view_3d_mns_map.html

@@ -57,6 +57,7 @@
             // Create a GlobeView
             const view = new itowns.GlobeView(viewerDiv, placement, {
                 realisticLighting: true,
+                withSunLightLayer: true,
             });
 
             // Setup loading screen and debug menu

packages/Main/src/Core/Prefab/Globe/SkyManager.ts

@@ -93,6 +93,8 @@ class SkyManager {
         const camera = this.view.camera3D as THREE.PerspectiveCamera | THREE.OrthographicCamera;
         if (!this.enabled) { return; }
 
+        // sunLightLayer necessarily exists if SkyManager was created.
+        if (!this.view.sunLightLayer) { return; }
         const sunDirection = this.view.sunLightLayer.sunDirection;
         const moonDirection = new THREE.Vector3();
         getMoonDirectionECEF(this.view.date, moonDirection);
@@ -137,7 +139,9 @@ class SkyManager {
     }
 
     private _setState(on: boolean) {
-        // Realistic rendering requires a dimmer sunlight
+        // Realistic rendering requires a dimmer sunlight.
+        // sunLightLayer necessarily exists if SkyManager was created.
+        if (!this.view.sunLightLayer) { return; }
         this.view.sunLightLayer.sunLight.intensity *= on ? 0.1 : 10;
         this.sky.visible = on;
         this.skyLight.visible = on;

packages/Main/src/Core/Prefab/GlobeView.js

@@ -84,9 +84,13 @@ class GlobeView extends View {
      * The maximum view distance is this factor times the camera's altitude (above sea level).
      * @param {number} [options.fogSpread=0.5] - Proportion of the visible depth range that contains fog.
      * Between 0 and 1.
+     * @param {boolean} [options.withSunLightLayer=false] - Create and add a SunLightLayer.
+     * If true, it can later be switched by setting this.sunLightLayer.visible to true/false.
+     * If false, it will be impossible to enable it later on.
      * @param {boolean} [options.realisticLighting=false] - Enable realistic lighting.
      * If true, it can later be switched by setting this.skyManager.enabled to true/false.
      * If false, it will be impossible to enable it later on.
+     * Can only be enabled if withSunLightLayer was also enabled.
      * @param {boolean} [options.shadows=false] - Enable shadow map rendering. Can be toggled
      * later via `this.shadows`.
      */
@@ -164,13 +168,20 @@ class GlobeView extends View {
         }
 
         this.date = new Date(); // now
+        const withSunLightLayer = options.withSunLightLayer === true;
 
         // Sunlight and shadow layer
-        this.sunLightLayer = new SunLightLayer(this);
-        this.addLayer(this.sunLightLayer);
+        if (withSunLightLayer) {
+            this.sunLightLayer = new SunLightLayer(this);
+            this.addLayer(this.sunLightLayer);
+        }
 
         if (options.realisticLighting === true) {
-            this.skyManager = new SkyManager(this);
+            if (withSunLightLayer) {
+                this.skyManager = new SkyManager(this);
+            } else {
+                console.error('Realistic lighting cannot be enabled without sunlight layer option');
+            }
         }
 
         this.renderer.shadowMap.enabled = true;
@@ -229,10 +240,11 @@ class GlobeView extends View {
      * @type {boolean}
      */
     get shadows() {
-        return this.sunLightLayer.castShadow;
+        return this.sunLightLayer?.castShadow ?? false;
     }
 
     set shadows(value) {
+        if (!this.sunLightLayer) { return; }
         if (this.sunLightLayer.castShadow == value) { return; }
         this.sunLightLayer.castShadow = value;
         this.notifyChange(this.camera3D);

packages/Main/test/unit/globeview.js

@@ -17,6 +17,7 @@ describe('GlobeView', function () {
     const viewer = new GlobeView(renderer.domElement, placement, {
         renderer,
         realisticLighting: true,
+        withSunLightLayer: true,
     });
     const pickedPosition = new THREE.Vector3();
     pickedPosition.copy(viewer.camera.position());