Use a slider instead of a Gizmo to change direction of lights

Questions
1

Hello,
I thought asking here is the best place to start with this.
I have a HemisphericLight and a Gizmo to change the direction of the light but i would like something more user friendly than the Gizmo. Maybe a Slider that will change the direction of the light the same way the Gizmo does. Grabbing the red, green or blue circles of the gizmo to rotate them looks more of a Debug feature to me.

I added a Gizmo to a basic scene in the Playground just so that i can link a scene:
Scene

Thank you.

2

Have you tried out a GUI slider to see if it meets your needs The Babylon GUI | Babylon.js Documentation ?

1 Like
3

I oppened this playground Slider
I will look into it a bit more but at 1st glance im having trouble because im working in Vue and i cant use BABYLON.

But usually i get an autocomplete suggestion when typing them because i have an imported folder: node_modules/babylonjs/core and all of this objects are there but i dont have GUI or AdvancedDynamicTexture so im lost at the start.

For example this is my code for creating lights:
const hemiLight = new HemisphericLight( "hemiLight", new Vector3(1,5,-5), this.scene);

and at the top i automatically get Import { HemisphericLight } from "@babylonjs/core";

But if i understand the code here, im supposed to connect the light to the Slider? Not the Gizmo to the Slider.

4

You can import the GUI package.

That is correct. Not sure if it is possible to control a gizmo using a slider. @Cedric or @Evgeni_Popov may be able to help if not on holiday.

5

I managed to import the GUI. Thank you very much.
I will update the post with any progress i make in regards to controlling the lights with the slider. :grin:

1 Like
6

Seems it will be enough just to connect slider(s) to the light and not use gizmo at all.

1 Like
7

So, here is an update. I managed to actually connect the light to the slider but the only value im able to change is the intensity of the light, while with the Gizmo, it wasnt the intensity, it was the angle from which the light is hitting the scene.
This is the slider part of the code and im aware that im using sliderLight.intensity and thats why i have the result i that i have but i wasnt able to find any other option to change the lights.

      this.slider = new GUI.Slider();
             this.slider.minimum = 0;
             this.slider.maximum = 2 * Math.PI;
             this.slider.value = 0;
             this.slider.color = "blue";
             this.slider.thumbColor = "white";
             this.slider.rotation = -Math.PI/2;
             this.slider.height = "20px";
             this.slider.width = "200px";
             this.slider.verticalAlignment = GUI.Control.VERTICAL_ALIGNMENT_BOTTOM;
           

             this.slider.onValueChangedObservable.add((value) => {
                if (sliderLight) {
                    sliderLight.intensity = value;
                }
            });
8

Here for example is the slider controlling the x value of the light’s position. This is using a PointLight but for a HemisphericLight you could make sliders to control the x, y, and z values of its direction instead. :slightly_smiling_face:

1 Like
9

Thank you for your reply. I dont know why but i cant use .position.
I get the error: Property ‘position’ does not exist on type ‘HemisphericLight’.
And i get the same if i try to use a PointLight instead. its just
Property ‘position’ does not exist on type ‘PointLight’.
Ill have to look into it more.

10

For HemisphericLight you can control the direction with the slider like below. And above shows how to control the position of a PointLight. If can you post a PG with error if still having trouble, will help fix it. :slight_smile:

1 Like
11

Thank you so much. Kinda embarrassing i missed the .direction property :sweat_smile:
Thanks a lot everyone :slight_smile:

1 Like