Manually rotate ArcRotateCamera around target

[royibernthal]

I'd like to manually rotate my ArcRotateCamera around the target by code, taking into account the radius of the camera.

It should imitate how it works with user control when camera.attachControl(canvas, true).

e.g. something like camera.setRotation(Math.PI, 0, 0) - which doesn't exist.

How do I do that?

[max123]

inside render loop:

myCamera.alpha += .01;

[royibernthal]

Thank you

[Wingnut]

Hi guys.  Although off-topic, you can "go weird", and orbit a freeCamera around a .lockedTarget, too.  (or continuously set camera target in the render loop... instead of using .lockedTarget).  Let's try the .lockedTarget method:

http://playground.babylonjs.com/#1TKWSG#0

It takes a little sine and cosine stuff in the render loop, but still fun.  I always go to our playground lights demo... (line 58)... to borrow that sine/cosine orbiting code (from Deltakosh).  It works for orbiting ANYTHING... mesh, lights, cameras, etc.  It would be nice if spotlights had a .lockedTarget, too, but they have a workable .setDirectionToTarget(mesh.position) that can be repeatedly called in the renderLoop.

http://playground.babylonjs.com/#Y8WGP#11

This is an interesting playground.  Allow me to take us on a tour:

Line 22 - Fun.  Sometimes, blue is a wimpy color.  Here we see the spotlight (light2) with a blue component of 6!  Essentially, an illegal value, but it works great for extra blue-ness.  All BJS color3 and color4 ... can use "souped-up" over-coloring, like this.  It helps tooty-frooty-up the scene colors.  heh.

Lines 26/27 - The light cone.  First I rotate the cone to match the spotlight (line 26), and then "bake" that rotation into the cone (line 27).  Doing that... "naturalizes" the cone's current rotation (in this case, to match the spotlight's natural .direction).  Whenever you rotate a mesh, then do that .bakeCurrentTransformIntoVertices(), it keeps the mesh rotated as it is, but sets all its .rotation values to 0,0,0 again.  It is much like re-modeling the cone... to make it "naturally" have a different default rotation... even while maintaining a rotation value of 0,0,0.  Cool, huh?  Needed... to make the cone match the spotlight.

Line 60 - This is saying "Don't let light1 (a directionalLight marked with yellow sphere) add to the lighting of the torus."  In this case, I ONLY want the spotlight (light2) to light the torus.  But, light1 is STILL creating the black shadow.  This is what the user wanted... when this playground was assembled.  Cast shadow with light1, but don't affect the torus material color.

Line 68 - inside the renderLoop.  There's our now-familiar orbiting line... using a variable named alpha instead of the orbit variable we used earlier.

Line 70 - there's that .setDirectionToTarget(mesh.position) that I mentioned earlier (available on all light types that use a .direction property).  When put in the renderLoop, it "acts" like a .lockedTarget for our spotlight.

Line 71 - Because we "naturalized" (baked) a rotational-transform into the light cone, now we can use the handy .lookAt() function/feature found on all mesh.  Easy.

Line 72 - this keeps the orbit moving.  It's easy to accidentally forget.   Be careful, here.  This line is changing the variable named alpha, and NOT the .alpha property on the arcRotateCamera.  This is why I used orbit in my earlier example... to avoid any confusion.

Tour complete.  I like follow-spotlights with light cone gizmos attached.  They remind me of the light in the guard tower... in the Hogan's Heroes TV show.    Be well, guys.

[royibernthal]

I learned a few new things

[Wingnut]

Good.  One more little secret.  Let's look at this PG for a moment:

http://www.babylonjs-playground.com/#1HQPOD#9

You see three spheres, rotating via the renderLoop (lines 89-91), (just like Max123 showed us), but how are they orbiting?  Why aren't they rotating around their pivot point in the middle of each sphere?

Well, let's look at lines 18, 21, 24.  setPivotMatrix... or in other words, move the pivot point.  THAT's why they appear to orbit.  Cool, huh?  Although setPivotMatrix is the "approved" and shortest method of setting a mesh pivot point, there is another way.

http://www.babylonjs-playground.com/#1HQPOD#12

Why do something with ONE line of code... when you can use THREE lines, right? 

Check out lines 19-21, 25-27, and 31-33.  Hey, there's our bakeCurrentTransformIntoVertices() used once again.  I .positioned the mesh away from 0,0,0 (often called origin)... then baked, then moved them BACK to origin.  It is another way to move the pivot point (the center) of a mesh.  bakeCurrentTransformIntoVertices() is quite a handy feature. 

Now forget that I showed you this, because setPivotMatrix() is better and shorter. 

What's that?  You say that we did rotation baking, and position baking, but now you want to try scaling baking?  Ok, here we go.

http://www.babylonjs-playground.com/#1HQPOD#13

Lines 23-25... up-scale the Y axis by 4, do the bake, report the current scaling to console. Console says { x: 1, y: 1, z: 1 }.  Naturalized!  The baking... reset the scaling values to 1, 1, 1, but our sphere stayed tall.  Coooool, huh? 

You probably know all this already, Royi.  Sorry.  I hope you don't mind me trashing your thread with yet another "Wingnut finds something fascinating" yap-fest.  Sometimes I get into "tutorial mode" and lose control of my brain.    I really don't like the authoring interface to the BJS docs system.  It has a workflow akin-to putting a concrete block into a champagne glass, imho.

Ok, time for Wingnut to .bakeCurrentChickenPotPieIntoOven().  Party on, everyone!

[royibernthal]

Interesting