CameraShake and PropertyDistanceAttractor: Enhance your BabylonJS scenes with dynamic behaviors

Hello BabylonJS community,

I’m excited to share two new behavior classes I’ve created to help make your BabylonJS scenes even more dynamic and interactive:

  1. CameraShake: This behavior class adds a camera shake effect, complete with customizable parameters.
  2. PropertyDistanceAttractor: This behavior class allows you to interpolate numeric values based on the distance between a target and an attractor. It’s perfect for creating effects that change intensity as objects move closer or further apart.

Feel free to try them out, and I would appreciate any feedback or suggestions you might have.


Is it possible to create a ‘walking’ camera with CameraShake?

I’ll try it later, but now I think it is possible if attach the camera speed value to CameraShake ampliute.

1 Like

Thank you for question! While I trying to make walking camer I found some bugs, and of course fixed them.
Now I publish new version, and add an instruction for walking effect into readme.

Here is it:

// Walking camera settings, but with zero influence by default
const cameraShakeOptions: CameraShakeOptions = {
  shakePattern: 'sin',
  amplitude: new Vector3(0.1, 0.1, 0),
  frequency: new Vector3(3, 9, 0),
  rotation: new Vector3(0.01, 0, 0),
  rotationFrequency: new Vector3(9, 1, 0),
  influence: 0,
const cameraShake = new CameraShake(cameraShakeOptions);

// Initialize variables to track camera movement
let previousPosition = camera.position.clone();
let previousTime =;

this.scene.onBeforeRenderObservable.add(function() {
  // Calculate time difference and distance moved since last frame
  const currentTime =;
  const timeDiff = currentTime - previousTime;
  const distanceMoved = Vector3.Distance(camera.position, previousPosition);

  // Calculate speed in units per second
  const speed = distanceMoved / (timeDiff / 1000);

  // Set cameraShakeOptions.influence relative to camera speed
  const cameraSpeedMax = 4;
  cameraShakeOptions.influence = Math.min(speed / cameraSpeedMax, 1);

  // Update the previous position and time
  previousTime = currentTime;

And video for this code:


Now it’s starting to look real interesting :smiling_face_with_three_hearts:. Gonna bookmark this just in case. Thx and have a great day :sunglasses: and thx @labris for the comment.

1 Like

These are very nice effects! Thank you for sharing with the community! :smiley:

1 Like

hey @Dok11 I am using the shaky cam in a playground outside of the Behaviour Class. But is this intended: camera-shake/camera-shake.ts at 7ec73fb6d06b6a5dc5229e37ec320b7944f4a1a8 · Dok11/camera-shake · GitHub? Shouldnt it just be “target.parent = parent”? Otherwise it zooms to infinity :o

Shouldnt it just be “target.parent = parent”?

Yes, we should make a node between the camera ana camera parent.

Otherwise it zooms to infinity :o

Look like you attach behavior in the loop. Could you show the code?

Yes, you are right :slight_smile: Assigned in the loop indeed. (In case it si still needed, Line 105: Babylon.js Playground