How to capture an image using THREE.PerspectiveCamera?

Questions
,
1

I was looking online, but I didn’t found much. I’m basically looking for the camera function that renders an image when a button is pressed.

Notice that I have 2 THREE.PerspectiveCamera (main and 2nd). The main camera is the one I use for the OrbitControls. and the 2nd is for capturing the image.

This is how I declare the Three.PerspectiveCamera:

camera_RT = new THREE.PerspectiveCamera(20, window.innerWidth / window.innerHeight, -100, -1000);
camera_RT.position.set( //Set 2nd camera's position according to its parent
   camera_RT.position.x, 
   camera_RT.position.y, 
   camera_RT_Holder.position.z
);
camera_RT.updateMatrixWorld(); //Update camera's Matrix Wolrd (location in the scene)

//Add the Camera to the camera Holder (parent objects)
camera_RT_Holder.add(camera_RT); 

//Create 2nd Camera Helper (View volume)
camera_RT_Helper = new THREE.CameraHelper( camera_RT ); //Create camera helper
scene_Main.add( camera_RT_Helper );//Add the camera helper to the scene

image

2

Something like:

var previousRT = renderer.getRenderTarget();
renderer.setRenderTarget( myRenderTarget );
renderer.render( scene_Main, camera_RT );
renderer.setRenderTarget( previousRT );

You have to create your own render target, See this

Edit: For example,
var myRenderTarget = new THREE.RenderTarget( xResolution, yResolution );
The default options are ok.

4

On button click use the method toDataURL() to capture the image from the camera.
imageData = renderer.domElement.toDataURL();

The DOM element of renderer is a canvas. Refer: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL for more details

5

I created the same question in StackOverFlow, since it’s more active. Have a look if you want to