In an HTML page using Three.js, I developed a scene of a product which contains multiple GLTFLoader childrens. The product parts can be updated. How can I take a screenshot of a product in a particular camera position even after it moved or rotated?

The screenshot should contain the product maximum size.

function toDataURL(strMime){
    let curVector = camera.position.clone();
    // camera.up - test
    // let worldDir = camera.getWorldDirection();
    // var vector = new THREE.Vector3( 0, 0, -1 );
    // vector.applyQuaternion( camera.quaternion );
    // let camTarget = camera.target.position.clone();
    // let curMatrix = camera.matrix.clone();
    let vector = new THREE.Vector3( 0, 0, - 1 );
    console.log('curVector',camera.clone());
    vector.applyQuaternion( camera.clone().quaternion );
    camera.position.set( - 2.8, 1.0, - 3.7 );
    camera.lookAt(0,0,0);
    render();
    let imgData = renderer.domElement.toDataURL(strMime);
    camera.position.set( curVector.x, curVector.y, curVector.z );
    camera.lookAt(0,0,0);
    render();
    console.log('after camera', camera)
    return imgData;
}

the image taken not viable because the distance of the scene is too far from from camera or the scene is too small, the distance of the scene is too short or the scene is too large, how can set camera such that image of the scene in the canvas and not too small but inside the canvas, also camera take square image?