Screen Shake tool

Resources
1

Hi !

I’ve made this tool today to make the camera shake. And here is a fiddle
Enjoy it if you need it. :blush:

First you instantiate :

var screenShake = ScreenShake();

Then you update in your loop :

function loop() {

 screenShake.update(camera);

 renderer.render(scene, camera);
 requestAnimationFrame(loop);
};

Then you shake shake shake :

screenShake.shake( camera, new THREE.Vector3(0.1, 0, 0), 300 );

The second argument is the offset at the climax of the screen shake : If you want it to move of 0.5 on X, 0.5 on Y, and 0.2 on Z, then give it THREE.Vector3(0.5, 0.5, 0.2).
The third argument is the duration of the shake in milliseconds.

I also drop here the excellent talk ‘Juice it or Loose it’ of Martin Jonasson & Petri Purho about ‘juiciness’ in video games, you should really watch it if it’s not already done !

7 Likes
2

Would be cool to have an example of using :wink:

3

You’re right, I just made one and updated my message.

1 Like
4

Thanks you ! Your pluggin to shake the camera in “Three.js” is super ! But When there are too many objects which trigger the function “screenShake.shake()” in the same time, The camera is a little disoriented, but it’s not very important.

5

it looks great on fiddle. do you think it would work in this example: https://threejs.org/examples/#webgl_geometry_dynamic ?!
i keep trying, but alas, no progress. I just want to know if it is possible
to incorporate there, because that terrain camera is so busy already.
thanx.

6

It’s probably not possible to use it with three.js built-in controls, sorry

7

really cool!

9

Look nice :slightly_smiling_face: i will try it