En una página HTML usando Three.js, desarrollé una escena de un producto que contiene múltiples niños GLTFLoader. Las partes del producto se pueden actualizar. ¿Cómo puedo tomar una captura de pantalla de un producto en una posición particular de la cámara incluso después de que se haya movido o girado?

La captura de pantalla debe contener el tamaño máximo del producto.

 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; }

la imagen tomada no es viable porque la distancia de la escena está demasiado lejos de la cámara o la escena es demasiado pequeña, la distancia de la escena es demasiado corta o la escena es demasiado grande, ¿cómo se puede configurar la cámara para que la imagen de la escena en el lienzo y no demasiado pequeño pero dentro del lienzo, ¿también la cámara toma una imagen cuadrada?