# Rendering the rectangle on the camera plane

**URL:** <https://discourse.threejs.org/t/rendering-the-rectangle-on-the-camera-plane/8844>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [August 2, 2019, 4:56pm UTC](https://discourse.threejs.org/t/rendering-the-rectangle-on-the-camera-plane/8844 "2019-08-02T16:56:33Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![rahul.pillai93](https://avatars.discourse-cdn.com/v4/letter/r/e9a140/32.png) [@rahul.pillai93](https://discourse.threejs.org/u/rahul.pillai93)\
**Post date:** [August 2, 2019, 4:56pm UTC](https://discourse.threejs.org/t/rendering-the-rectangle-on-the-camera-plane/8844/1 "2019-08-02T16:56:33Z")

</div>

I have a code below and im trying to alter it. The current code renders a rectangular plane at the location of the target ( with same dimensions at the camera screen at the time of rendering) with respect to the x,y,z unit coordinates. I want this rectangle to be instead rendered to the plane of the camera itself so that no matter where i render it, the rectangle is overlapping every other object on the screen. Any idea on how to do this ?

var cam = this.camera;

```
    var width = (cam.right - cam.left) / cam.zoom;
    var height = (cam.top - cam.bottom) / cam.zoom;
    var geometry = new THREE.PlaneGeometry(width/4, height/4);

    var axisX = new THREE.Vector3(1, 0, 0);
    var axisY = new THREE.Vector3(0, 1, 0);
    var axisZ = new THREE.Vector3(0, 0, 1);

    var normal = cam.position.clone().sub(cam.position).normalize();

    var q = new THREE.Quaternion().setFromUnitVectors(axisZ, normal);
    var matrix = new THREE.Matrix4().makeRotationFromQuaternion(q);
    geometry.applyMatrix(matrix);

    var axisYt = axisY.clone().applyMatrix4(matrix);
    var q2 = new THREE.Quaternion().setFromUnitVectors(axisYt, cam.up);
    var matrix2 = new THREE.Matrix4().makeRotationFromQuaternion(q2);
    geometry.applyMatrix(matrix2);

    var target = this.controls.target;
    geometry.translate(target.x, target.y, target.z);

    var material = new THREE.MeshBasicMaterial({ color: 0xff0000, side: THREE.DoubleSide, transparent: true, opacity: 0.5 });
    var mesh = new THREE.Mesh(geometry, material);
    this.scene.add(mesh);
    this.updateGL();
```

---

<div class="post-metadata">

**Author:** ![DolphinIQ](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dolphiniq/32/3510_2.png) [@DolphinIQ](https://discourse.threejs.org/u/DolphinIQ)\
**Post date:** [August 3, 2019, 7:55am UTC](https://discourse.threejs.org/t/rendering-the-rectangle-on-the-camera-plane/8844/2 "2019-08-03T07:55:49Z")

</div>

I feel like the simpler way would be to just use position in front of the clip space cube and then in the vertex shader, dont multiply the matrices (which translates the mesh position into eye coordinates). For example:

> ```
> var plane = new THREE.Mesh( 
> new THREE.PlaneBufferGeometry( 2 , 2 ),
> new THREE.MeshBasicMaterial({ color: 'blue', transparent: true, opacity: 0.7 })
> );
> // Place the plane at the front of the viewing cube. Behind everything would be +1.0 on the Z axis
> plane.position.z = -1.0;
> scene.add( plane );
> plane.material.onBeforeCompile = function( shader ){
> 	
> shader.vertexShader = shader.vertexShader.replace( `#include <project_vertex>` , 
> `gl_Position = vec4( position , 1.0 );`
> );
> }
> 
> ```

You can find a lot of great info about the clip space “cube” in this [MDN Page](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_model_view_projection).

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [August 3, 2019, 9:39am UTC](https://discourse.threejs.org/t/rendering-the-rectangle-on-the-camera-plane/8844/3 "2019-08-03T09:39:54Z")

</div>

Heres a package that can be used as an example

> **[three-screen-quad](https://www.npmjs.com/package/three-screen-quad)**
>
> a screen aligned quad for three.js

---

<div class="post-metadata">

**Author:** ![rahul.pillai93](https://avatars.discourse-cdn.com/v4/letter/r/e9a140/32.png) [@rahul.pillai93](https://discourse.threejs.org/u/rahul.pillai93)\
**Post date:** [August 6, 2019, 2:01pm UTC](https://discourse.threejs.org/t/rendering-the-rectangle-on-the-camera-plane/8844/4 "2019-08-06T14:01:16Z")

</div>

I tried this solution and for some reason I can’t see the rendered image. I tried zooming in / zooming out. Turns out that my rendered image is seen only when I use the matrix transformations from the quaternion function above.

---

<div class="post-metadata">

**Author:** ![rahul.pillai93](https://avatars.discourse-cdn.com/v4/letter/r/e9a140/32.png) [@rahul.pillai93](https://discourse.threejs.org/u/rahul.pillai93)\
**Post date:** [August 6, 2019, 6:23pm UTC](https://discourse.threejs.org/t/rendering-the-rectangle-on-the-camera-plane/8844/5 "2019-08-06T18:23:05Z")

</div>

I have posted my question more clearly as a new topic in this link here:

> [@Position geometry on camera plane](https://discourse.threejs.org/t/position-geometry-on-camera-plane/8889):
>
> Hey. I am using an orthographic camera (for an already existing model) that renders 3-D images in a webgl. I want to create a 2-D geometry and then position this geometry on the plane of the camera. I have a bunch of code shown below. I tried rendering the geometry just in front of the camera but this doesn’t work properly. Any way to place the image on the camera plane itself and not anywhere in 3-D space just by modifying my code? My code is tightly knit so I can’t use any external packages / …