Skip to content

Instantly share code, notes, and snippets.

@0xf0f0f0

0xf0f0f0/three-js-camera-shake.js

Last active July 9, 2020 08:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save 0xf0f0f0/594b92fe7fb8b039ea7001a33ffaf4e8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save 0xf0f0f0/594b92fe7fb8b039ea7001a33ffaf4e8 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. 0xf0f0f0 revised this gist Jul 9, 2020. 1 changed file with 34 additions and 27 deletions.
    61 changes: 34 additions & 27 deletions three-js-camera-shake.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,30 +1,37 @@
    cameraShake(counter = 10) {
    this.startPosition = new THREE.Vector3;
    this.startPosition.copy(scene.camera.position);
    this.cameraShakeCounter = counter;
    this.shakeOnce();
    }
    shakeOnce() {
    let dist = 0.15;
    let targetX = this.startPosition.x + Math.random() * dist * 2 - dist;
    let targetY = this.startPosition.y + Math.random() * dist * 2 - dist;
    let tweenMove = new TWEEN.Tween(scene.camera.position);
    tweenMove.easing(TWEEN.Easing.Sinusoidal.InOut);
    tweenMove.to({x:targetX, y:targetY}, 10);
    tweenMove.start();
    tweenMove.onComplete(() => {
    this.cameraShakeCounter--;
    if (this.cameraShakeCounter <= 0)
    this.onShakeComplete();
    else
    this.shakeOnce();
    });
    const defaultProps = {
    dist: .15,
    time: 10
    }
    export const cameraShake = (camera = null, count = 10, callback = () => {}, props = defaultProps) => {
    if (!camera) {
    throw new Error('Camera is not define!');
    }

    onShakeComplete() {
    this.stopShakeInstantly();
    }
    const basePosition = new THREE.Vector3().copy(camera.position);
    let counter = count;

    let dist = props.dist;

    const shakeOnce = () => {
    const shakeProps = {
    x: basePosition.x + Math.random() * dist * 2 - dist,
    y: basePosition.y + Math.random() * dist * 2 - dist
    };
    const tween = new TWEEN.Tween(camera.position);
    tween.easing(TWEEN.Easing.Sinusoidal.InOut);
    tween.to(shakeProps, props.time);

    return tween.onComplete(() => {
    counter--;

    if (counter <= 0) {
    camera.position.copy(basePosition);
    callback && callback();
    } else {
    shakeOnce();
    }
    });
    };

    stopShakeInstantly() {
    scene.camera.position.copy(this.startPosition);
    }
    shakeOnce();
    };
  2. 0xf0f0f0 created this gist Jul 9, 2020.
    30 changes: 30 additions & 0 deletions three-js-camera-shake.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,30 @@
    cameraShake(counter = 10) {
    this.startPosition = new THREE.Vector3;
    this.startPosition.copy(scene.camera.position);
    this.cameraShakeCounter = counter;
    this.shakeOnce();
    }
    shakeOnce() {
    let dist = 0.15;
    let targetX = this.startPosition.x + Math.random() * dist * 2 - dist;
    let targetY = this.startPosition.y + Math.random() * dist * 2 - dist;
    let tweenMove = new TWEEN.Tween(scene.camera.position);
    tweenMove.easing(TWEEN.Easing.Sinusoidal.InOut);
    tweenMove.to({x:targetX, y:targetY}, 10);
    tweenMove.start();
    tweenMove.onComplete(() => {
    this.cameraShakeCounter--;
    if (this.cameraShakeCounter <= 0)
    this.onShakeComplete();
    else
    this.shakeOnce();
    });
    }

    onShakeComplete() {
    this.stopShakeInstantly();
    }

    stopShakeInstantly() {
    scene.camera.position.copy(this.startPosition);
    }