Switch camera to zoom on mesh

hi according to my pg : https://www.babylonjs-playground.com/#IX12S2#14
I want to zoom on the collar. on click
I’ve been trying for ages to change my camera but I can’t, if you have an idea
thank you.
ps :im building a configurator so when i need to change the collar i need to zoom on it



There’s a beginning… uses BabylonJS actionManager to watch for click on shirt breast, and move camera target to collar. Another click on shirt breast… camera target moves back to shirt main mesh.

I was trying to fig a way to zoom-in on collar when click, and then zoom out to full shirt again… but I haven’t yet figged it, and I’m out of time. This should get you started towards more success, though.

The shirt model NEEDS a root (master parent mesh/transformNode). I made one… but… there are some positional offset problems. Root SHOULD be in center of shirt… and it isn’t. Perhaps more adjusting inside modeling software… is needed.

Sorry, no zoom on collar yet, but we have click sensing via actionManager, and camera target “centers-on” collar. That’s a start. Good luck.


good to see you here wish you be careful in this situation


Goot to see you, too, Naz. Take good care of yourself and each other, and the same goes for everyone.

IIyes - here is another camera-animating monster. https://www.babylonjs-playground.com/#3U658N#38

Note: Version #37 and #39 might work better. I tried a DIFFERENT way of calling forceRebuild() in version #38, and it MIGHT have problems. Version #39 reverts back to version #37 method of calling forceRebuild().

Lines 157-177 are some “when animations finished” functions… things that might be handy for you, someday.

The camera and cameraTarget animators/positioners… start at line 180. There are two primary animation functions… a camera TARGET animator at line 180, and a camera position animator at line 191.

The 7 “dynamic HTML” buttons… when clicked… activate 7 click-handler functions… in lines 200-231. These allow precise camera and camera target positioning… based-upon button clicks instead of shirt clicks. I think this could be useful for you, because… you might do adjusting on many parts of the shirt.

These are HTML buttons… and some projects won’t like HTML buttons. BabylonJS has ANOTHER type of buttons available… using “GUI 2d” (and GUI 3d) systems. Use the Babylon GUI - Babylon.js Documentation

Personally-speaking, I think it would be wise to change these HTML buttons… into being GUI 2d buttons. When myself and a friend built this playground, my friend wanted to use HTML buttons, so we did so. :slight_smile:

As you can see, moving the camera around-upon the model… is challenging. IF/AFTER you get a good “centered root” mesh/node (a master PARENT of all other mesh of the model)… you might later learn that it is easier to move the mesh (root) instead of the camera. You could move/animate the “root” (master parent) until the collar is in front-of camera lens. Then move/animate shirt root until cuff is in front of lens, etc.

Everything is possible. To “inspect” the mesh/lights/cam “nodes” of a BabylonJS scene, you can use the “Inspector” feature, available by clicking the gear-shaped icon at top of playground, or available as an extension for home projects. The Inspector is a wonderful tool, and it allowed me to find the names of all your collar mesh… yesterday.

NOW you have plenty of things to study and play-with… should keep you busy for some time. Good luck… you’re on a high-speed train to success, now. :slight_smile:

Here’s another forum thread… where we clicked upon various parts of a helicopter model… and moved the camera around. https://forum.babylonjs.com/t/actionmanager-with-assetmanager-and-camera-pivot-points For one of the demos, we put an actionManager on every piece of the model… 74 pieces… 74 actionManagers… if I rem right. Gruesome.


Thank you Wingnut. I’ll try. Thank you very much.

1 Like

if you don’t mind, I’d like to know the exact position next to the collar.
and the initial position of the camera
ps : I use script typescript and not js (Im building a configurator using angular and babylonjs)

Hi again. In this type of model, all “vertexData” is used.

First, let’s web-browse the actual .babylon file. Click the link below.


Now, in that browser window, use your control-f (find inside this document) to search-for the term name.

Keep hitting F3 after each FIND of the term name (mostly near bottom of document). You can see… that the so-called sub-mesh of the shirt… are EACH positioned at 0,0,0. Useless values for you, eh? nod.

So, for this type of model, we will use boundingInfo().boundingBox.center


Look at JS console. There are all the boundingBox centers. YAY!

