add camera shake example

yomotsu · Sep 9, 2020 · ec4b502 · ec4b502
1 parent b267ed7
commit ec4b502
Show file tree

Hide file tree

Showing 2 changed files with 216 additions and 0 deletions.
diff --git a/examples/effect-shake.html b/examples/effect-shake.html
@@ -0,0 +1,215 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width">
+<title>=^.^=</title>
+<link rel="stylesheet" href="./style.css">
+</head>
+<body>
+<div class="info">
+	<p><a href="https://github.com/yomotsu/camera-controls">GitHub repo</a></p>
+	<button type="button" onclick="cameraShale0.shake()">shake 1</button>
+	<button type="button" onclick="cameraShale1.shake()">shake 2</button>
+	<button type="button" onclick="cameraShale2.shake()">shake 3</button>
+</div>
+
+<script src="https://unpkg.com/three@0.118.3/build/three.min.js"></script>
+<script src="../dist/camera-controls.js"></script>
+<script>
+CameraControls.install( { THREE: THREE } );
+
+const width  = window.innerWidth;
+const height = window.innerHeight;
+const clock = new THREE.Clock();
+const scene  = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera( 60, width / height, 0.01, 100 );
+camera.position.set( 0, 0, 5 );
+const renderer = new THREE.WebGLRenderer();
+renderer.setSize( width, height );
+document.body.appendChild( renderer.domElement );
+
+const cameraControls = new CameraControls( camera, renderer.domElement );
+
+const mesh = new THREE.Mesh(
+	new THREE.BoxGeometry( 1, 1, 1 ),
+	new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } )
+);
+scene.add( mesh );
+
+const gridHelper = new THREE.GridHelper( 50, 50 );
+gridHelper.position.y = - 1;
+scene.add( gridHelper );
+
+renderer.render( scene, camera );
+
+( function anim () {
+
+	const delta = clock.getDelta();
+	const elapsed = clock.getElapsedTime();
+	const updated = cameraControls.update( delta );
+
+	// if ( elapsed > 30 ) { return; }
+
+	requestAnimationFrame( anim );
+
+	if ( updated ) {
+
+		renderer.render( scene, camera );
+		console.log( 'rendered' );
+
+	}
+
+} )();
+
+
+const ONE_SECOND = 1000;
+const FPS = 60;
+const _vec3a = new THREE.Vector3();
+const _vec3b = new THREE.Vector3();
+
+class CameraShake {
+
+	// frequency: cycle par sec
+	constructor( cameraControls, duration = ONE_SECOND, frequency = 10, strength = 1 ) {
+
+		this._cameraControls = cameraControls;
+		this._duration = duration;
+		this.strength = strength;
+		this._noiseX = makePNoise1D( duration / ONE_SECOND * frequency, duration / ONE_SECOND * FPS );
+		this._noiseY = makePNoise1D( duration / ONE_SECOND * frequency, duration / ONE_SECOND * FPS );
+		this._noiseZ = makePNoise1D( duration / ONE_SECOND * frequency, duration / ONE_SECOND * FPS );
+
+		this._lastOffsetX = 0;
+		this._lastOffsetY = 0;
+		this._lastOffsetZ = 0;
+
+	}
+
+	shake() {
+
+		const startTime = performance.now();
+
+		const anim = () => {
+
+			const elapsedTime = performance.now() - startTime;
+			const frameNumber = ( elapsedTime / ONE_SECOND * FPS ) | 0;
+			const progress = elapsedTime / this._duration;
+			const ease = sineOut( 1 - progress );
+
+			if ( progress >= 1 ) {
+
+				// this._cameraControls.setPosition(
+				// 	_vec3a.x - this._lastOffsetX,
+				// 	_vec3a.y - this._lastOffsetY,
+				// 	_vec3a.z - this._lastOffsetZ,
+				// 	false
+				// );
+
+				this._cameraControls.setTarget(
+					_vec3b.x - this._lastOffsetX,
+					_vec3b.y - this._lastOffsetY,
+					_vec3b.z - this._lastOffsetZ,
+					false
+				);
+
+				this._lastOffsetX = 0;
+				this._lastOffsetY = 0;
+				this._lastOffsetZ = 0;
+				return;
+
+			}
+
+			requestAnimationFrame( anim );
+
+			// this._cameraControls.getPosition( _vec3a );
+			this._cameraControls.getTarget( _vec3b );
+
+			const offsetX = this._noiseX[ frameNumber ] * this.strength * ease;
+			const offsetY = this._noiseY[ frameNumber ] * this.strength * ease;
+			const offsetZ = this._noiseZ[ frameNumber ] * this.strength * ease;
+
+			// this._cameraControls.setPosition(
+			// 	_vec3a.x + offsetX - this._lastOffsetX,
+			// 	_vec3a.y + offsetY - this._lastOffsetY,
+			// 	_vec3a.z + offsetZ - this._lastOffsetZ,
+			// 	false
+			// );
+
+			this._cameraControls.setTarget(
+				_vec3b.x + offsetX - this._lastOffsetX,
+				_vec3b.y + offsetY - this._lastOffsetY,
+				_vec3b.z + offsetZ - this._lastOffsetZ,
+				false
+			);
+
+			this._lastOffsetX = offsetX;
+			this._lastOffsetY = offsetY;
+			this._lastOffsetZ = offsetZ;
+
+		};
+
+		anim();
+
+	}
+
+}
+
+function makePNoise1D( length /* : int */, step /* : int */ ) {
+
+	const noise = [];
+	const gradients = [];
+
+	for ( let i = 0; i < length; i ++ ) {
+
+		gradients[ i ] = Math.random() * 2 - 1;
+
+	};
+
+	for ( let t = 0; t < step; t ++ ) {
+
+		const x = ( length - 1 ) / ( step - 1 ) * ( t );
+
+		const i0 = x|0;
+    const i1 = ( i0 + 1 )|0;
+
+		const g0 = gradients[ i0 ];
+		const g1 = gradients[ i1 ] || gradients[ i0 ];
+
+		const u0 = x - i0;
+		const u1 = u0 - 1;
+
+		const n0 = g0 * u0;
+		const n1 = g1 * u1;
+
+		noise.push( n0 * ( 1 - fade( u0 ) ) + n1 * fade( u0 ) );
+
+	}
+
+	return noise;
+
+}
+
+function fade ( t ) {
+
+	return t * t * t * ( t * ( 6 * t - 15 ) + 10 );
+
+}
+
+const HALF_PI = Math.PI * 0.5;
+
+function sineOut( t ) {
+
+	return Math.sin( t * HALF_PI );
+
+}
+
+window.cameraShale0 = new CameraShake( cameraControls, 500, 10, 0.5 );
+window.cameraShale1 = new CameraShake( cameraControls, 1000, 10, 1 );
+window.cameraShale2 = new CameraShake( cameraControls, 5000, 2, 0.5 );
+
+
+</script>
+
+</body>
+</html>
diff --git a/readme.md b/readme.md
@@ -24,6 +24,7 @@ A camera control for three.js, similar to THREE.OrbitControls yet supports smoot
 - [changing-cursor](https://yomotsu.github.io/camera-controls/examples/cursor.html)
 - [collision](https://yomotsu.github.io/camera-controls/examples/collision.html)
 - [first-person](https://yomotsu.github.io/camera-controls/examples/first-person.html)
+- [camera shake effect](https://yomotsu.github.io/camera-controls/examples/effect-shake.html)
 - [rotate with duration and easing](https://yomotsu.github.io/camera-controls/examples/easing.html) (with [tween.js](https://github.com/tweenjs/tween.js))
 - [path animation](https://yomotsu.github.io/camera-controls/examples/path-animation.html) (with [tween.js](https://github.com/tweenjs/tween.js))