Set Gizmo position in code

Questions
1

Hello,
Im new to Babylonjs and 3D models in general. I received a task to implement a 3D model and i was suggested to use BabylonJS. The best tutorial i found online was a series on Youtube that used Babylonjs with VueJS and everything seems to work but i just cant figure out how to set the position of the Gizmo for the light in my scene.
I have a HemisphericLight and the Gizmo to change how the light flows on the scene. I can change the position of the Gizmo with: gizmoManager.positionGizmoEnabled = true;
but every time the page is refreshed, the Gizmo is placed in the center of the screen and i cant seem to find any way to set the Gizmo position in code? No .position option or new Vector3() option. Is there a way to set the initial position of the Gizmo?

2

Hi there, and since you mentioned you were new, welcome to the Babylon family! :joy:

Let’s see if we can take a look at what’s going on. Do you have a Playground? (PG). This would help clarify to me a little more what you would like, and could help us debug what’s going on.:slight_smile:

Taking a look around I found these examples with light gizmos.
https://playground.babylonjs.com/#Z4ZGAY#28

If you’d like the gizmo to attach to your light source you can do that with these lines in.

lightGizmo.light = light; //line 13
....
m.attachToMesh(lightGizmo.attachedMesh); //line 22

Gizmo’s attaach to meshes and will stick with the position of whatever mesh or light you set it to. If you’d like it to be at a different starting position, perhaps change the starting position of your light source or create another mesh at a different position and attach it to that mesh instead.

2 Likes
3

Hello, thank you for the reply :slight_smile:

I didnt do anything in the playground. I followed the tutorial that installed vue.js and babylon.js. I basically have a 3d model of a room with the walls removed so you can see inside and an ArcRotateCamera to look around. The gizmo’s starting position is in the middle of the room. I tried changing the position of my hemispheric light but it didnt change the position of the gizmo.
Here is the code i have for the lights, i feel like im doing exactly what you said with changing the position of the light:
My problem seems to be here that i cant use the line from your example:
lightGizmo.attachedMesh.position.y = 3;
it gives me an error: “The left-hand side of an assignment expression may not be an optional property access.ts(2779)”


CreateLights(): void {

        const hemiLight = new HemisphericLight(
            "hemiLight",
            new Vector3(1,5,-5),
            this.scene
    );

    hemiLight.intensity = 1;
    this.CreteGizmos(hemiLight);

}

    CreteGizmos(customLight: Light): void {
        const lightGizmo = new LightGizmo();

        lightGizmo.scaleRatio = 2;
        lightGizmo.light = customLight;
        lightGizmo.updateGizmoPositionToMatchAttachedMesh = true 

        const gizmoManager = new GizmoManager(this.scene);

        gizmoManager.positionGizmoEnabled = true;
        gizmoManager.rotationGizmoEnabled = true;
        gizmoManager.usePointerToAttachGizmos = false;
        gizmoManager.attachToMesh(lightGizmo.attachedMesh);    

    }
1 Like
4

I managed to make it work. I’ll write it here so that its less messy.
Your line: lightGizmo.attachedMesh.position.y = 3; was the solution. I just needed to add an ! infront of the .position to get rid of the error i mentioned above (“The left-hand side of an assignment expression may not be an optional property access.ts(2779)”).
This is how i have it set up and its working:
lightGizmo.attachedMesh!.position = new Vector3(0,20,4);
Thank you @msDestiny14 for the help :slight_smile:

3 Likes