# How to capture an image using THREE.PerspectiveCamera?

**URL:** <https://discourse.threejs.org/t/how-to-capture-an-image-using-three-perspectivecamera/6749>\
**Category:** Questions\
**Tags:** image, perspective-camera\
**Created:** [March 26, 2019, 10:19am UTC](https://discourse.threejs.org/t/how-to-capture-an-image-using-three-perspectivecamera/6749 "2019-03-26T10:19:23Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Loizos\_Vasileiou](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/loizos_vasileiou/32/6059_2.png) [@Loizos\_Vasileiou](https://discourse.threejs.org/u/Loizos_Vasileiou)\
**Post date:** [March 26, 2019, 10:19am UTC](https://discourse.threejs.org/t/how-to-capture-an-image-using-three-perspectivecamera/6749/1 "2019-03-26T10:19:23Z")

</div>

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](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/threejs/original/2X/0/0d2cf0d55455402d228b9f251d642b90102f74a8.png)

---

<div class="post-metadata">

**Author:** ![yombo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/yombo/32/3325_2.png) [@yombo](https://discourse.threejs.org/u/yombo)\
**Post date:** [March 26, 2019, 11:27am UTC](https://discourse.threejs.org/t/how-to-capture-an-image-using-three-perspectivecamera/6749/2 "2019-03-26T11:27:03Z")

</div>

Something like:

```auto
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](https://threejs.org/docs/#api/en/renderers/WebGLRenderTarget)

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

---

<div class="post-metadata">

**Author:** ![Praveen\_K\_S](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/praveen_k_s/32/4771_2.png) [@Praveen\_K\_S](https://discourse.threejs.org/u/Praveen_K_S)\
**Post date:** [March 26, 2019, 12:02pm UTC](https://discourse.threejs.org/t/how-to-capture-an-image-using-three-perspectivecamera/6749/4 "2019-03-26T12:02:29Z")

</div>

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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL) for more details

---

<div class="post-metadata">

**Author:** ![Loizos\_Vasileiou](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/loizos_vasileiou/32/6059_2.png) [@Loizos\_Vasileiou](https://discourse.threejs.org/u/Loizos_Vasileiou)\
**Post date:** [March 26, 2019, 12:56pm UTC](https://discourse.threejs.org/t/how-to-capture-an-image-using-three-perspectivecamera/6749/5 "2019-03-26T12:56:03Z")

</div>

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

> <https://stackoverflow.com/questions/55354789/how-to-capture-an-image-of-three-scene-uning-three-perspectivecamera>