Controlling the scaling of custom geometries in Three.js

I have a custom object which is a subtraction of two meshes. This subtraction creates a frame-like object.

createFrame (x, y, z) {
    const frameMesh = new THREE.Mesh(new THREE.BoxGeometry(1,1,1));
    frameMesh.scale.set(x, y, z);
    const smallerFrameMesh = frameMesh.clone()
    smallerFrameMesh.scale.set(x - 4, y - 4, z);

    // subtraction
    const frameGeometry = fromCSG(toCSG(frameGeometry).subtract(toCSG(smallerFrameMesh)));

    const frame = new THREE.Mesh(frameGeometry, new THREE.MeshStandardMaterial(0xffffff));
    frame.geometry.computeVertexNormals();
    frame.userData.isFrame = true;

    return frame;
}

Now, I'm scaling this frame dynamically whenever the size changes. The problem is that using .scale only make my object stretch while I want it to preserve the width of the frame (which is 4 in this case).

Is it possible to specify how the object should be scaled (like writing my own implementation of the scale function) or is there a property/method to use which would result in preserving the "white space" vs. "object" portion? Thank you in advance.

The scale() method transforms every vertex equally by multiplying their positions. So if you have the inner edge of the frame at x=6, and the outer edge at x=10, scaling it by 2 would give you inner: x=12, outer: x=20, making the frame 8 units wide.

To alleviate this, you could separate your frame into 4 different boxes: top, bottom, left and right. When you want to scale it in the x-axis, you can stretch top & bottom, and simply move the left and right edges. That way you maintain the thickness of 4:

The inverse can be done when you want to scale on the y-axis. You stretch the left & right boxes, then move the top & bottom so they line up.