Making a "wobbly" ArcRotateCamera?

I have a camera that wobbles inside of a parent, and now I want the parent be the thing that points at and rotates around a set target. I can’t figure out how to merge what I have w the rest of the ArcRotateCamera behavior. Any ideas, or another way to approach this?

Hello @jonarnold ,

I quickly checked your PG this morning and first thing I noticed is that you were using a Free cam. But from your question above, I assume you actually want to go with the arcRotateCamera, yes?
In case, 'Hope this helps:

You may also want to check this PG

and these parts of the doc:

Have a great day,

Edit: I realize I didn’t give you the last part for your wobbly effect on the arcRotateCamera, but I guess you’ll figure it out with the examples. There are different ways you can do the effect which offsets the focus on the target. The base idea is to move/offset the X,Y, Z position of the camera target. You can do in an anim or using registerBeforeRender. You can also add a move on the camera ‘radius’ to add movement in depth. In any case, if you use a node/parent for a free cam, you cannot expect your parent to behave like an arcRotateCamera or the other way round. Or you would need to set it all up. Sounds a bit complicated for this simple scenario.


Hi @mawa thank you so much for the reply. Your PG is closer to what I’m shooting for, but I’m specifically wanting the camera to wobble around its own local center/pivot while able to orbit around another object. I’ll read up on the links you sent and perhaps take another whack at this. Thanks again.

I guess I do not have the entire scenario with this PG. Say your camera would actually be attached to a head. It would be a free moving camera (with wiggling or ‘wobblying;)’, anyways, attached to the head and with limits, of course:)… you can do all that, no worries. I just wanted to point that, in essence, you have to use the right instructions and parameters for the camera (or parent or whatever;)
Next, there is the human eye and the methods you can use: With BJS likes frameworks, there are often many methods you can use (all with pros and cons). I guess you know that;)

So right now, you think the arcRotateCamera should move on its local axes around its pivot, but at the same time it would also loose focus (or offset) on the target? Correct? Like some shaking after an explosion, is it? Again, all can do. May be play around with it a little and if stuck, post again (possibly with PG). GL and welcome anytime :smiley:

Here’s a rough visual of what I’m shooting for (and not shooting for). Do you think I’ll need to build this from scratch?

No, I don’t think you need to redo or use another type of camera, if the arc rotate camera behavior is what you want in the first place. A camera that rotates around a target with zoom/move in and out. Your first visual shows basically what I gave you in the PG. What your second visual does not show is that the arc rotate camera always works with a target. If I would add direction to your second visual, we would see that the focus/direction actually offsets the target. So, to solve this and reproduce very close to your initial effect with an arcRotateCamera, I would simply work on animating the target. It doesn’t have to be a visible target, just coordinates and an anim or ease. The combined effects of what we have now + the animated target should give you the final effect you want.


yeah…I see what you’re saying, and it’s a clever approach. But the wobble intensity would be relative to how close the camera was to the target – close up, lots of wobble; far away, not much wobble. I’m sure I could factor in a distance multiplier, but that’s starting to feel messy. I’m going to keep plugging away at this but I’ll keep the “moving target” idea as a fallback. Thanks for helping me think this through and for the suggestions!

This idea just popped into my head, no idea if it’s sensible or not but maybe altering the upVector might have an effect ArcRotateCamera | Babylon.js Documentation

As I said there are multiple approaches. Personally, I’m a designer and I like things simple. An ENG would probably have a different approach.
Here is a quick PG update adding a moving target.

I simply copied this part from the pivot anim example (‘’)
so you would need to do some set-up/fine-tuning to have your effect. You can also add camera angular and inertia parameters to further improve and smooth the effect. I guess the point is that using this kind of approach, it is also very easy to handle the effect, remove it, change target, etc… But I guess you can also do all that playing with things such as the vectors of the camera and more complex stuff. I guess it all depends on your needs VS efforts. Have a great day,

1 Like

Sry, I guess I disregarded this part. The answer for an arcRotateCamera: You will want to play with the ‘radius’. Simply add ‘radius’ to the current anims/variables and increase/decrease the ‘woobly’ attitude/intensity of the camera (also) depending on ‘radius’ (or in other words, depending on how close you are to your target. You will use ‘radius’ (yes, as a multiplier) for your effect ‘intensity’. I don’t think this will be messy. But then again, others may have a better solution…

@jonarnold now had chance to try the upVector method Babylon.js Playground

Thanks @JohnK. Unfortunately I think that might be too jittery for what I’m shooting for – I’m going for a smooth handheld camera effect. :slight_smile:

@mawa I’m warming up to the moving target idea simply for the ease of it.

If you want a really smooth effect, consider adding easing and/or working the inertia.
Feel free to post a later version PG to fine-tune the effect. GL,

It works. Kind of paranoïde right now;) but it works. @jonarnold Again, no matter the method, you will need to work the update speed, transition/ease and lower and max intensity. At, least you have a choice (and even more choices). Isn’t life beautiful with BJS? :smile: