Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

switch between active camera?

aldin_abdagic

By aldin_abdagic,
in Questions & Answers

 Share

Recommended Posts

aldin_abdagic Newbie

aldin_abdagic

Posted
Posted

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>

 

Link to comment
Share on other sites
aldin_abdagic Newbie

aldin_abdagic

Posted
  • Author
Posted

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

 

Link to comment
Share on other sites
Wingnut Newbie

Wingnut

Posted
Posted

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!

Link to comment
Share on other sites
Wingnut Newbie

Wingnut

Posted
Posted

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...