Skip to content

Instantly share code, notes, and snippets.

@janily

janily/persistentCamera.js

Forked from selimbat/persistentCamera.js
Created October 14, 2022 10:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save janily/ae89ae5b43d2f984a7ef61cc1916dbde to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save janily/ae89ae5b43d2f984a7ef61cc1916dbde to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @selimbat selimbat renamed this gist Jul 11, 2022. 1 changed file with 0 additions and 0 deletions.
    0 Persistent-camera-pos.js → persistentCamera.js
    View file
    File renamed without changes.
  2. @selimbat selimbat revised this gist Jul 10, 2022. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Persistent-camera-pos.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,5 @@
    // When creating the camera
    const storedCamera = JSON.parse(localStorage.getItem('cameraPosition'));
    const storedCamera = JSON.parse(localStorage.getItem('camera'));
    if (storedCamera) {
    camera.position.set(
    storedCamera.position.x,
  3. @selimbat selimbat revised this gist Jul 10, 2022. 1 changed file with 23 additions and 11 deletions.
    34 changes: 23 additions & 11 deletions Persistent-camera-pos.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,13 +1,18 @@
    // When creating the camera
    const storedCameraPosition = JSON.parse(localStorage.getItem('cameraPosition'));
    if (storedCameraPosition) {
    const storedCamera = JSON.parse(localStorage.getItem('cameraPosition'));
    if (storedCamera) {
    camera.position.set(
    storedCameraPosition.x,
    storedCameraPosition.y,
    storedCameraPosition.z,
    )
    storedCamera.position.x,
    storedCamera.position.y,
    storedCamera.position.z,
    );
    controls.target.set(
    storedCamera.target.x,
    storedCamera.target.y,
    storedCamera.target.z,
    );
    } else {
    camera.position.set(4, 2, 5) // Default starting position
    camera.position.set(4, 2, 5); // Default starting position
    }

    // When the camera changes with a Three.js controller
    @@ -16,10 +21,17 @@ controls.addEventListener(
    // debounce is here to prevent saving to local storage every frame
    // when the controls have damping
    debounce(
    () => localStorage.setItem('cameraPosition', JSON.stringify({
    x: camera.position.x,
    y: camera.position.y,
    z: camera.position.z,
    () => localStorage.setItem('camera', JSON.stringify({
    position: {
    x: camera.position.x,
    y: camera.position.y,
    z: camera.position.z,
    },
    target: {
    x: controls.target.x,
    y: controls.target.y,
    z: controls.target.z,
    },
    })),
    ),
    );
  4. @selimbat selimbat created this gist Jul 10, 2022.
    35 changes: 35 additions & 0 deletions Persistent-camera-pos.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,35 @@
    // When creating the camera
    const storedCameraPosition = JSON.parse(localStorage.getItem('cameraPosition'));
    if (storedCameraPosition) {
    camera.position.set(
    storedCameraPosition.x,
    storedCameraPosition.y,
    storedCameraPosition.z,
    )
    } else {
    camera.position.set(4, 2, 5) // Default starting position
    }

    // When the camera changes with a Three.js controller
    controls.addEventListener(
    'change',
    // debounce is here to prevent saving to local storage every frame
    // when the controls have damping
    debounce(
    () => localStorage.setItem('cameraPosition', JSON.stringify({
    x: camera.position.x,
    y: camera.position.y,
    z: camera.position.z,
    })),
    ),
    );

    // this default timeout works fine with the default values of the three.js Orbit controls
    function debounce(func, timeout = 120) {
    let timer;
    return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => { func.apply(this, args); }, timeout);
    };
    }