Best methodology for customizing ArcCamera or building a camera behaviour

[croustibat]

Hello Babylon devs,

I'm new to babylon, I used to develop on the Unity framework, but my need to build good webgl apps led me to focus on Babylon js. My experience on html5 and JS is quite low, though.

 

So, here is my need:

I want to make a camera rotate around a target with a mouse drag (let's say button 0) witch is exactly what arc camera does.

I want my camera to translate (both camera and target) on an horizontal plane while dragging the mouse (let's say button 2)

I want all the movements to be smoothed

 

What I would do using Unity:

I would parent the camera to a node called 'target'

Dragging mouse button 0->rotate the target node

Dragging mouse button 2->translate the target node

Smoothing could be done by rotating and translating a node called 'target command' instead of 'target', and every frame make rotation and translation of 'target' interpolated values between  the 'target'  values and the 'target command' ones.

 

My questions:

Is this design compatible with babylon js paradigms?

Is there a most straight forward way to do that such as customizing the ArcCamera?

What is the better way to get the mouse drag input?

 

Thanks!!

[iiceman]

Hi croustibat and welcome to the forum!

 

If I understand you right, the arcRotateCamera can already do those things. Rotating (click and move the mouse - check), Panning (hold down CTRL and click and move the mouse - check)... and it's all smooth, isn't it? (can be adjusted with the camera.inertia value).

 

If that's not what you want let me know, because then I guess I misunderstood your question

[croustibat]

Hi iiceman, thanks for your answer!

In fact, I completely missed the panning functionality since it doesn't seem to be in the documentation nor on the tutorial!

But it's almost perfect for me, the only problem is that I need to pan on a horizontal plane (the one intersecting the arccam target) instead of a plane parallel to the screen.

Anyway, that's a far better start point than I thought.

Maybe that would be a good functionality to add  a plane axis parameter to the BABYLON.ArcRotateCamera constructor parameters? If I manage to do that, would it be accepted? I'm ok to try to modify the source, but if the modifications are not taken into account in the future updates of babylon, i'm gonna have a bad time

Perhaps it's even a better solution to create a new camera extending arcrotatecamera...

Ok, now is the time for me to have a look at the sources, I guess.

[croustibat]

After some work on other parts of my app, I returned to this camera customization work.

I just copy/pasted the babylon.arcRotateCamera.js commented the "var BABYLON;" renamed every "ArcRotateCamera" into "ArcRotatePanCamera", included it in my project and began the dirty work.

And I ended up with that camera. With almost no modifications.

 

http://www.babylonjs-playground.com/#1OIVT0#2

 

Left mouse: pan along the xOz plane

Right mouse: arcrotate

And a new function BABYLON.ArcRotatePanCamera.goToPosition that smoothly translates the target towards a given point until it's close to it (BABYLON.Engine.Epsilon)

A pointer down or gesture start event interrupts this behaviour.

 

I think this is an interesting cam behaviour for games such as RTS and similar. A smooth follow can be done with minor modifications of this version.

I'm pretty happy with that, unfortunately, there is a lot of duplicated code (99% at least) between this cam and arcRotateCamera, I should have made this new cam inherit from the arcRotateCam in order to make it maintainable, but my js skills kind of suck, and I didn't know how to do that, so feel free to explain me how to proceed!

[GameMonetize]

Just FYI, now the arcrotatecamera supports panning

http://doc.babylonjs.com/classes/2.2-alpha/ArcRotateCamera#inertialpanningx-number

[croustibat]

The arcrotate cam now supports panning, yes, but on a plane parallel to the camera's xOy plane, I wanted a panning on the world xOz plane to easily move the cam along a map, which is mainly horizontal, right?

You can try the playground I gave, and alternately replace my cam by the arcrotatecam to see the difference

 

Indeed, I just had to tweak the panning direction of the arcrotate cam to get the right effect!

[GameMonetize]

that was what I meant