Reusing image in CSS2DObjects

Questions
,
1

I am working on an animation that will spawn an image, move it, then make it go away. CSS2DObject is perfect and showing an actual image, not a texture, creates exactly the visual I need.

Using GSAP, the image fades in at a random position, moves to another random position, then fades out. This happens randomly every couple hundred miliseconds. At any given moment I have several images visible on screen. The number varies.

This is my current setup: a factory class that holds the information about the image:

class GlowShapeFactory {
   constructor() {
      this.glowImg = document.createElement("img");
      this.glowImg.src = "/path/to/img.png";
   }

   createNewGlowShape() {
      const newShapeImage = this.glowImg.clone();

      const newShape = new CSS2DObject(newShapeImage);
      newShape.center.set(0.5, 0.5);
      newShape.position.set(0, 0, 0);

      return newShape;
   }
}

…then in the init() function that creates the canvas and holds all the logic to create the scene:

function init() {
   // set scene and renderers

   const factory = new GlowShapeFactory();
}

My idea is that creating an instance of GlowShapeFactory would make the browser download the image and store it in the glowImg element and when calling the .clone() method the image information would be… reused.

I searched around, but couldn’t find a good explanation of what is (not) working here. Most of my experience with Three was using it in React so my misconception about what clone does stems from how I am used to doing things in React Three Fiber. The MDN docs don’t go into specifics regarding how the method deals with specific element types.

At the end of the animation logic, I clean up like so:

function generateAnimation() {
   let shape = factory.createNewglowShape();

   // animation logic

   // function called at the end of the animation
   () => {
      shape.removeFromParent();
      shape = null;
   }
}

I’ve let the animation running for a few minutes and there was no increase in memory usage, so it might be working.

So my questions are:

  1. does the browser cache the image and reuse on subsequent requests or do I have to manually tell it to?
  2. is the factory + clone approach correct?
  3. not three-specific, but what does clone() do in an <img /> element?
  4. is removeFromParent() + setting the variable to null enough to clean up ephemerous objects?