# How to dynamically resize the visualization in the loop?

**URL:** <https://discourse.threejs.org/t/how-to-dynamically-resize-the-visualization-in-the-loop/40083>\
**Category:** Questions\
**Tags:** animation\
**Created:** [July 7, 2022, 1:23pm UTC](https://discourse.threejs.org/t/how-to-dynamically-resize-the-visualization-in-the-loop/40083 "2022-07-07T13:23:29Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![belyavsky](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/belyavsky/32/26581_2.png) [@belyavsky](https://discourse.threejs.org/u/belyavsky)\
**Post date:** [July 7, 2022, 1:23pm UTC](https://discourse.threejs.org/t/how-to-dynamically-resize-the-visualization-in-the-loop/40083/1 "2022-07-07T13:23:30Z")

</div>

![Opera Снимок_2022-07-07_161951_app.ronbel.ru](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/8/787ff02a87a5a4f4e6ccfa54444a63bbb1e8046f.png)

Please tell me how to dynamically resize the visualization, when you change the size, orientation screen?

I display several images in a loop, if you refresh the page, then everything will adjust, because the dimensions are taken div once, but how to do it dynamically?

[Living example https://app.ronbel.ru/packer/market/yandexmarket](https://app.ronbel.ru/packer/market/yandexmarket)

```javascript
// three.js is hooked to the div
<div id="{{ container['id'] }}" class="packer"></div>

```

I make three.js inside the function - it worked and finished, apparently you can’t hook it to track browser behavior?

```javascript
const environment = getEnvironment(id);

function getEnvironment(id) {
  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0xffffff);

  var divSize = getSize(id);

  const camera = new THREE.PerspectiveCamera(70, divSize["width"] / divSize["height"], 0.1, 10000);
  camera.position.x = -200;
  camera.position.y = 500;
  camera.position.z = 2000;

  const div = document.getElementById(id); 
  const renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(divSize["width"], divSize["height"]); 
  div.appendChild(renderer.domElement);

  const lightAmbient = new THREE.AmbientLight(0x9eaeff, 0.2)
  scene.add(lightAmbient)

  const frontSpot = new THREE.SpotLight(0xeeeece);
  frontSpot.position.set(1000, 1000, 1000);
  scene.add(frontSpot);

  const frontSpot2 = new THREE.SpotLight(0xddddce);
  frontSpot2.position.set(-500, -500, -500);
  scene.add(frontSpot2);

  const controls = new OrbitControls(camera, document.getElementById(id));
  controls.target.set(0, 0, 0);
  controls.rotateSpeed = 0.5;
  controls.enableDamping = true; 
  controls.dampingFactor = 0.05;
  // controls.autoRotate = true;
  // controls.autoRotateSpeed = 1;

  return {
    "scene": scene,
    "renderer": renderer,
    "controls": controls,
    "camera": camera,
  };
}

```

```javascript
// My function for getting div dimensions
function getSize(id) {
  var div = document.getElementById(id);
  var containerStyle = getComputedStyle(div, null);
  var width = parseInt(containerStyle.getPropertyValue('width'));
  var height = parseInt(containerStyle.getPropertyValue('height'));

  return {
    "width": width,
    "height": height
  };
}
}

```

The only idea I have is to completely reload the page when updating the window size.

---

<div class="post-metadata">

**Author:** ![boosted](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/boosted/32/23992_2.png) [@boosted](https://discourse.threejs.org/u/boosted)\
**Post date:** [July 7, 2022, 2:20pm UTC](https://discourse.threejs.org/t/how-to-dynamically-resize-the-visualization-in-the-loop/40083/2 "2022-07-07T14:20:35Z")

</div>

In our codebase we have a `resizeListener` on the DOM element that contains the THREEjs logic.  
This calls a `resize(width, height)` function in our `ThreeView` class passing the new width and height of the element.

How we call the resize. Do note that we use Vue as our framework. So if you’re using pure HTML/JS it might differ a bit. In pure JS you might want to look at: `addEventListener('resize', resize);` or even `window.onresize = resize;`

```javascript
const ro = new ResizeObserver(this.resize);

resize() {
  view.resize(this.$el.offsetWidth, this.$el.offsetHeight)
}

```

Our resize function in the `ThreeView`

```javascript
  resize(width: number, height: number): void {
    this.camera.aspect = width / height;
    this.camera.updateProjectionMatrix();
    this.renderer.setSize(width, height);
  }

```