aldin_abdagic

switch between active camera?

Recommended Posts

I'm new to babylon.js and javascript. I really need swich camera on button click. I typed in the code but there is a problem when I click on another camera (camer2), then the object does not rotate, and if I click on camera1 it all works normally. Where I'm wrong please help in the code.

Thank you very much.

 

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Babylon.js sample code</title>
        <!-- Babylon.js -->
        <script src="https://www.babylonjs.com/hand.minified-1.2.js"></script>
        <script src="https://preview.babylonjs.com/cannon.js"></script>
        <script src="https://preview.babylonjs.com/oimo.js"></script>
        <script src="https://preview.babylonjs.com/babylon.js"></script>
        <style>
            html, body {
                overflow: hidden;
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }

            #renderCanvas {
                width: 100%;
                height: 100%;
                touch-action: none;
            }
			
			#control{
			    width: 100%;
                height: 50px;
				z-index: +1;
				position: fixed;
			}
        </style>
    </head>
<body>
     <div id="control">
	     <button id="front">Front</button>
		 <button id="top">Top</button>
	 </div>
	 
	 
    <div id="canvasZone">
        <canvas id="renderCanvas"></canvas>
    </div>
    <script>
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, true);

        var createScene = function () {
            var scene = new BABYLON.Scene(engine);
        
            //Adding a light
            var light = new BABYLON.PointLight("Omni", new BABYLON.Vector3(20, 20, 100), scene);
        
            //Adding an Arc Rotate Camera
            var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0.8, 100, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, false);
			
			var camera2 = new BABYLON.ArcRotateCamera("Camera", 1.5, 0.8, 130, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, false);
        
            // The first parameter can be used to specify which mesh to import. Here we import all meshes
            BABYLON.SceneLoader.ImportMesh("", "scenes/", "skull.babylon", scene, function (newMeshes) {
                // Set the target of the camera to the first imported mesh
                camera.target = newMeshes[0];
            });
        
            // Move the light with the camera
            scene.registerBeforeRender(function () {
                light.position = camera.position;
            });
			
			var front = document.getElementById('front'), back = document.getElementById('top');

             front.onclick = function(switchCam) {
				    scene.activeCamera = camera;
        		};
				
             top.onclick = function(switchCam) {
				    scene.activeCamera = camera2;
        		};
			
        
            return scene;
        }
        
        var scene = createScene();

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

        // Resize
        window.addEventListener("resize", function () {
            engine.resize();
        });
    </script>
</body>
</html>

 

Share this post


Link to post
Share on other sites

I find solution :)

var camera2 = new BABYLON.ArcRotateCamera("Camera", 1.5, 0.8, 130, BABYLON.Vector3.Zero(), scene);
            camera.attachControl(canvas, false);


muts chenge to; 

var camera2 = new BABYLON.ArcRotateCamera("Camera", 1.5, 0.8, 130, BABYLON.Vector3.Zero(), scene);
            camera2.attachControl(canvas, false);

 

Share this post


Link to post
Share on other sites

Hi AA.  Nice find!  You have good eyes.

Here's a playground demo that might be interesting. 

http://playground.babylonjs.com//#A4HF3#7

A property... scene.activeCamera is rather important.  It chooses which camera to use. 

The code in lines 98-100... switches the camera every 10 seconds.

In other projects, you may wish to use a keypress or GUI button... to change scene.activeCamera.  A useful property, indeed. 

Note:  Don't accidentally confuse scene.activeCamera with scene.activeCameras.

Ok, party on!

Share this post


Link to post
Share on other sites

Hi again! 

YOU will become good in coding, too, IF you do research and experiments.  :)

It's easy.  BabylonJS is easy to learn, and it promotes JS learning... wonderfully.  This is because BJS makes it easy and quick... to make beautiful scenes.  It has a great results-per-learning ratio/quotient.  You'll be a BJS pro very quickly, as others have, and have great fun doing it.  Now, off to work we go:


In the Babylon GUI docs, in the Events section, there is a nice playground link.  It has a button with an onPointerDown "observable".

We can copy some of that code, and put it into other projects.

http://playground.babylonjs.com//#A4HF3#8

Lines 98-122 add the button.  In lines 109-11, we tell the pointerDown observer to switch cameras if the button is pressed.  Easy, eh?

Currently, the button is center-screen.  You will need to do research to learn how to change button position.  ;)  Research is good.

You asked for a "nice transition".  This is a QUICK nice transition.  But you can also use ONE camera, and add various animations to it... that are triggered by the button.

With animation, and perhaps using BJS animation ease-in/ease-out features, you can "fly" the camera to a new location.  Then to another, and to another, all day long.

Animation... is a SMOOTH nice transition, but not as QUICK as the current camera switcher.

In this GUI, the invisible GUI "window" (called an advanced DynamicTexture) covers the entire screen.  But you can also "map" that "window"... onto planes and other mesh... just like using an emissiveTexture on a mesh's material. 

Sometimes, putting buttons or "control panels" onto a mesh/plane, and then setting plane.parent = camera... works nice.  Since the plane-o-GUI is parented to the camera, its turns and moves WITH the camera... and thus is always in-view to the user.

All in all, you will notice that advancedDynamicTextures can be created in TWO different ways.  One way, for full-screen work-area.  The other way, for mapping onto a mesh as if it were a standard texture.  AND, doing both ways, or MANY OF both ways... all in the same scene, is allowed and encouraged.  Cool, huh?  In this playground, lines 154-158, there are SIX made-for-mesh advancedDynamicTextures being used (one for each ring-of-text, each mapped onto invisible spheres).  Wow, huh?  Freedom to go crazy!  :)

  :)  Hope this helps.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.