How switch the type of camera

Hello guys,

I created an interface similar to this Interface interactive and I have a problem with the camera.

Can someone tells me what kind of camera used here?

when I click on the red dots, the type of camera changes and I can move with the arrows as if I am walking, how do I do that?

to switch I created two functions with two scenes (when I click I switch to another scene).

Thank you

Anes

I think thats the FreeCamera that is being used to walk around.
By animating the ArcRotateCamera to the correct position and then changing the scene.activeCamera to the FreeCamera you can toggle between then.

2 Likes

Hi Anes,

We made the scene and I can confirm that we did what Leon said !

ArcRotateCamera -> animation -> FreeCamera

2 Likes

Thank u I’ll try it

@sharp, Thank u for ur answer

so in my case I use ArcRotate camera for the first function of my first scene and after animation through a path, I should change the camera to a new camera which is freecamera in my second function of my second scene, am I right ?

Anes

Yes that’s it…tough I’m not sure what you mean by second scene/function, can you explain how you are creating the scenes ?

1 Like

Any reason not to use free camera all the time?

Hi,

Because we want to turn around the building in aerial mode and being in first person mode on the ground.

2 Likes

@sharp this is my two functions :

var createScene1=function()
   	    {
             var scene =new BABYLON.Scene(engine); 
             camera1 = new BABYLON.ArcRotateCamera("Camera",0, 0, 10, new BABYLON.Vector3(0, 
             0, 0), scene);
             camera1.attachControl(canvas, true);
             BABYLON.SceneLoader.Append("/data/html/babylonTest/", "coffrageLight.babylon", scene, 
             function(scene){
                                         scene.clearColor = new BABYLON.Color3(1, 1, 1);
                                          });
             return scene;
        };

      var createScene2 = function () 
        {
            var scene = new BABYLON.Scene(engine);
            var MyGoal = new BABYLON.Vector3(5,1,0);
            camera2 = new BABYLON.ArcRotateCamera("Camera2", 0, 0, 10, new 
            BABYLON.Vector3(0,0,0), scene);
            camera2.attachControl(canvas, true);
            BABYLON.SceneLoader.Append("/data/html/babylonTest/", "coffrageLight.babylon", 
                scene,function(scene){
                scene.clearColor = new BABYLON.Color3(1, 1, 1); 
            })
            var MyCurve= MyPath(camera2.position,MyGoal);
            MoveCameraThrough(scene, camera2, MyCurve);
            return scene;
        };

Here I used two scenes with two cameras but I choose ArcRotateCamera for both, I need your orientation
thank you

Anes

1 Like

In the interface interactive scene example you posted you move with keys and look around with the mouse. This will happen with a universal camera.

I don’t remember exactly but I think it’s because we didn’t like the way universal camera works on touch devices :nerd_face:

1 Like

So you want one camera that behaves as an arcRotateCamera to look around and a freeCamera to move around. Not sure how using touch you differentiate between a touch to look around and a touch to move. However as you must have a way to do this then you can construct your own inputs to control the way the camera reacts Customize Camera Inputs - Babylon.js Documentation

This might be a better solution than working with two cameras.

2 Likes

Anes I don’t understand why you create 2 scenes to import the same file ? I would create two cameras on the same scene then use scene.activeCamera =

yes, but the problem is when I walk through the path I’ll add some visual alarm and messages in the interface.
because I work to develop a metro station interface, and when there is an alarm I go to the position of the alarm and I add some indication of the alarm, so I decide to make 2 different scenes.
If there is better am listening :stuck_out_tongue:

Anes

Having 2 scenes won’t resolve your needs. I think you should try to see the problem with only one scene (you can still import content to it).

1 Like

I’ll try again, because I had a problem that I couldn’t switch between the normal vision and the goal vision inside the same scene (I’ve a boolean variabl that decide to move the camera).

Yes @JohnK you are right it could be a solution tough I’m not sure it is a better one :slight_smile:

You can switch camera according to your boolean with https://doc.babylonjs.com/api/classes/babylon.scene#activecamera

I have 2 pg which may help you:
this, a little bit complex - use c to switch camera
https://www.babylonjs-playground.com/#1FYQKN#23
and this - click on spheres to switch camera
https://www.babylonjs-playground.com/index.html#VDZ7IF#3
If I understood well, you have only to enable collision in the first pg, and you have exactly what you are looking for.

1 Like

I find this creating of two scenes odd too.Create two cameras in your scene but only make one active.Something like:

Cam1 → < Scene Event > → Cam2

The Scene Event could be a click, end of animation, collision with hidden object, end of audio file etc. Whatever the trigger, call a SwitchCam function that will switch the cameras and anything else you need to do.

cheers, gryff :slight_smile:

1 Like