Hello ,
I have many Object at my scene and i want to focus to the Object clicked with animation !!
Thanks for help :)))
Hi again, Issam
Here’s a little playground that works ok for that: https://www.babylonjs-playground.com/#VE33T#8
No actionManagers on the mesh, because it is using BABYLON.PointerEventTypes.POINTERDOWN to determine which mesh was clicked.
Lines 1-5 is a little “overload” method I put onto the arcRotateCamera… a simple animator for the vector3 in arcCam.target property.
If you want to allow click-on-ground to re-center the arcCam orbit pivot point, you can remove && pointerInfo.pickInfo.pickedMesh != ground from line 55… allowing the ground to be clicked, too.
Animation speed is last value in line 56, adjust at will. Also, the ‘120’ in line 4… can be adjusted. It is currently set for 120 frames.
Lines 60-77 are included but disabled, simply to show all the different triggers/events available… when using scene.onPointerObservable picking system. It is a “cleaner” system than putting actionManagers on every mesh… because… well… there could be MANY MANY mesh to click-on. (here is a 74 mesh, 74 actionManager helicopter with anim-to-clicked-target - gruesome, but works.)
Is this stuff… on-topic for your wishes? I hope so. SOME folks say “overloading” (like I did with camtarget animator in lines 1-5)… is… not so wise. It is a ‘customizing’ of arcCam… and can cause trouble when ‘standardization’ is a high-priority. Still, I do it all the time… because I’m a noob/child with dangerous power tools. 
3 Likes
Honestly you’re amazing @Wingnut always available for help
Thanks a lot for ur help 
2 Likes
2 Likes
You bet. ArcCam mousewheel always uses camera.target as its zoom-target. You could use an animation for cam.radius, easily.
https://www.babylonjs-playground.com/#VE33T#9
In THAT pg, I added another animator to arcCam… called moveRadiusTo - lines 7-11. I call it in line 63, just after the target animation call. It tries to set camera.radius to 25 units… on each click.
Should we try a THIRD animation… one for camera.beta… to lift the camera into the air a bit… on each pick? Here we go… https://www.babylonjs-playground.com/#VE33T#11
Lines 13-17 is the animator… called from line 70… always tries to animate the camera.beta to 0.9… on each click. So now we have three things happening on each click… a target animation, a radius animation, and a beta animation. Good BJS power, eh? nod.
1 Like
@Wingnut check this :
https://www.babylonjs-playground.com/#VE33T#12
1 Like
haha… we are thinking the same thoughts! COOOOOL! Nice work!
1 Like
yeaah same solution
resolved @Wingnut thannnnks
1 Like
hello again @Wingnut , i hope that u’re fine
https://www.babylonjs-playground.com/#VE33T#12
as you know, the right click is for the translation in the scene and the left click is the rotation of the scene.
1- is it possible to reverse the 2 events !!
2- I like to speed up the translation of the scene.
thank you very much
Hi again, issam… I am doing ok, thx. I hope same for you.
First, you might need this line (after camera is created):
camera.panningMouseButton = 0;
Then…
#1. camera.buttons = [2, 1, 0]; (should work) (default is [0,1,2])
#2. camera.panningSensibility = 30; (default = 1000)
I think that will all work. https://www.babylonjs-playground.com/#VE33T#14
Let’s listen for more comments, too, though. I could be telling you bad things.
Also, be prepared for possible “trouble” when your scene uses touch-screen pinch/swipe gestures, VR headgear/gloves, stylus pens, flight sticks, and/or gamepads. Not sure. You might wish to offer a game option… that allows users to choose swapped buttons… or not.
This thread might be pertinent, too: Input Manager to rule them all
We CAN make is so click-on-mesh (animate-to-mesh) only works for ONE of the buttons (it currently works for both buttons). But… I think that will require adding actionManagers to each clicked mesh… instead of using the scene.onPointerObservable seen in lines 64-96. The scene.onPointerObservable system does not have an exclusive (discrete?) event for right-button pick/click. BUT… I might not know all the power available with scene.onPointerObservable (such as advanced ways to filter/determine WHICH button did the clicking - sometimes called masking.)
2 Likes
thanks a lot @Wingnut
1 Like
hello @Wingnut , It’s been a long time, I need your help as usual with babylon.
in my scene , i need to add icone for gizmos ( like the picture) to manipulate actions for camera : rotate camera with this icon of gizmos and add a block to mouse actions. can u help ?
Hiya issam… good to see you again! I hope you are well. I’m a bit short on time, so let’s ask ALL HELPERS to assist on this issue. It is Saturday night, and many of us are at home… on our computers… so maybe we can get some team effort going, here.
I’ve had kind of a busy day, but after a short nap… I will visit again. I think those little icons… should be actual mesh… so why not “assemble” 7 mesh into that shape (6 cones parented to the box in the middle, and then add actionManagers to all 7 mesh… and add pointerDown PICK triggers to each actionManager… get the clicking working.
Maybe for now… just make each pointerDown trigger… output a console.log(clickedMeshName) as its “action”. You know… make console say “cone1 clicked” or “center box clicked”, etc.
Then after that is done and working perfectly… we can make each action do MUCH more. But for now… I’d make all 7 shapes… 6 cones parented to center box. Make them big for now, and in center of screen. We can down-scale the parent box later and reposition it to upper screen corner.
Activate your actionManagers with onPointerDown triggers (or whatever the official pointerDown trigger is called)… and set each action to be a console.log of WHICH mesh.name was just clicked. Easy. All upon-a-mesh actionManagers… have a trigger and an action.
Go study actionManagers… they are powerful and fun. Good luck. Other helpers will be nearby… all night long (or all day long, depending upon which side of the planet you live-on) PARTY!
1 Like
Looks amazing, @issam_abdelhedi and @Wingnut
2 Likes
I know that you are professional @Wingnut in these things for that I postulated this problem by what I am blocked on the creation of this icon and also the manipulation.
Thanks for the help
1 Like
But you are ready now, yes? You know how to make 6 cones… using createCylinder.
You know how to give them a material and how to set a diffuseColor on that material.
You know how to createBox.
You know how to set cone1.parent = box; and same for cone 2, 3, 4, 5, 6.
You know how to position and rotate cones AFTER each is parented to box.
AND, you don’t NEED to learn actionManagers at all, because of a cool feature called scene.onPointerObservable.
In no time, and with little effort, you could be on your way to success. Easy. (watch console to see which mesh was clicked)
To block mouse actions for camera movements, disable line 5. (don’t attach camera to canvas) . Maybe do that later, after your icon(s) are developed/tested. You might wish to change to a universal camera or free camera… possibly with .lockedTarget.
Good luck.
You’re in Tunisia, eh? Cool. Farming started there… around 5000 BC. That… is amazing! I was just a baby, back then.
1 Like
it’s to hard to create this 6 cones like that ? more than 2 days and no result 
Really? Sorry. Are you working with the playground I created? Or working in typescript? Or… what? Tell me details. TypeScript fighting with you?
Playground version… easy… https://www.babylonjs-playground.com/#A1210C#59 Just more cones, different positions, different rotations (and maybe a few Wingnut tweaks) 
I failed Algebra 1 in high school… 2.5 years in a row… so… I have issues, too. heh.
I took it a bit further… https://www.babylonjs-playground.com/#A1210C#63
Now you owe me a beer and some nachos.
2 Likes
like always i said you’re a king really 
i think that you deserve a factory of beer not one beer
thanks for help and i should now add action gizmos for this cones.
thanks a lot my freind .
1 Like