Those positions are generated by line 19 … item.getBoundingInfo().boundingBox.center

That should get you rolling again. You can delete line 17. It is not needed, but interesting. Good luck!

1 Like

thank you for helping me,
take care of yourself and stay home <3

1 Like

Hi again, friend. I saw your PM to me, and … it’s a good question…

  • How do we EASILY do all basic “transforms” for this darned shirt model? (scaling, rotation, and position entire shirt model… with few lines of code).


Lots of stuff done.

Line 22 - created a transformNode, which is like a basic box mesh, without geometry. A transformNode has basic transform properties… position, rotation, and scaling, and since its children inherit those values… it CAN BE a great parent to other meshes, and we will soon make it so.

Line 24 - moved all scene mesh 90 units along X. (a side-slide… trying to remove the default -90 X units from the shirt model pieces. Almost EVERYTHING in the model… was X-centered-upon -88 to -90 X… which sucks.)

Line 25 - moved for same reason… -25 along Y axis. (a down-slide… for vertical center-up alignment)

Line 26 - “bake” each item’s current transform (its position, rotation, and scaling) into vertices.
This resets all position, rotation numbers to 0,0,0 and scaling numbers to 1,1,1 which are all default values. All position numbers of all scene items… after the baking… are 0,0,0, which is the SAME position as the “transformNode” called root.

So, root, and all imported scene mesh… are now at 0,0,0. THUS… root, which is soon to become the master parent of ALL other scene mesh… is in the center of the shirt. Lots of work to get it there, eh? )

In other words, even though we side-slided (90 units on X axis) and down-slided (-25 units on Y axis) all the meshes in the shirt… we now will reset all their position numbers… to 0,0,0. A “bake”. :slight_smile:

Line 27… make the transformNode called root… be the parent of each shirt-piece. YAY!

I think we now have the model “cleaned” fairly well, but assistance from pros ALWAYS welcome.

Line 86… up-scales the entire shirt… 3 times larger. YAY!

Activate line 91… to rotate the root… slowly. It looks nice and centered. root, which is our new master parent (sometimes called a handle or gizmo) of ALL shirt mesh, is centered within the shirt’s volume. From now-forward… you can position, rotate, and/or scale root, and all parts of the shirt… will do the same… and stay “proportional”. YAY! Parenting/rooting is cool, huh? All models should have one… to make life easier for us. :slight_smile:

Look at console, where we printed-out all the centers of all the boundingBoxes (done with lines 30-34). All the boundingBox centers… no longer have that -88 and -89 crap. They are all, near 0 on the X axis. SOME minor tweaking could be done in lines 24 and 25… like maybe change 90 into 89 or maybe 91… etc… but… the new master parent is almost “dead center” in shirt… and this should make life easier, Ilyes.

Now you have a shirt “root”. Scale, rotate, and/or position the root, and the entire shirt should follow-along. I hope this helps. I think it will. I left a lot of “litter” in the playground… maybe it could use some cleaning.

Have a great weekend, Ilyes and other forum friends.


thnx my friend , but i had this error
Property ‘bakeCurrentTransformIntoVertices’ does not exist on type ‘AbstractMesh’.ts(2339)

That is a correct error report. It is declared upon mesh.ts. Is your TS-based shirt… somehow different than the shirt we are using in the playground?

I know almost nothing about TypeScript, sorry. Keep watching for more replies from TS experts who might know why this is happening.

I remember a little bit about casting from Java programming I did YEARS ago. Have you used “as AbstractMesh” somewhere in your code… where you should be using “as Mesh”?

Another possible “thing”… SceneLoader.Append is really quite old/outdated. I think you should switch to the much newer and nicer AssetsManager. Doing that… might ALSO prevent the shirt from being cast/classed as an AbstractMesh, and instead be cast/classed as a Mesh.

No promises. Just some ideas. :slight_smile: Stay patient… other forum helpers are nearby and many are experts in TypeScript issues. Sorry I wasn’t more help.

1 Like

Your error must be at:



That because scene.meshes is an array of AbstrachMesh.

As @Wingnut suggested, just cast with:

(item as Mesh).bakeCurrentTransformIntoVertices();

