CameraShake and PropertyDistanceAttractor: Enhance your BabylonJS scenes with dynamic behaviors

Demos and projects
, , , ,
1

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.

9 Likes
2

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

3

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

1 Like
4

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);
camera.addBehavior(cameraShake);

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

this.scene.onBeforeRenderObservable.add(function() {
  // Calculate time difference and distance moved since last frame
  const currentTime = performance.now();
  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
  previousPosition.copyFrom(camera.position);
  previousTime = currentTime;
});

And video for this code:

8 Likes
5

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
6

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

1 Like
7

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

8

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?

9

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