Resizing a material from a different file on window resize

Questions
1

Hey,

I got a problem updating a material when resizing, with that material being instanced in a different file. I’ve removed everything I’ve tried so far, since it’s leading nowhere other than more and more console errors…

Right now, I have my ‘particles.js’ file in which I create the geometry, material and mesh, the ‘World.js’ file in which I’m importing everything and adding it to the scene, and the ‘Resizer.js’ file. That material would be created and added to mesh in ‘particles.js’, but the function to update its size is called is ‘World.js’.

Here is the part in which I’m trying to update its size on resizing window :

// Creating the material, with a size depending on the screen ratio
function createParticlesMaterial() {
  const particlesMaterial = new ShaderMaterial({
    uniforms: {
      uPixelRatio: { value: Math.min(window.devicePixelRatio, 2) },
    },
    vertexShader: vShader,
    fragmentShader: fShader,
  });

  return particlesMaterial;
}

// The function I'm trying to call in World.js
function resizeParticles(...particlesMaterial) {
  particlesMaterial.uniforms.uPixelRatio.value = Math.min(
    window.devicePixelRatio,
    2,
  );

  return particlesMaterial;
}

export { resizeParticles };

// Creating the mesh to be exported to World.js
function createParticles() {
  const particlesGeometry = createParticlesGeometry();
  const particlesMaterial = resizeParticles();

  const particlesMesh = new Points(particlesGeometry, particlesMaterial);

  return particlesMesh;
}

export { createParticles };

Now the part of ‘World.js’ in which I’m adding the mesh, and trying to resize :

class World {
  constructor(container) {
    scene = createScene();
    // ...
    resizer = new Resizer(container, camera, renderer);
    // ...
    const particlesMesh = createParticles();
    scene.add(particlesMesh);

    resizer.onResize = () => {
      resizeParticles(...particlesMaterial);
    };

And my ‘Resizer.js’ :

const setSize = (container, camera, renderer) => {
  camera.aspect = container.clientWidth / container.clientHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(container.clientWidth, container.clientHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
};

class Resizer {
  constructor(container, camera, renderer) {
    // set initial size on load
    setSize(container, camera, renderer);

    window.addEventListener('resize', () => {
      // set the size again if a resize occurs
      setSize(container, camera, renderer);
      // perform any custom actions
      this.onResize();
    });
  }

  onResize() {}
}

export { Resizer };

I know I need to pass particlesMaterial as an argument, for it to be updated and then sent again in ‘particles.js’, but it’s really confusing for me. I’ve tried resizing directly in ‘Resizer.js’ after importing the mesh, passing ‘resizer’ as an argument, but nothin seems to work. I still don’t know how to use it correctly, as I’ve been introduced to this only recently.

I know I could just export the particles material to ‘World.js’, then update it and create the mesh here, but I’m trying to organize my project as good as I can keeping everything in a separate file.

Also, when I’m doing it this way (maybe it could work ?), it’s logging this :

read properties of undefined (reading 'uniforms')

So I guess I need to put the resizing function into the createParticlesMaterial() function, but then I’d not know how to export it…

Thanks for your help and guidance !