[React Three Fiber] Scale 2d image to match particle object in size

Questions
, , ,
1

Hi all.
I am blanking on how to best do the following correctly.
Context:
I load our (high-resolution) logo as a texture, then scale it down, draw it onto a canvas and then extract the ImageData representing the underlying pixel data to pass that on determine the final arrangement of a particle animation.
Problem / Goal:
Now I would like to create a smooth transition between the final arrangement of the particle animation and a static plane object of the logo, which must be scaled correctly and responsively as i load it in. I am having trouble scaling it correctly. What is the logic on getting this to work?

Here’s what I tried:

// Canvas scaling...
const createCanvas = (texture) => {
  let canvas = document.createElement('canvas');
  let aspect = texture.image.width / texture.image.height;
  canvas.height = window.innerHeight * 0.50;
  canvas.width = canvas.height * aspect;
  canvas.style.maxWidth = '100%';
  let context = canvas.getContext('2d');
  context.drawImage(texture.image, 0, 0, canvas.width, canvas.height);
  return { canvas, context };
};
const getImageData = (canvas, context) => {
  return context.getImageData(0, 0, canvas.width, canvas.height);
};
// Plane object creation in useEffect hook...
    let newTexture = new THREE.Texture(canvas);
    newTexture.needsUpdate = true;
    // Create a plane object with the same size as the final particle arrangement
    let planeGeometry = new THREE.PlaneGeometry(canvas.width, canvas.height);
    let planeMaterial = new THREE.MeshBasicMaterial({ map: newTexture, transparent: true, opacity: 1});
    let planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
    scene.add(planeMesh);