How to create a lantern animation?


Imagin the little sphere on the top is the hand of the player. You can take it and move.
The lantern is the big sphere hanging with a line to the hand. It shall move arround … but only for a while and shall came to silent … but if you drag the hand too fast it rotates crazy. Therefor I hang a big sphere on the lantern which is under the ground to keep it become unmoved … but without success.

A lot of “but”'s in my description… but I hope someone helps me! :slight_smile:

PS: unleash line 160 to see a nice scene with light & shadows.

Adding @Cedric as it has something to do with physic parameters it seems.

I didn’t find a way to damp the velocity without doing it manually (line 209-211). At least, you can tweak the value so the physics response will correspond to your need.
Moreover, I changed the joint to a spring one, I believe the behavior makes it more natural (line 132 - 137)

lantern animation | Babylon.js Playground (

you can revert back the joint to a DistanceJoint and will work as well.


I like the spring joint :slight_smile:

now, there were shadows on the wall.

my next challenge is to have a cage around the light source that hangs from the rope and swings naturally… the angle of the object is not changed during the movement. may be there is a trick? but let me work on it a little more…

not as elegant as I expected, but okay for the first try


For some reasons, poisson sampling does not work well, exponential or close exponential is better. Also, you should set a value to light.shadowMinZ because by default it is 1 (the camera.minZ value), which is too high and clip some shadows:

1 Like

I digged this morning in playground and found the right tech to animate a lantern

thank you evgeni_popov for the hint!

By the way I was surprised that even the wireframe has shadows:

Reference: HingeJoint | Babylon.js Documentation