Animate Camera around point

[michaeltrim]

Does anyone know a simple playground example of animating a camera around a fixed point.

So camera always looks in at single point, but rotates 360 around that target.

[Wingnut]

Hi @michaeltrim.  Here's our camera tutorial.  The big picture in there... is a diagram about the arcRotateCamera... it "orbits" nicely.  By continually changing the alpha value of the arcRotateCamera, it will orbit around its target.

Let's take a look at a BJS Playground demo scene, that helps us see it happen.

http://playground.babylonjs.com/#QRBXF

Our camera is nicely orbiting the torus, right?  Let's look at some code...

Line 4: That's our arcRotateCamera... being constructed.  Let's check out its params/args:

       var camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, 1.2, 50, BABYLON.Vector3.Zero(), scene);

1st param - name - "Camera"  (duh)
2nd param - initial .alpha setting... in radians.  A value of -Math.PI/2 sets the camera facing +z (common).  So does the setting shown above. 
3rd param - initial .beta setting... in radians.  A beta of 0 - camera looks straight down over north pole.  3.14 - south pole. 1.2?  You see it in the PG.
4th param - initial .radius setting... in radians.  Distance to target.  Rarely a negative number.  This is a distance - no need for neg numbers.
5th param - initial target... in vector3 format ( set to x:0, y:0, z:0 easily with our .Zero() func.  Could also use new BABYLON.Vector3(0.0, 0.0, 0.0)
6th param - the scene object to use - almost always scene. 

Okay, back to the playground editor window.  Look at lines 28/29.  I had to wait for torus to be created... in the code sequence... before I could do camera.setTarget(torus).  The arcRotateCamera target... is a versatile property.  It was initially set as a Vector3-type BABYLON.Vector3.Zero() but in line 29, we use a mesh (torus) as the camera target.  Nice, eh?  We can use torus (a mesh), or torus.position (a vec3), or new BABYLON.Vector3(x, y, z)... ALL will work!  Sweet!  

Ok, about the auto-animation. There's really two primary ways to animate... in BabylonJS.  #1 - the Animation system... a very powerful and versatile feature that comes with all the fun knobs and levers.  #2 - the render-loop wedge-in.  It is like a drive belt that you hook to the renderer... and borrow a bit of horsepower... to do fun stuff-with.  It's quick and easy.  We'll use that.

Line 71... scene.before_you_render_the_next_frame() { do this stuff.  hurry, and exit quick, so as to not load-down the scene } 

Okay, I'm just being funny.  The property is named scene.beforeRender... and when you bind that property to a function (as seen), that function will run... once per frame.  Don't put too many tons of code or load...  inside that func... it will hurt your frame rates.

So now we have our beforeRender() ready, lets add some code.  Line 72... camera.alpha... there's our orbiting property!  That += means add this value to the current value. If it were -=   ...then it would subtract that value, causing the orbit to travel in the opposite direction. 

In webGL/BJS, it takes about 6.28 radians (neg or pos) to make a complete orbit. (2*Math.PI).  A half orbit would be 3.14 radians, or Math.PI.  But you don't have to worry about breaking the camera when you hit +6.28 or -6.28 radians, because there are no stoppers.  Even if the camera.alpha goes all the way to 5000, it's all okay.  It has no practical limits - it just goes around and around. 

You might think of changing camera.beta with our render-loop-based camera animator (inside our handy scene.beforeRender func)... and feel free to make that change and hit RUN again.  The camera will quit its equatorial orbit and begin a polar orbit, and MIGHT flip-around when it passes the poles.  Experiment freely.  Have fun... save as often as wanted, you can't damage/overwrite other saved/pre-built playgrounds. 

Just bookmark your new URL... after each SAVE... so you can return to the fun. 

Maybe you'll try animating camera.radius, too (how close/far from target).  Wow.  Maybe animate all three properties at once!  Mad scientist warning!  Check out the lights demo at our playground... for render-loop-driven orbiting of spheres/lights... using animation just like we did.  Math.sin() and Math.cos() are GREAT fun when used in scene.beforeRender funcs.

Ok, sorry for the long reply.  Got more questions?  Ask freely.  Welcome aboard, party on!

[michaeltrim]

Hi @Wingnut thank you for the long reply! That's fantastic and I'm working through it now, I've managed to get a bunch of other things working with BabylonJS and am finding it a great framework to work with. Had assumed that ArcRotateCamera would do what I needed, but had not quite cracked it, having it explained so well is a real help, thanks again.