thanx friend it work , now ti move the camera front the collar , i move the root and not the camera right ?
i was doing this
changecameracolpostion() {

var speed = 45;
var frameCount = 200;
this.animateCameraTargetToPosition(this.camera1, speed, frameCount, this.col.getBoundingInfo().boundingBox.center);
this.animateCameraToPosition(this.camera1, speed, frameCount, new BABYLON.Vector3(0, 0, 0));


1 Like

Yeah! Well thought! You now have the option to move the root instead of camera… which should make life easier for ya.

Camera .position and .target moving (and sometimes needing to adjust camera.radius and camera.fov)… can be painful, eh? :slight_smile: Yep yep yep… you are on a better road now, I think.

And thx to @Evgeni_Popov too… he is SUCH a hero of mine (the guy is way way smart, and nice. I love having him nearby.)

He and @sebavan could be brothers… both super-nice super-stars. We have a rather large group of those type… around here (including chief architect Deltakosh)… and I’m proud/honored to be allowed to hang-out with them.

Off-topic: Now, if we could JUST get the “disappearing cursor” problem fixed in this forum editor (maybe Firefox only)… we’d be sitting pretty. Ilyes… can ya visit the Discourse Forum Software people, join their forum, and bother them until you get THAT problem fixed for us? heh. PLEASE? :smiley: (I’m off topic, but it’s been happening forever and it is just as annoying… as ever).

I think… @JohnK is the only one who has confirmed the problem existing… but that’s plenty of verification for me. John might also use Firefox normal or ESR. Comment freely, John, we’ve already messed up Ilyes’s thread, here. :slight_smile:

MAYBE we have something set oddly in our Firefox about:config… but… I haven’t yet discovered why it happens. Help john and I find this problem, Ilyes… and you will become a super-hero, too. :slight_smile: Deltakosh can’t do much, locally, as it is an issue with the Discourse software, and this forum uses a STOCK version of it.

It seems… the forum editor-window changes window focus sometimes… focusing to the preview window on the right. When it is time to set focus back to main editing window… it sort-of fails. Often, I can click on text in the preview window, then click text in the editing window again, and the flashing cursor returns… for a little while.


thank you all , one last thing
Can I take this pg
as an example?
to move the root … to the collar and
put it back on afterwards?

I see no reason why not. (Nice of you to ask!) You can use the 3rd icon… download ZIP option.

SOME of the “ideas” in there… such as the names of the buttons… are from user @aldin_abdagic … but most of the code was made by me. Feel free to take it… use it freely… have a good time. :slight_smile:

Note: I’m not a very good programmer. You might wish to improve/change the code. :slight_smile:

You might wish to download this one, too: https://www.babylonjs-playground.com/#HH1U5#88

There, I made some “utility animation functions” … in lines 2-50. They are “called” from lines 122-138.

Although they are “overloads” put-onto AbstractMesh, they could easily be changed to Mesh class, if wanted. They can be modified easily, too… and they each use the VERY easy-to-use BABYLON.Animation.CreateAndStartAnimation() feature/method… WITH “easing”.

Although not used in THAT example playground, an onAnimationEnd can be added to the end of each CreateAndStartAnimation() line. Just add the name of an already-declared function… after the ease parameter, and then THAT function will run… when animation is complete.

It is OFTEN handy to have an onAnimationEnd function… very useful.

Again, that is mostly MY probably-bad coding, and “overloading” is not always wise… or maybe NEVER wise, and maybe not possible in TypeScript… but it sure animates easily and nicely. Be well.

Link to OTHER playgrounds that might use those utility animators: Babylon.js Documentation

Hi again. I once used a spinTo overloaded animation function on an arcRotateCamera, too, apparently.


Goofy… but it works. It’s not click-driven like the actionManager camera-animation in some of our earlier playgrounds, but I think it’s still interesting.

Line 76… I spintTo() the arcCamera .beta.
Lines 78-82… spintTo() arcCamera .alpha.
Lines 84-85… spintTo() arcCam .radius.

Weird. SetTimeout used as a time-code-based event-sequencer… SO abusive. heh. Makes me proud.

Hi, i need a feature like this but unfortunately pg not working. Do you have any working playground for this functionality?