Get screenshot of the scene on a specific position

Questions
,
1

Hi there!

Regarding a product configurador running R3F, I am trying to capture a screenshot to be downloaded by the user with their configuration. The screenshot needs be taken from a specific predetermined position, so I guess canvas.toDataURL is a no go, on the other hand, renderer.render(scene, camera) locks the thread blocking the ui for a few moments. Is there a performatic way to achieve this?

Many thanks in advance

2

I also made something like this but I did use canvas.toDataURL.

What I did is first store my current cameras position and rotation in a state and then change my cameras position and rotation to the desired one, after that used canvas.toDataURL to get the SS and reset the cameras position and rotation using the state.

const { camera } = useThree();

const [camPos, setCamPos] = useState(new THREE.Vector3())
const [camRot, setCamRot] = useState(new THREE.Vector3())

setCamPos(camera.position);
setCamRot(camera.rotation);

camera.position.set(0,0,0) // Set the desired position you want to take the screenshot from
camera.rotation.set(0,0,0) // Set the desired rotation you want to take the screenshot from

const canvas = document.querySelector("canvas");
const dataURL = canvas.toDataURL();

// dataURL is the screenshot

camera.position.set(camPos);
camera.rotation.set(camRot);

Don’t forget to set the preserveDrawingBuffer to true.