How switch the type of camera

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

@sharp so I create only one scene and I switch cameras but I’ve a problem that when I switch from standardCamera to SecondCamera (here I initialize them with the same type just for testing) with a variabl x that I recover it from the extern, when I change x 1->2 it works and my camera follow my path, but when I want to turn back it back to 2->1 it doesn’t work (I think because I have scene.beginAnimation() inside moveCamera() function, so the render doesn’t give me permission to switch my camera).

how to stop it after arriving to my goal ?

this is my code :

var camera1;
var camera2;
var scene;
var canvas;
var engine;
var activeCamera;
var x;




 var InitCamera= function(){
 camera1=  new BABYLON.ArcRotateCamera("Camera",0, 0, 10, new BABYLON.Vector3(0, 0, 0), 
scene);
 camera2=camera1
 activeCamera="StandardCamera";
scene.activeCamera=camera1;
camera1.attachControl(canvas, false);
}


 var UseCamera1=function(){

    if(activeCamera="SecondCamera"){
	activeCamera="StandardCamera";
	camera2.detachControl(canvas);
}

scene.activeCamera=camera1;
camera1.attachControl(canvas, false);
      }


  var UseCamera2=function(){

if(activeCamera="StandardCamera"){
    	activeCamera="SecondCamera";
camera1.detachControl(canvas);
  }
 scene.activeCamera=camera2;
 camera2.attachControl(canvas, false);  
   MoveCamera();
 }

 var MoveCamera=function(){
var MyGoal = new BABYLON.Vector3(5,1,0);
var MyCurve= MyPath(camera2.position,MyGoal);
MoveCameraThrough(scene, camera2, MyCurve);
}


     //---------------------------------------------------------------------------------------------------------------------------------------------------------//

  var CreateScene=function(){
    canvas = document.getElementById("renderCanvas"); // Get the canvas element 
    engine = new BABYLON.Engine(canvas, true); 
    scene= new BABYLON.Scene(engine);
    BABYLON.SceneLoader.Append("/data/html/babylonTest/", "coffrageLight.babylon", 
  scene,function(scene){
                scene.clearColor = new BABYLON.Color3(1, 1, 1);
   
            })
      InitCamera();
      oaJsApi.dpConnect("second.:_original.._value",true,{

         success: function(data) {

			x = data.value;

			if(x == 1)
				{
				  UseCamera1();
				}
   			 else if(x == 2)
     		   {
				  UseCamera2();
       		 }

			}

			 });

    
    return scene
  }

 var scene = CreateScene();

engine.runRenderLoop(function(){
		
   scene.render();	

 });

window.addEventListener("resize", function () {
            engine.resize();
        });

and this is my MoveCameraThrough() function :

 function MoveCameraThrough( scene , camera, MyCurve)
 {
 const path3d = new BABYLON.Path3D(MyCurve.getPoints());
 const tangents = path3d.getTangents(); // array of tangents to the curve
 const normals = path3d.getNormals(); // array of normals to the curve
 const binormals = path3d.getBinormals(); // array of binormals to curve
 const speed = 30*Math.floor(Math.random() * (7 - 3 + 1)) + 3; // const speed = 1
 const animationPosition = new BABYLON.Animation('animPos', 'position', speed, 
 BABYLON.Animation.ANIMATIONTYPE_VECTOR3, 
 BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
 const animationRotation = new BABYLON.Animation('animRot', 'rotation', speed, 
 BABYLON.Animation.ANIMATIONTYPE_VECTOR3, 
 BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
 const keysPosition = [];
 const keysRotation = [];

 for (let p = 0; p < MyCurve.getPoints().length; p++) {
   keysPosition.push({
   frame: p,
    value: MyCurve.getPoints()[p]
    });
   keysRotation.push({
   frame: p,
   value: BABYLON.Vector3.RotationFromAxis(normals[p], binormals[p], tangents[p])
   });
   }
   animationPosition.setKeys(keysPosition);
   animationRotation.setKeys(keysRotation);

  camera.animations=[
  animationPosition,
  animationRotation
   ];
  scene.beginAnimation(camera, 0, 200, false);
   }

Best Regards

Anes

Anes sorry I don’t understand what exactly your problem is :p…Could you make a playground ? It’s much easier for us to help you.

1 Like

We organize many cameras under namespace and switch out active camera:

fx.cams.rotateCam(script)
fx.cams.followCam(script)

Also we’d go back and forth on the question:

one-cam for everything OR specialized cams for specific things?

That path brought us to specialized camBehaviors:

fx.cams.faceCam()
fx.cams.birdsEyeCam()
fx.cams.smoothRideCam()
fx.cams.cornerCam()
fx.cams.longCam()

and simultaneously to cameraZones. For actionTriggers.

Interestingly, the one-cam approach made a triumphant return. It was after animating fx.cams.freeCam again and again within specialized cam behaviors. So in addition to activeCam concept we added a fx.cams.defaultCam. Which … is a FreeCam.

So, because of this thread, now realize we kind of wound up with some combo of both.

Happy to see that doc on “Custom Camera Inputs”. And love those PGs!

: )

@sharp here is the playground Babylon.js Playground
If you click “button two” camera moves through the path to MyGoal, but I want that when I click button 1 it turns back to camera1 and when I click “button two” it repeats.

here I use camera2=camera1 just for testing

Thank you

Anes

scene.beginAnimation(camera2, 200, 0, false);

line 64 :
https://www.babylonjs-playground.com/#21HAJZ#1

1 Like

@sharp yesss it works :blush: :blush: :hugs:

Thank you

Anes

2 Likes