How to Attach a Node/Mesh to ArcRotateCamera?

I’d like to create an axis experience similar to Blender (clicking axis circle rotates the camera to that axis):
Screen Shot 2022-01-25 at 10.54.18 PM

How can I attach a node/mesh to ArcRotateCamera so that I can use AdvancedDynamicTexture to draw a GUI that have controls attach to that node/mesh?

OH cool! There’s a couple of steps you are going to want to do for this.

I’ll give a quick summary now to get the ball rolling for you and then work on a demo to showcase it all put together :slight_smile:

If we look at arcRotateCamera we can set a target. We’re going to set it to the center point of this axis mesh you create. Camera Introduction | Babylon.js Documentation

Next we’ll lock remove camera.attachControl(canvas, true); since we want custom input.

For the GUI controls, you can actually attach those to your circle meshes using linkWithMesh https://playground.babylonjs.com/#XCPP9Y#10995

I already know how to draw GUI and linkWithMesh, the question is how to attach to Camera a node/mesh without affecting Camera controls (so that the Camera itself acts as parent Transform node).

I see that ArcRotateCamera does not have onUpdateObservable, and putting the logic to scene.renderLoop is too procedural and hacky (only as the last resrort).

I need a declarative modular approach.

In my head my approach would be to map each movement click to the movement you would of the camera. Clicking on the sphere’s/GUI elements direction using onPointerClickObservabledirectly would rotate the camera in the respective direction.

Would that not work? Or are you asking about the overall sphere like it is in blender? (I had to open blender to refresh my memory) I guess you could map the rotation of the gizmo to the camera rotation as you suggested. Could just check the rotation of your gizmo on every click update.

I do not need to move the Camera by dragging the circles (and I mean circles, not spheres, because it will be drawn by GUI in 2D to appear above all meshes in 3D scene).

All I need is the ability to rotate camera to 6 predefined angles of view corresponding to 6 circles when clicked.

Back to my original question in the title - I only need an answer to that “attach node to Camera” question so that the node moves with Camera and remains at top right position of the screen, no matter where the Camera is, or how it is rotated, or what its radius is… I want a Camera’s fixed satellite.

The rest I’ve already sorted out how to do.

You can parent the mesh to the camera : https://playground.babylonjs.com/#XCPP9Y#10996 look at the top left sphere in the example.

1 Like

Thank you. This is almost what I want, but how do you arrive at this coords?

    littleBugger.position.x = -2;
    littleBugger.position.y = 2;
    littleBugger.position.z = 5;

I have dynamic canvas width/height, how to get above values dynamically?


In PG, if you widen the PG, it no longer stay in the corner.

1 Like

Oh I manually positioned it :slight_smile:

you could use the unproject function to figure the best spot I guess Screen xy to world coordinates

3 Likes

Thanks seb! :slight_smile:

Didn’t know Camera extended Node eventually, now it made sense.

1 Like

Hi @sebavan, I have another question, is it possible to set a renderList per Camera?

I want to make the Axes only visible to the second HUD camera (and this HUD camera will not render the cube in the scene). While the main camera should not render the Axes.

PG example of HUD Camera

should be here: Layer Masks and Multi-Cam Textures | Babylon.js Documentation

1 Like