├── LICENSE
├── README.md
└── ScreenShake.js


/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 felix mariotto
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # three-screenshake
 2 | a screen shake tool for three.js   
 3 | 
 4 | example here : https://jsfiddle.net/e4h931co/
 5 | 
 6 | 
 7 | # how to use it
 8 |   
 9 | instantiate it :
10 | 
11 | ```javascript
12 | var screenShake = ScreenShake();
13 | ```
14 |   
15 | 
16 | update the camera in the loop :
17 | ```javascript
18 | function loop() {
19 | 
20 |   screenShake.update(camera);
21 |   
22 |   renderer.render(scene, camera);
23 |   requestAnimationFrame(loop);
24 | };
25 | ```
26 |   
27 | if you indend to do something else with the camera, you can check for screenShake.enabled like this :
28 | ```javascript
29 | if (screenShake.enabled == true) {
30 | // Then a screenshake is in progress
31 | }
32 | ```
33 |    
34 | 
35 | in an event listener or any part of your code that must create a screen shake :  
36 | ```javascript
37 | screenShake.shake( camera, new THREE.Vector3(0.1, 0, 0), 300 /* ms */ );
38 | ```
39 | The second argument is the offset at the climax of the screen-shake.
40 | The third argument is the duration of the shake in milliseconds.
41 | 


--------------------------------------------------------------------------------
/ScreenShake.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | function ScreenShake() {
 4 | 
 5 | 	return {
 6 | 
 7 | 		// When a function outside ScreenShake handle the camera, it should
 8 | 		// always check that ScreenShake.enabled is false before.
 9 | 		enabled: false,
10 | 
11 | 		_timestampStart: undefined,
12 | 
13 | 		_timestampEnd: undefined,
14 | 
15 | 		_startPoint: undefined,
16 | 
17 | 		_endPoint: undefined,
18 | 
19 | 
20 | 
21 | 		// update(camera) must be called in the loop function of the renderer,
22 | 		// it will re-position the camera according to the requested shaking.
23 | 		update: function update(camera) {
24 | 			if ( this.enabled == true ) {
25 | 				const now = Date.now();
26 | 				if ( this._timestampEnd > now ) {
27 | 					let interval = (Date.now() - this._timestampStart) / 
28 | 						(this._timestampEnd - this._timestampStart) ;
29 | 					this.computePosition( camera, interval );
30 | 				} else {
31 | 					camera.position.copy(this._startPoint);
32 | 					this.enabled = false;
33 | 				};
34 | 			};
35 | 		},
36 | 
37 | 
38 | 
39 | 		// This initialize the values of the shaking.
40 | 		// vecToAdd param is the offset of the camera position at the climax of its wave.
41 | 		shake: function shake(camera, vecToAdd, milliseconds) {
42 | 			this.enabled = true ;
43 | 			this._timestampStart = Date.now();
44 | 			this._timestampEnd = this._timestampStart + milliseconds;
45 | 			this._startPoint = new THREE.Vector3().copy(camera.position);
46 | 			this._endPoint = new THREE.Vector3().addVectors( camera.position, vecToAdd );
47 | 		},
48 | 
49 | 
50 | 
51 | 
52 | 		computePosition: function computePosition(camera, interval) {
53 | 
54 | 			// This creates the wavy movement of the camera along the interval.
55 | 			// The first bloc call this.getQuadra() with a positive indice between
56 | 			// 0 and 1, then the second call it again with a negative indice between
57 | 			// 0 and -1, etc. Variable position will get the sign of the indice, and
58 | 			// get wavy.
59 | 			if (interval < 0.4) {
60 | 				var position = this.getQuadra( interval / 0.4 );
61 | 			} else if (interval < 0.7) {
62 | 				var position = this.getQuadra( (interval-0.4) / 0.3 ) * -0.6;
63 | 			} else if (interval < 0.9) {
64 | 				var position = this.getQuadra( (interval-0.7) / 0.2 ) * 0.3;
65 | 			} else {
66 | 				var position = this.getQuadra( (interval-0.9) / 0.1 ) * -0.1;
67 | 			}
68 | 			
69 | 			// Here the camera is positioned according to the wavy 'position' variable.
70 | 			camera.position.lerpVectors( this._startPoint, this._endPoint, position );
71 | 		},
72 | 
73 | 		// This is a quadratic function that return 0 at first, then return 0.5 when t=0.5,
74 | 		// then return 0 when t=1 ;
75 | 		getQuadra: function getQuadra(t) {
76 | 			return 9.436896e-16 + (4*t) - (4*(t*t)) ;
77 | 		}
78 | 
79 | 	};
80 | 
81 | };
82 | 


--------------------------------------------------------------------------------