Hi guys.
I have a question, but first my situation. I need to create an app which alows to See some boxes on the plane. Generalny you may see it from different sides, just moving the camera, nothing special. There is some center, but this is not static : aside moving around you May also move in right, left, top, bottom.
Now the problem–I would like to have such a control which will allow user to quickly change the view - too look from above, from the right, some corner by clicking at it or just by rotating it and therefore also the plan. It also should follow current camera view to show which side the user is looking at. Is there such a control or any example of this aproach? Or at least some advice how to do it? Probably some other canvas is required, but don’t know.
Thank you 
Hi @Azbesciak !
Welcome to the forum!
You mean some gizmo like this one:
Where you click on the side to interpolate the camera to that view/direction.
I don’t know if there is already something. Maybe @Deltakosh has something in mind.
Otherwise, I can try to code one.
It is not available out of the box but not too complicated to implement in your project. I do not see it as part of the framework as it requires a setup of multiple canvases which is not our per default mode.
I recommend that you have a look at our gizmos to see how they are created.
For the multi views, I would recommend to use this new feature:
Thank you for a such quick response I actually wondered what that gizmo is - will give it a try
I’ve started to code something based on https://www.babylonjs-playground.com/#0LMZ2Y#0 and https://playground.babylonjs.com/#7KX2R8#133 but have some questions.
I want to achieve something like 
.
There is no visible axis - you just Move the box and it rotates synchronized with the plan. Same when you rotate the camera, the box rotates in the same way - they are synchronized.
So the first question - is it possible without visible axes? I know I can set meshes on them for each axis gizmo, but not sure is it the right way… and it allows to only move the single axis at the time
and also, how to sync canvas? I even get trouble to observe camera changes… I am using ArcRotationCamera.
Thanks
I’m taking a look at what I can do
Hi @Azbesciak
Do you have a playground with what you started? I’m curious to see how you did it and I’m wondering is using rotation gizmo is the easiest way to do it.
Tried with gizmo, but finished quickly. I think the easiest way would be to just make another canvas and another camera, and then synchronize that camera with the main one. The question is - how? as an input? Did not found any suitable example, maybe just searched for not long enough…
Yes, I came to the same conclusion: A Gizmo is not the best solution here. I did a quick PG that highlights the principle that should work:
https://www.babylonjs-playground.com/#U5NVC3
The idea is to have another scene (sceneGizmo) that will hold the ArcRotateCamera and the view box. Then render that scene in a viewport on top on the ‘classic’ 3D scene.
The control loop is changed to allow rendering of the 2 scenes. I think it’s the best place to do the sync between the 2 cameras.
You’ll have to replace the default box by a mesh with view text (top, left, right…) and do the raycast to get the face picked.
Thank you - will check this one. For now my solution contains 2 engines, but I spotted there is a problem with rendering order - if made in invalid way, one engine renders everything, another is empty…
Just wondering - maybe it is also valuable to sync cameras by onMeshTargetChangedObservable… maybe more efficient - less changes?
I think onMeshTargetChangedObservable is useful when you want the camera to follow a moving target. Like a camera following a car.
To sync the camera, I would use rotationQuaternion to get the camera orientation or position.
If the view box gizmo is centered around (0,0,0) in the scene, then the camera position is equal to the camera direction (since target is (0,0,0)).
Now you have the direction, you can also change the destination camera.
I have a problem, with both your and my approach: some items are rendered on both first and the second scene. I think it may be caused by my method - I create meshes/materials etc without the scene (null) and at given time I am adding it to the certain scene.
I am sure that I am adding to only one at given time, camera is also one per scene.
The only thing what is same is canvas and engine (in your-like approach) - in mine, there is nothing.
Also noticed that without the scene as an argument mesh is added to it anyway - maybe this is the reason; in debug layer all are assigned to one of them:
and a view:
Any idea? Passing the right scene as an argument solves the problem as I see, but I would like to make some utility functions and share meshes factories rather than a single objects…
I’ve found this issue How to create a mesh without add it to the scene. · Issue #642 · BabylonJS/Babylon.js · GitHub
Since 2015 there is no better way?
I wouldn’t try to make the gizmo generic. Instead, I’d make it as much isolated from the rest: create a scene and meshes/material. Then, draw the scene with the viewport if the gizmo is needed.
What do you want to achieve with the factories?
I don’t want to make gizmo generic - Just want to abstract the mesh from the scene. Like a component independent from the usage.
Anyway, in your solution there might be one problem - gizmo is directly synchronized with the Main scene because of the same canvas. This unables to make some mapping like enabled only rotation in gizmo whereas you might Move left and right at the Main scene.
Nevertheless, thank you.
@Cedric Thx four your solution. Ive made some fixes for my usecase. Axis viewer here is final result with styling:
