Jump to content

Proposel for the FreeCamera


Recommended Posts

I tried to switch between a ArcRotateCamera and a FreeCamera. Well thats really easy to do. But I wanted to have a smooth transition. For example when switching from Arc to Free I need to tell the Free Camera the position (position of the Arc Camera) and direction (target of arc camera - position of arc camera).

Now my problem was i couldn't find any "direction" property. But what i found was a method inside the TragetCamera called "setTarget(target)" which calculates the rotation from cameras current position, upVector and the passed target vector.

I just copy pasted that function to the FreeCamera and it works just fine. Maybe for the next Version such a functionality would be nice to have also in the FreeCamera.

Link to comment
Share on other sites

Ups missed that inheritance. Than of course everything is totaly fine, sry!

So to make at least some sense out of this post, here is the code that makes smooth transition between FreeCamera and ArcRotateCamera (of course when switch back to Arc, the Direction jumps to the target (which in this case is at (0,0,0).

//User wants to have the free Camera
Game.prototype.useFreeCamera = function(){
    this.cameraFree.position = this.cameraArc.position.clone();
    this.cameraFree.setTarget(new BABYLON.Vector3.Zero()); //If target is not a (0,0,0), exchange with target position
    this.scene.activeCamera = this.cameraFree;

//User wants to move around with the Arc Rotate Camera
Game.prototype.useArcCamera = function(){
    this.scene.activeCamera = this.cameraArc; 


Link to comment
Share on other sites

Hi guys!  Interesting quest, Jodo!  Can I ask a question?

While using free camera (mode), are you (maybe) going to allow the user to click on a mesh, and then that mesh becomes the new target if/when the user switches to ArcCam mode? 

I'm just thinking, mostly about moving the Arc cam target... possibly to make it APPEAR as if the Arc cam turned into a Free cam, even though it really didn't.  Hard to do, though.  Forward and backward, not so difficult (move target closer/further from cam).  But Free cam-like panning left/right/up/down using an Arc cam... erf, not so easy.

Also thinking about... sometimes setting the free cam as the arc cam's parent, and sometimes reverse.  *scratch scratch*.  Maybe that would be helpful, somehow.

The hard part, is what you mentioned.  Changing from free cam to arc... will immediately change the camera direction, and without easing/animation, that is certainly not a "smooth transition", is it?  Hmm.  It almost seems like... when you switch from Free to Arc, you would set a NEW target point somewhere out in front-of the free camera, and then change to Arc, and set that NEW target point for the Arc.

In a way, this is a "smart" Arc cam.  It would try to determine WHAT the free cam was looking-at, and use THAT point as the Arc's target.

BJS has a thing called layers, which allows you to put a background image on the scene.  But layers don't allow picking-upon, and therefore you can't really use them as a ray target.  (Here I am trying to figure out HOW the Arc cam will establish a new target... IF the Free cam is sort-of aimed at the sky... at the time the user switches from free to arc.)

Like I say, smart Arc cam, maybe.  This thing tries like hell to determine a new target whenever it goes active, and it analyses the hell out of the free cam... to try to figure out where to set Arc's target.  Even if the free cam is aimed at NOTHING, shooting to the sky...  this smart Arc cam sets a target in that direction (but on the ground if there IS a ground, and at SOME kind of sensible .radius). 

Then, even cooler, it slowly animates the target (possibly an invisible mesh)... from the sky, to the ground.  (No violent "snap" of re-targeting when user changes from free to arc).

Weird.  An Arc cam that would gently animate to a new target IF it could derive one from whatever the user was doing with the free camera... and if it can't derive a decent new target, revert (gently animated) to it's previous target.  Cool challenge.  :)  *scratch scratch*  It makes me think. (which usually isn't healthy, for me)

Just maybe... take an Arc cam and overload the hell out of it... with your own funcs... turning IT into a free cam as wanted, with pure force.  :)  Jodo's Hybrid Cam.  :)  When it switches to free cam mode, you create a free cam to use as the invisible gizmo parent for the arc, freeze the arc's .alpha, .beta and .radius, and let the free cam gizmo do the Arc's positioning.  (Looking thru one cam, controlling with another?)  I dunno.  Crazy fun, though!  Sort of reminds me of a phenomenon called "behaviors".  Temporarily DE-attach the Arc cam's behavior module, and snap-on free cam's behavior module.  Interesting!

Link to comment
Share on other sites

So i hacked a little something together in the playground: http://www.babylonjs-playground.com/#1FYQKN#22


  • When clicking on a box (no matter which cam is active), the camera switches to Arc Cam and rotates (animated) to the target while cam position is in place
  • When switching from Arc to Free, the camera stays just in place and you can now move aroun with the free cam
  • When switching from Free to Arc, I look for the Mesh (boxes) with the closest distance and rotate there (animated) while camera position is in place
  • Active Box is highlighted in green

you can switch camera with the "c" button


A little problem I had with the playground: When registering key events... everytime i press run, the same key event gets registered again which is really anyoing. I had to save and reload the page everytime :/
Is there a workaround for that?

Link to comment
Share on other sites

Fantastic playground, Jodo!  You have accomplished smooth transition for camera switch.
Take a look at http://playground.babylonjs.com/?18 lines 123-127.  scene.onDispose is the way you can revert things before unload.

http://playground.babylonjs.com/#1FYQKN#23  lines 328-330 should get good results.

Coooooool code, Jodo!  Nice work!  I bookmarked it twice! 

Value-Added Notes: :)
Some folks put added HTML into the playground's id=canvasZone DIV.  Take a browse to http://playground.babylonjs.com/#YIT1S#14

Line 7:  This gets a ref to the canvasZone div.  If you list the Playground's HTML source, you'll see that the canvasZone div has one child node... the canvas element itself.  SO, if you want buttons/readouts/inputs ABOVE the canvas, the canvas needs to happen AFTER those.

Lines 87-89:  Remove EVERYTHING from the canvasZone container.  There is probably a DOM command that can do insertBeforeFirstChild, but a cleanout and rebuild of canvasZone's element-order... works, too.

Lines 91-96:  Add a pile of HTML to canvasZone container.

Line 98:  Return the canvas itself to the canvasZone container as the last item.

Now look at lines 75-77 (in the scene.onDispose func).  This removes HTML nodes from the canvasZone container until there is only one node remaining, which is the canvas.  Clean-up!  :)

JQuery is within scope of our playground, too.  Another person's playground can be seen using jQuery power at the top of their PG code.  I'm not sure what the user's objective is, but I just wanted to show you that jQuery is certainly active and sometimes used for similar things.  Party on!  Thx again for the cool playground/code!

Link to comment
Share on other sites

Thanks for the infos!

While creating the playground I was actually thinking about ... hmm how could I put some HTML elements in the playground to show which camera is active or to switch it with a button. Its like you could read me mind :D.


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.

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.


  • Recently Browsing   0 members

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