Move arcRotateCamera only under certain conditions

[Vousk-prod.]

Hello erveryone,

 

Is there a way to add some conditions to camera interactions, like predicate system in scene.pick ?

The idea would be to rotate the arcRotate only if the mouse is above one precise object, for instance.

 

Maybe I can add listener on my canvas, and attachControl / detachControl for the camera on the fly depending on my conditions, but that doesn't look so smart I think. And I'm not enough javascript's confident to know if it's an heavy ressource consuming way of doing that or not.

 

Any suggestion ?

[julien-moreau]

Hello vousk

 

To easily apply this kind of effect, you can use the Actions Manager.

You define an action manager on your mesh, add a trigger that is 'Mouse Enter' or 'Mouse Leave', execute a specific code or use an action named 'Arc Rotate On Object'.

 

You have a tutorial from Temechon here http://pixelcodr.com/tutos/plane/plane.html about the Actions Manager.

Don't hesitate to create a repro-case in the playground if you encounter some problems using the Actions Manager

[Vousk-prod.]

Hi Luaacro, I'm already using the ActionManager system for most of my objects interactions, that's a good idea to use it for this need, instead of adding a listener on the canvas, thanks for the suggestion.

 

To be honest my problem is more to enable and disable the already existing (and very efficient !) moving system of the ArcRotateCamera. I could easily make my own triggered action, which would change alpha and beta of the camera, but that woulnd't produce a movement as clean and smooth as BJS inner ArcRotateCamera mechanism.

 

I think to activate / deactivate the camera movement on mouse move regarding the conditions (triggered by the ActionManager, for instance) I can attachControl / detachControl on the fly. But this add / remove so many listeners on the DOM I'm asking myself if this is really efficient ?

So to be more clear my question should be : what is the best way to activate / deactive pointer responding movements of the ArcRotateCamera ?

[julien-moreau]

Hey I understand more your request !

In order to help you more, can you create a repro-case on the playground ? Then i'll try to help you on the existing system. Without this repro-case I think I'm not able to help you ^^

Thank you !

[Vousk-prod.]

Well, in fact the repro-case is really simple, an ArcRotateCamera, some objects, the goal is to move the camera only if the pointer event was initiated above a specific object, for instance the middle one :

 

http://www.babylonjs-playground.com/#AZH1L#1

 

My concerns are :

 

1. About performance : since the purpose of a scene is to permanently play with objects and move cameras, I think calling so often attachControl / detachControl is maybe too much ressource consumming. What do you think ?

 

2. I need a timeout before detaching control, because without it the movement is abruptly (and awfully) stopped (you can put 0ms to see by yourself). But this timeout doen't correspond exactly the delay really needed to finish the camera's movement (which depends on the pointer impulse), and for ergonomy purpose it would be intersting to give user the ability to still continue moving the camera without the need to click again the object if we are in the same "moving impulse" (ie. until the camera totally stops the user can continue movement by clicking anywhere in the canvas), maybe I can simply solve this with a function that check if the camera is currently moving. Any suggestion ?

 

Thanks for your time.

[Vousk-prod.]

Little update on the playground for my repro-case, better pointer management (if pointer is above object but no click happen, when pointer goes out the camera cannot be moved):

 

http://www.babylonjs-playground.com/#AZH1L#2

[julien-moreau]

Here some answers :

 

1. I think attachControl and detachControl are too expansive when better methods exist, then I think it's not the better solution ^^.

The right solution would be to create your behaviors directly with camera's properties. Like "angularSensibility" here.

 

2. Here a mix between canvas.event and ActionsManager : http://www.babylonjs-playground.com/#AZH1L#5 (starting at line 27)

It is the better solution I found ( By hoping Deltakosh will not kill me if there's a better way =P )

[JCPalmer]

You could sub-class ArcRotateCamera, but since all the _onEventMethods are private, you would basically have to copy the entire methods AttachControl & detachControl.  If you did you could add a boolean ignoreEvents getter / setter.  Each of the _onEventMethods could add this to the top:

if (this.ignoreEvents)    return;

This is kind of a big change, so think just stealing the whole class would be better than subclassing is safer.  It is Apache 2, for a reason.

[Vousk-prod.]

Oh, very smart piece of code !

I fixed just one little thing : triggered on Pick and not PointerOver anymore

http://www.babylonjs-playground.com/#AZH1L#6

 

At first I had to trigger OnPointerOver instead of OnPick because to actually move the camera would have required a second click (the first click attaches control, and only then we can move, with another new click), so I also had to add not-so-pretty mechanism to avoid attaching control when we only pass over the box without clicking. Your solution here had this same problem, if mouse hovers over the box, we can then move camera clicking anywhere on the canvas.

Your idea to modify angularSensitivity and not attachControl / detachControl is just perfect because we can now simply and clearly use OnPickTrigger, which 1. avoids the previously mentionned problem, and 2. makes the code touch devices compatible !!

 

That was the kind of idea I was looking for. Thanks a lot !