Improve lighting

Author: Yahiewi

src/controls.ts

@@ -287,16 +287,15 @@ export class URDFControls extends GUI {
         this._lightsFolder.addFolder('Directional Light');
       const ambientFolder = this._lightsFolder.addFolder('Ambient Light');
       const hemisphereFolder = this._lightsFolder.addFolder('Hemisphere Light');
-      const helpersFolder = this._lightsFolder.addFolder('Light Helpers');
 
       // Initialize settings for each light type
       const directionalSettings = {
-        // Spherical coordinates are more intuitive for light positioning
         Distance: 10.9, // Initial distance from origin
         Altitude: Math.PI / 4, // Initial altitude angle (radians)
         Azimuth: Math.PI / 4, // Initial azimuth angle (radians)
         Color: [255, 255, 255],
         Intensity: 1.0,
+        ShowHelper: false,
         // Adding target controls
         Target: {
           X: 0,
@@ -312,13 +311,9 @@ export class URDFControls extends GUI {
 
       const hemisphereSettings = {
         SkyColor: [255, 255, 255],
-        GroundColor: [38, 50, 56], // Default hex: #263238
-        Intensity: 1.0
-      };
-
-      const helperSettings = {
-        DirectionalHelper: true,
-        HemisphereHelper: true
+        GroundColor: [38, 50, 56],
+        Intensity: 1.0,
+        ShowHelper: false // Helper toggle moved here, off by default
       };
 
       // Position limits and steps
@@ -396,7 +391,8 @@ export class URDFControls extends GUI {
           minIntensity,
           maxIntensity,
           intensityStep
-        )
+        ),
+        showHelper: directionalFolder.add(directionalSettings, 'ShowHelper')
       };
 
       // Ambient light controls
@@ -424,16 +420,8 @@ export class URDFControls extends GUI {
           minIntensity,
           maxIntensity,
           intensityStep
-        )
-      };
-
-      // Light helpers controls
-      this.controls.lights.helpers = {
-        directionalHelper: helpersFolder.add(
-          helperSettings,
-          'DirectionalHelper'
         ),
-        hemisphereHelper: helpersFolder.add(helperSettings, 'HemisphereHelper')
+        showHelper: hemisphereFolder.add(hemisphereSettings, 'ShowHelper')
       };
 
       // Open main lights folder and directional subfolder

src/layout.ts

@@ -283,15 +283,11 @@ export class URDFLayout extends PanelLayout {
       this._renderer.setDirectionalLightIntensity(newIntensity);
     });
 
-    // Light helper visibility toggles
-    lightControl.helpers.directionalHelper.onChange((visible: boolean) => {
+    // Helper visibility toggle for directional light
+    directional.showHelper.onChange((visible: boolean) => {
       this._renderer.setDirectionalLightHelperVisibility(visible);
     });
 
-    lightControl.helpers.hemisphereHelper.onChange((visible: boolean) => {
-      this._renderer.setHemisphereLightHelperVisibility(visible);
-    });
-
     // Ambient light callbacks
     const ambient = lightControl.ambient;
 
@@ -317,6 +313,11 @@ export class URDFLayout extends PanelLayout {
     hemisphere.intensity.onChange((newIntensity: number) => {
       this._renderer.setHemisphereLightIntensity(newIntensity);
     });
+
+    // Helper visibility toggle for hemisphere light
+    hemisphere.showHelper.onChange((visible: boolean) => {
+      this._renderer.setHemisphereLightHelperVisibility(visible);
+    });
   }
 
   /**

src/renderer.ts

@@ -134,43 +134,48 @@ export class URDFRenderer extends THREE.WebGLRenderer {
    * Adds three lights to the scene
    */
   private _addLights(): void {
-    const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
+    // Directional light
+    const directionalLight = new THREE.DirectionalLight(0xfff2cc, 1.8);
     directionalLight.castShadow = true;
-    directionalLight.position.set(3, 10, 3);
-    directionalLight.shadow.camera.top = 2;
-    directionalLight.shadow.camera.bottom = -2;
-    directionalLight.shadow.camera.left = -2;
-    directionalLight.shadow.camera.right = 2;
-    directionalLight.shadow.camera.near = 0.1;
-    directionalLight.shadow.camera.far = 40;
+    directionalLight.position.set(5, 12, 6);
+    directionalLight.shadow.camera.top = 5;
+    directionalLight.shadow.camera.bottom = -5;
+    directionalLight.shadow.camera.left = -5;
+    directionalLight.shadow.camera.right = 5;
+    directionalLight.shadow.camera.near = 0.5;
+    directionalLight.shadow.camera.far = 50;
     this._scene.add(directionalLight);
 
-    // Add a helper for the directional light
+    // Directional light helper
     this._directionalLightHelper = new THREE.DirectionalLightHelper(
       directionalLight,
       2,
       new THREE.Color(0x000000)
     );
+    this._directionalLightHelper.visible = false;
     this._scene.add(this._directionalLightHelper);
 
-    const ambientLight = new THREE.AmbientLight('#fff');
-    ambientLight.intensity = 0.5;
+    // Ambient light
+    const ambientLight = new THREE.AmbientLight(0x404040);
+    ambientLight.intensity = 0.1;
     ambientLight.position.set(0, 5, 0);
     this._scene.add(ambientLight);
 
+    // Hemisphere light
     const hemisphereLight = new THREE.HemisphereLight(
-      this._colorSky,
-      this._colorGround
+      0x8888ff, // cool sky
+      0x442200, // warm ground
+      0.4
     );
-    hemisphereLight.intensity = 1;
     this._scene.add(hemisphereLight);
 
-    // Add a helper for the hemisphere light
+    // Hemisphere light helper
     this._hemisphereLightHelper = new THREE.HemisphereLightHelper(
       hemisphereLight,
       2
     );
-    this._hemisphereLightHelper.material.color.set(0x000000); // Black color for helper
+    this._hemisphereLightHelper.material.color.set(0x000000);
+    this._hemisphereLightHelper.visible = false; // Set to hidden by default
     this._scene.add(this._hemisphereLightHelper);
   }