Add helper toggle and make directional controls spherical

Author: Yahiewi

src/controls.ts

@@ -287,14 +287,22 @@ 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 = {
-        X: 3,
-        Y: 10,
-        Z: 3,
+        // 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
+        Intensity: 1.0,
+        // Adding target controls
+        Target: {
+          X: 0,
+          Y: 0,
+          Z: 0
+        }
       };
 
       const ambientSettings = {
@@ -308,35 +316,73 @@ export class URDFControls extends GUI {
         Intensity: 1.0
       };
 
+      const helperSettings = {
+        DirectionalHelper: true,
+        HemisphereHelper: true
+      };
+
       // Position limits and steps
       const minPosition = -20;
       const maxPosition = 20;
       const positionStep = 0.1;
 
+      // Spherical coordinate limits and steps
+      const minDistance = 0.1;
+      const maxDistance = 30;
+      const distanceStep = 0.1;
+      const minAngle = -Math.PI;
+      const maxAngle = Math.PI;
+      const angleStep = 0.01;
+
       // Intensity limits and steps
       const minIntensity = 0;
       const maxIntensity = 2;
       const intensityStep = 0.05;
 
-      // Directional light controls
+      // Target controls for directional light
+      const targetFolder = directionalFolder.addFolder('Target');
       this.controls.lights.directional = {
         position: {
-          x: directionalFolder.add(
+          // Using spherical coordinates instead of Cartesian
+          distance: directionalFolder.add(
+            directionalSettings,
+            'Distance',
+            minDistance,
+            maxDistance,
+            distanceStep
+          ),
+          altitude: directionalFolder.add(
+            directionalSettings,
+            'Altitude',
+            minAngle,
+            maxAngle,
+            angleStep
+          ),
+          azimuth: directionalFolder.add(
             directionalSettings,
+            'Azimuth',
+            minAngle,
+            maxAngle,
+            angleStep
+          )
+        },
+        target: {
+          x: targetFolder.add(
+            directionalSettings.Target,
             'X',
             minPosition,
             maxPosition,
             positionStep
           ),
-          y: directionalFolder.add(
-            directionalSettings,
+          y: targetFolder.add(
+            directionalSettings.Target,
             'Y',
             minPosition,
             maxPosition,
             positionStep
           ),
-          z: directionalFolder.add(
-            directionalSettings,
+          z: targetFolder.add(
+            directionalSettings.Target,
             'Z',
             minPosition,
             maxPosition,
@@ -381,6 +427,15 @@ export class URDFControls extends GUI {
         )
       };
 
+      // Light helpers controls
+      this.controls.lights.helpers = {
+        directionalHelper: helpersFolder.add(
+          helperSettings,
+          'DirectionalHelper'
+        ),
+        hemisphereHelper: helpersFolder.add(helperSettings, 'HemisphereHelper')
+      };
+
       // Open main lights folder and directional subfolder
       this._lightsFolder.open();
       directionalFolder.open();

src/layout.ts

@@ -224,23 +224,54 @@ export class URDFLayout extends PanelLayout {
     // Directional light callbacks
     const directional = lightControl.directional;
 
-    // Position controls
-    directional.position.x.onChange((newX: number) => {
-      const y = directional.position.y.getValue();
-      const z = directional.position.z.getValue();
-      this._renderer.setDirectionalLightPosition(newX, y, z);
+    // Position controls using spherical coordinates
+    directional.position.distance.onChange((newDistance: number) => {
+      const altitude = directional.position.altitude.getValue();
+      const azimuth = directional.position.azimuth.getValue();
+      this._renderer.setDirectionalLightPositionSpherical(
+        newDistance,
+        altitude,
+        azimuth
+      );
     });
 
-    directional.position.y.onChange((newY: number) => {
-      const x = directional.position.x.getValue();
-      const z = directional.position.z.getValue();
-      this._renderer.setDirectionalLightPosition(x, newY, z);
+    directional.position.altitude.onChange((newAltitude: number) => {
+      const distance = directional.position.distance.getValue();
+      const azimuth = directional.position.azimuth.getValue();
+      this._renderer.setDirectionalLightPositionSpherical(
+        distance,
+        newAltitude,
+        azimuth
+      );
     });
 
-    directional.position.z.onChange((newZ: number) => {
-      const x = directional.position.x.getValue();
-      const y = directional.position.y.getValue();
-      this._renderer.setDirectionalLightPosition(x, y, newZ);
+    directional.position.azimuth.onChange((newAzimuth: number) => {
+      const distance = directional.position.distance.getValue();
+      const altitude = directional.position.altitude.getValue();
+      this._renderer.setDirectionalLightPositionSpherical(
+        distance,
+        altitude,
+        newAzimuth
+      );
+    });
+
+    // Target position controls for directional light
+    directional.target.x.onChange((newX: number) => {
+      const y = directional.target.y.getValue();
+      const z = directional.target.z.getValue();
+      this._renderer.setDirectionalLightTarget(newX, y, z);
+    });
+
+    directional.target.y.onChange((newY: number) => {
+      const x = directional.target.x.getValue();
+      const z = directional.target.z.getValue();
+      this._renderer.setDirectionalLightTarget(x, newY, z);
+    });
+
+    directional.target.z.onChange((newZ: number) => {
+      const x = directional.target.x.getValue();
+      const y = directional.target.y.getValue();
+      this._renderer.setDirectionalLightTarget(x, y, newZ);
     });
 
     // Color and intensity controls
@@ -252,6 +283,15 @@ export class URDFLayout extends PanelLayout {
       this._renderer.setDirectionalLightIntensity(newIntensity);
     });
 
+    // Light helper visibility toggles
+    lightControl.helpers.directionalHelper.onChange((visible: boolean) => {
+      this._renderer.setDirectionalLightHelperVisibility(visible);
+    });
+
+    lightControl.helpers.hemisphereHelper.onChange((visible: boolean) => {
+      this._renderer.setHemisphereLightHelperVisibility(visible);
+    });
+
     // Ambient light callbacks
     const ambient = lightControl.ambient;
 

src/renderer.ts

@@ -25,6 +25,8 @@ export class URDFRenderer extends THREE.WebGLRenderer {
   private _colorGround = new THREE.Color();
   private _gridHeight = 0;
   private _robotIndex = -1;
+  private _directionalLightHelper: THREE.DirectionalLightHelper | null = null;
+  private _hemisphereLightHelper: THREE.HemisphereLightHelper | null = null;
 
   /**
    * Creates a renderer to manage the scene elements
@@ -143,13 +145,13 @@ export class URDFRenderer extends THREE.WebGLRenderer {
     directionalLight.shadow.camera.far = 40;
     this._scene.add(directionalLight);
 
-    // Add a helper for the directional light with black color
-    const directionalLightHelper = new THREE.DirectionalLightHelper(
+    // Add a helper for the directional light
+    this._directionalLightHelper = new THREE.DirectionalLightHelper(
       directionalLight,
       2,
-      new THREE.Color(0x000000) // Black color for helper
+      new THREE.Color(0x000000)
     );
-    this._scene.add(directionalLightHelper);
+    this._scene.add(this._directionalLightHelper);
 
     const ambientLight = new THREE.AmbientLight('#fff');
     ambientLight.intensity = 0.5;
@@ -163,13 +165,13 @@ export class URDFRenderer extends THREE.WebGLRenderer {
     hemisphereLight.intensity = 1;
     this._scene.add(hemisphereLight);
 
-    // Add a helper for the hemisphere light with black color
-    const hemisphereLightHelper = new THREE.HemisphereLightHelper(
+    // Add a helper for the hemisphere light
+    this._hemisphereLightHelper = new THREE.HemisphereLightHelper(
       hemisphereLight,
       2
     );
-    hemisphereLightHelper.material.color.set(0x000000); // Black color for helper
-    this._scene.add(hemisphereLightHelper);
+    this._hemisphereLightHelper.material.color.set(0x000000); // Black color for helper
+    this._scene.add(this._hemisphereLightHelper);
   }
 
   /**
@@ -187,6 +189,80 @@ export class URDFRenderer extends THREE.WebGLRenderer {
     this._scene.children[hemisphereIndex] = hemisphereLight;
   }
 
+  /**
+   * Toggle the visibility of the directional light helper
+   *
+   * @param visible - Whether the helper should be visible
+   */
+  setDirectionalLightHelperVisibility(visible: boolean): void {
+    if (this._directionalLightHelper) {
+      this._directionalLightHelper.visible = visible;
+      this.redraw();
+    }
+  }
+
+  /**
+   * Toggle the visibility of the hemisphere light helper
+   *
+   * @param visible - Whether the helper should be visible
+   */
+  setHemisphereLightHelperVisibility(visible: boolean): void {
+    if (this._hemisphereLightHelper) {
+      this._hemisphereLightHelper.visible = visible;
+      this.redraw();
+    }
+  }
+
+  /**
+   * Updates the target of the directional light
+   *
+   * @param x - The x coordinate of the target
+   * @param y - The y coordinate of the target
+   * @param z - The z coordinate of the target
+   */
+  setDirectionalLightTarget(x: number, y: number, z: number): void {
+    const directionalLight = this._scene.children.find(
+      obj => obj.type === 'DirectionalLight'
+    ) as THREE.DirectionalLight;
+
+    if (directionalLight) {
+      directionalLight.target.position.set(x, y, z);
+      if (this._directionalLightHelper) {
+        this._directionalLightHelper.update();
+      }
+      this.redraw();
+    }
+  }
+
+  /**
+   * Updates the position of the directional light using spherical coordinates
+   *
+   * @param distance - Distance from target
+   * @param altitude - Angle in radians from the horizontal plane (elevation)
+   * @param azimuth - Angle in radians around the vertical axis
+   */
+  setDirectionalLightPositionSpherical(
+    distance: number,
+    altitude: number,
+    azimuth: number
+  ): void {
+    const directionalLight = this._scene.children.find(
+      obj => obj.type === 'DirectionalLight'
+    ) as THREE.DirectionalLight;
+
+    if (directionalLight) {
+      const x = distance * Math.cos(altitude) * Math.cos(azimuth);
+      const z = distance * Math.cos(altitude) * Math.sin(azimuth);
+      const y = distance * Math.sin(altitude);
+
+      directionalLight.position.set(x, y, z);
+      if (this._directionalLightHelper) {
+        this._directionalLightHelper.update();
+      }
+      this.redraw();
+    }
+  }
+
   /**
    * Change the background color of the scene
    *
@@ -265,6 +341,9 @@ export class URDFRenderer extends THREE.WebGLRenderer {
 
     if (directionalLight) {
       directionalLight.position.set(x, y, z);
+      if (this._directionalLightHelper) {
+        this._directionalLightHelper.update();
+      }
       this.redraw();
     }
   }