# How switch the type of camera

**URL:** <https://forum.babylonjs.com/t/how-switch-the-type-of-camera/3167>\
**Category:** Questions\
**Created:** [May 13, 2019, 9:36am UTC](https://forum.babylonjs.com/t/how-switch-the-type-of-camera/3167 "2019-05-13T09:36:02Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Anes](https://avatars.discourse-cdn.com/v4/letter/a/3da27b/32.png) [@Anes](https://forum.babylonjs.com/u/Anes)\
**Post date:** [May 13, 2019, 9:36am UTC](https://forum.babylonjs.com/t/how-switch-the-type-of-camera/3167/1 "2019-05-13T09:36:02Z")

</div>

Hello guys,

I created an interface similar to this [Interface interactive](https://axeon.fr/CLIENT/EIFFAGE/Bordeaux.Hyperion/#/MAQUETTE_RT/index.html) 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

---

<div class="post-metadata">

**Author:** ![Leon](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/leon/32/30387_2.png) [@Leon](https://forum.babylonjs.com/u/Leon)\
**Post date:** [May 13, 2019, 12:18pm UTC](https://forum.babylonjs.com/t/how-switch-the-type-of-camera/3167/2 "2019-05-13T12:18:51Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![sharp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sharp/32/1325_2.png) [@sharp](https://forum.babylonjs.com/u/sharp)\
**Post date:** [May 13, 2019, 2:31pm UTC](https://forum.babylonjs.com/t/how-switch-the-type-of-camera/3167/3 "2019-05-13T14:31:33Z")

</div>

Hi Anes,

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

ArcRotateCamera -\> animation -\> FreeCamera

---

<div class="post-metadata">

**Author:** ![Anes](https://avatars.discourse-cdn.com/v4/letter/a/3da27b/32.png) [@Anes](https://forum.babylonjs.com/u/Anes)\
**Post date:** [May 13, 2019, 2:33pm UTC](https://forum.babylonjs.com/t/how-switch-the-type-of-camera/3167/4 "2019-05-13T14:33:20Z")

</div>

Thank u I’ll try it

---

<div class="post-metadata">

**Author:** ![Anes](https://avatars.discourse-cdn.com/v4/letter/a/3da27b/32.png) [@Anes](https://forum.babylonjs.com/u/Anes)\
**Post date:** [May 13, 2019, 2:35pm UTC](https://forum.babylonjs.com/t/how-switch-the-type-of-camera/3167/5 "2019-05-13T14:35:12Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![sharp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sharp/32/1325_2.png) [@sharp](https://forum.babylonjs.com/u/sharp)\
**Post date:** [May 13, 2019, 2:48pm UTC](https://forum.babylonjs.com/t/how-switch-the-type-of-camera/3167/6 "2019-05-13T14:48:10Z")

</div>

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 ?

---

<div class="post-metadata">

**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\
**Post date:** [May 13, 2019, 3:07pm UTC](https://forum.babylonjs.com/t/how-switch-the-type-of-camera/3167/7 "2019-05-13T15:07:39Z")

</div>

Any reason not to use free camera all the time?

---

<div class="post-metadata">

**Author:** ![sharp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sharp/32/1325_2.png) [@sharp](https://forum.babylonjs.com/u/sharp)\
**Post date:** [May 13, 2019, 3:11pm UTC](https://forum.babylonjs.com/t/how-switch-the-type-of-camera/3167/8 "2019-05-13T15:11:27Z")

</div>

Hi,

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

---

<div class="post-metadata">

**Author:** ![Anes](https://avatars.discourse-cdn.com/v4/letter/a/3da27b/32.png) [@Anes](https://forum.babylonjs.com/u/Anes)\
**Post date:** [May 13, 2019, 3:12pm UTC](https://forum.babylonjs.com/t/how-switch-the-type-of-camera/3167/9 "2019-05-13T15:12:35Z")

</div>

@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

---

<div class="post-metadata">

**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\
**Post date:** [May 13, 2019, 3:18pm UTC](https://forum.babylonjs.com/t/how-switch-the-type-of-camera/3167/10 "2019-05-13T15:18:58Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![sharp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sharp/32/1325_2.png) [@sharp](https://forum.babylonjs.com/u/sharp)\
**Post date:** [May 13, 2019, 3:35pm UTC](https://forum.babylonjs.com/t/how-switch-the-type-of-camera/3167/11 "2019-05-13T15:35:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![JohnK](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/johnk/32/26764_2.png) [@JohnK](https://forum.babylonjs.com/u/JohnK)\
**Post date:** [May 13, 2019, 3:45pm UTC](https://forum.babylonjs.com/t/how-switch-the-type-of-camera/3167/12 "2019-05-13T15:45:16Z")

</div>

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](https://doc.babylonjs.com/how_to/customizing_camera_inputs)

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

---

<div class="post-metadata">

**Author:** ![sharp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sharp/32/1325_2.png) [@sharp](https://forum.babylonjs.com/u/sharp)\
**Post date:** [May 13, 2019, 3:46pm UTC](https://forum.babylonjs.com/t/how-switch-the-type-of-camera/3167/13 "2019-05-13T15:46:03Z")

</div>

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 =

---

<div class="post-metadata">

**Author:** ![Anes](https://avatars.discourse-cdn.com/v4/letter/a/3da27b/32.png) [@Anes](https://forum.babylonjs.com/u/Anes)\
**Post date:** [May 13, 2019, 3:50pm UTC](https://forum.babylonjs.com/t/how-switch-the-type-of-camera/3167/14 "2019-05-13T15:50:03Z")

</div>

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 😛

Anes

---

<div class="post-metadata">

**Author:** ![sharp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sharp/32/1325_2.png) [@sharp](https://forum.babylonjs.com/u/sharp)\
**Post date:** [May 13, 2019, 3:53pm UTC](https://forum.babylonjs.com/t/how-switch-the-type-of-camera/3167/15 "2019-05-13T15:53:55Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![Anes](https://avatars.discourse-cdn.com/v4/letter/a/3da27b/32.png) [@Anes](https://forum.babylonjs.com/u/Anes)\
**Post date:** [May 13, 2019, 4:05pm UTC](https://forum.babylonjs.com/t/how-switch-the-type-of-camera/3167/16 "2019-05-13T16:05:22Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![sharp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sharp/32/1325_2.png) [@sharp](https://forum.babylonjs.com/u/sharp)\
**Post date:** [May 13, 2019, 4:07pm UTC](https://forum.babylonjs.com/t/how-switch-the-type-of-camera/3167/17 "2019-05-13T16:07:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![sharp](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sharp/32/1325_2.png) [@sharp](https://forum.babylonjs.com/u/sharp)\
**Post date:** [May 13, 2019, 4:21pm UTC](https://forum.babylonjs.com/t/how-switch-the-type-of-camera/3167/18 "2019-05-13T16:21:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![MarianG](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mariang/32/138_2.png) [@MarianG](https://forum.babylonjs.com/u/MarianG)\
**Post date:** [May 13, 2019, 4:27pm UTC](https://forum.babylonjs.com/t/how-switch-the-type-of-camera/3167/19 "2019-05-13T16:27:29Z")

</div>

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](https://www.babylonjs-playground.com/#1FYQKN#23)  
and this - click on spheres to switch camera  
[https://www.babylonjs-playground.com/index.html#VDZ7IF#3](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.

---

<div class="post-metadata">

**Author:** ![gryff](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/gryff/32/1855_2.png) [@gryff](https://forum.babylonjs.com/u/gryff)\
**Post date:** [May 13, 2019, 4:55pm UTC](https://forum.babylonjs.com/t/how-switch-the-type-of-camera/3167/20 "2019-05-13T16:55:39Z")

</div>

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 🙂

[Next page](https://forum.babylonjs.com/t/how-switch-the-type-of-camera/3167.md?page=2)