How to dynamically resize the visualization in the loop?

Questions
1

Opera Снимок_2022-07-07_161951_app.ronbel.ru
Opera Снимок_2022-07-07_161951_app.ronbel.ru1268×825 88.3 KB

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

// 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?

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,
  };
}

// 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.

2

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;

const ro = new ResizeObserver(this.resize);

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

Our resize function in the ThreeView

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