How switch the type of camera

@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