# How to move camera back?

**URL:** <https://discourse.threejs.org/t/how-to-move-camera-back/7805>\
**Category:** Questions\
**Tags:** camera\
**Created:** [May 29, 2019, 5:58pm UTC](https://discourse.threejs.org/t/how-to-move-camera-back/7805 "2019-05-29T17:58:40Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![tspaddock](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tspaddock/32/5767_2.png) [@tspaddock](https://discourse.threejs.org/u/tspaddock)\
**Post date:** [May 29, 2019, 5:58pm UTC](https://discourse.threejs.org/t/how-to-move-camera-back/7805/1 "2019-05-29T17:58:40Z")

</div>

I am trying to move a camera back from model on rendering with this piece of code. Currently is renders too close. Any suggestions?

```auto
function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({
    canvas
  });
  const fov = 45;
  const aspect = 2;
  const near = 0.1;
  const far = 100;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(0, 10, 20);
  const controls = new THREE.OrbitControls(camera, canvas);
  controls.target.set(0, 5, 0);
  controls.update();
  const scene = new THREE.Scene();
  scene.background = new THREE.Color('black'); {
    const planeSize = 0;
    const loader = new THREE.TextureLoader();
    const texture = loader.load('');
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.magFilter = THREE.NearestFilter;
    const repeats = planeSize / 2;
    texture.repeat.set(repeats, repeats);
    const planeGeo = new THREE.PlaneBufferGeometry(planeSize, planeSize);
    const planeMat = new THREE.MeshPhongMaterial({
      map: texture,
      side: THREE.DoubleSide,
    });
    const mesh = new THREE.Mesh(planeGeo, planeMat);
    mesh.rotation.x = Math.PI * -.5;
    scene.add(mesh);
  }

  function frameArea(sizeToFitOnScreen, boxSize, boxCenter, camera) {
    const halfSizeToFitOnScreen = sizeToFitOnScreen * 0.5;
    const halfFovY = THREE.Math.degToRad(camera.fov * .5);
    const distance = halfSizeToFitOnScreen / Math.tan(halfFovY);

    const direction = (new THREE.Vector3())
      .subVectors(camera.position, boxCenter)
      .multiply(new THREE.Vector3(1, 0, 1))
      .normalize();

    camera.near = boxSize / 100;
    camera.far = boxSize * 100;

    camera.updateProjectionMatrix();

    camera.lookAt(boxCenter.x, boxCenter.y, boxCenter.z);
  }

      const box = new THREE.Box3().setFromObject(root);

      const boxSize = box.getSize(new THREE.Vector3()).length();
      const boxCenter = box.getCenter(new THREE.Vector3());

      frameArea(boxSize * 0.5, boxSize, boxCenter, camera);

      controls.maxDistance = boxSize * 10;
      controls.target.copy(boxCenter);
      controls.update();
    });
  }

  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }

  function render() {
    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }

    renderer.render(scene, camera);

```

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [May 29, 2019, 6:17pm UTC](https://discourse.threejs.org/t/how-to-move-camera-back/7805/2 "2019-05-29T18:17:17Z")

</div>

Duplicate of [https://stackoverflow.com/questions/56351266/how-to-move-camera-back-on-canvas](https://stackoverflow.com/questions/56351266/how-to-move-camera-back-on-canvas)

Just change the `camera.position.set()` to something further away from the box. Right now you have `0, 10, 20` you can change it to `0, 20, 40` or whatever.

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [May 29, 2019, 6:18pm UTC](https://discourse.threejs.org/t/how-to-move-camera-back/7805/3 "2019-05-29T18:18:03Z")

</div>

This code works for me most of the time.

```auto
camera.position.set( n0, n1, n2 ) //n0,n1,n2 are numbers

```

---

<div class="post-metadata">

**Author:** ![tspaddock](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tspaddock/32/5767_2.png) [@tspaddock](https://discourse.threejs.org/u/tspaddock)\
**Post date:** [May 29, 2019, 6:40pm UTC](https://discourse.threejs.org/t/how-to-move-camera-back/7805/4 "2019-05-29T18:40:49Z")

</div>

Thank you. I have tried this but it does not work? That is what confuses me!

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [May 29, 2019, 8:46pm UTC](https://discourse.threejs.org/t/how-to-move-camera-back/7805/5 "2019-05-29T20:46:38Z")

</div>

Did you write this code yourself? What are you trying to do in the `frameArea` function, and how did you calculate those equations?

---

<div class="post-metadata">

**Author:** ![tspaddock](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tspaddock/32/5767_2.png) [@tspaddock](https://discourse.threejs.org/u/tspaddock)\
**Post date:** [May 30, 2019, 2:54pm UTC](https://discourse.threejs.org/t/how-to-move-camera-back/7805/6 "2019-05-30T14:54:35Z")

</div>

Thank you. I am working with code from a site to help with responsive display. The model is being put into a camera box for that purposes. I have figured out the issue I was having. I needed to increase the box size using this line of code:  
frameArea(boxSize \* **1.5** , boxSize, boxCenter, camera);  
The equations are based off of SOHCAHTOA. I needed to compute the distance and then move the camera that distance from the center of the box.