jodo Posted January 25, 2016 Share Posted January 25, 2016 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. Quote Link to comment Share on other sites More sharing options...
GameMonetize Posted January 25, 2016 Share Posted January 25, 2016 As Arc and Free inherits from TargetCamera I suggest moving this to TargetCamera Do you want to do a PR for that? Quote Link to comment Share on other sites More sharing options...
jodo Posted January 25, 2016 Author Share Posted January 25, 2016 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.cameraArc.detachControl(this.canvas); 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; this.cameraFree.attachControl(this.canvas); } //User wants to move around with the Arc Rotate Camera Game.prototype.useArcCamera = function(){ this.cameraFree.detachControl(this.canvas); this.cameraArc.setPosition(this.cameraFree.position.clone()); this.scene.activeCamera = this.cameraArc; this.cameraArc.attachControl(this.canvas); } Quote Link to comment Share on other sites More sharing options...
Wingnut Posted January 28, 2016 Share Posted January 28, 2016 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! Quote Link to comment Share on other sites More sharing options...
jodo Posted January 29, 2016 Author Share Posted January 29, 2016 Okay, thats a lot of input Some interesseting stuff so. Dont know if I understand everything what you mean ;), but I will play around a little bit and see what I can get, stay tuned! Quote Link to comment Share on other sites More sharing options...
Dad72 Posted January 29, 2016 Share Posted January 29, 2016 It could be useful to have in Babylon a BABYLON.scene.switchCamera(cam) ? it would change the camera with only a small function. Quote Link to comment Share on other sites More sharing options...
jodo Posted January 29, 2016 Author Share Posted January 29, 2016 So i hacked a little something together in the playground: http://www.babylonjs-playground.com/#1FYQKN#22 "Features": 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? Quote Link to comment Share on other sites More sharing options...
Wingnut Posted January 29, 2016 Share Posted January 29, 2016 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! Quote Link to comment Share on other sites More sharing options...
jodo Posted January 29, 2016 Author Share Posted January 29, 2016 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. Wingnut 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.