# How to draw a plane laying on the Far Clipping Plane

**URL:** <https://discourse.threejs.org/t/how-to-draw-a-plane-laying-on-the-far-clipping-plane/2221>\
**Category:** Questions\
**Tags:** buffergeometry, perspective-camera, frustum\
**Created:** [March 26, 2018, 9:02am UTC](https://discourse.threejs.org/t/how-to-draw-a-plane-laying-on-the-far-clipping-plane/2221 "2018-03-26T09:02:07Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![edap](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/edap/32/180_2.png) [@edap](https://discourse.threejs.org/u/edap)\
**Post date:** [March 26, 2018, 9:02am UTC](https://discourse.threejs.org/t/how-to-draw-a-plane-laying-on-the-far-clipping-plane/2221/1 "2018-03-26T09:02:07Z")

</div>

Hello, I have to draw a plane exactly on the far clipping plane, avoiding z-fighting. The plane will be textured later. On each call to the animate function, I’m recalculating the position of the plane.  
You can find a codepen here:

https://codepen.io/edapx/embed/preview/yKzKYE?height=300&slug-hash=yKzKYE&default-tabs=js,result&host=https://codepen.io

I would expect to always see a red background on the left part of the screen, but this is not happening.  
Can someone explain me why?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 26, 2018, 9:12am UTC](https://discourse.threejs.org/t/how-to-draw-a-plane-laying-on-the-far-clipping-plane/2221/2 "2018-03-26T09:12:50Z")

</div>

Hi.  
Using `scene.background` with `THREE.Texture()` isn’t an option? [https://jsfiddle.net/prisoner849/rh5p2Ln6/](https://jsfiddle.net/prisoner849/rh5p2Ln6/)

---

<div class="post-metadata">

**Author:** ![edap](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/edap/32/180_2.png) [@edap](https://discourse.threejs.org/u/edap)\
**Post date:** [March 26, 2018, 9:15am UTC](https://discourse.threejs.org/t/how-to-draw-a-plane-laying-on-the-far-clipping-plane/2221/3 "2018-03-26T09:15:23Z")

</div>

No, I need to draw a plane. I can not use a texture nor set the bg color with css, there should be a way to achieve this.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [March 26, 2018, 9:21am UTC](https://discourse.threejs.org/t/how-to-draw-a-plane-laying-on-the-far-clipping-plane/2221/4 "2018-03-26T09:21:09Z")

</div>

Okay. But just out of curiousity, why do you want exactly a plane? Will it receive shadows? It’s very interesting, what effect you want to achieve with this approach. I hope, your project is not top-level secret 🙂

---

<div class="post-metadata">

**Author:** ![edap](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/edap/32/180_2.png) [@edap](https://discourse.threejs.org/u/edap)\
**Post date:** [March 26, 2018, 9:23am UTC](https://discourse.threejs.org/t/how-to-draw-a-plane-laying-on-the-far-clipping-plane/2221/5 "2018-03-26T09:23:06Z")

</div>

Later it will be a more complex geometry than a plane, but first I need to get a plane working.

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [March 26, 2018, 10:23am UTC](https://discourse.threejs.org/t/how-to-draw-a-plane-laying-on-the-far-clipping-plane/2221/6 "2018-03-26T10:23:29Z")

</div>

For me, the red plane is popping in and out of existence, which is caused by z-fighting issues.

You can avoid this by bringing the plane a tiny bit closer to the camera and expanding it a bit, then the z-fighting is solved:

```auto
    // far
    addPoint(- w - 0.25, - h - 0.25, f - 0.01);
    addPoint(w + 0.25, - h - 0.25, f - 0.01);
    addPoint(- w - 0.25, h + 0.25, f - 0.01);
    addPoint(w + 0.25, h + 0.25, f - 0.01);  

```

https://codepen.io/looeee/embed/preview/RMLJYw?height=300&slug-hash=RMLJYw&default-tabs=js,result&host=https://codepen.io

I don’t think that drawing something that lies exactly on the far plane should be expected to give good results, at least without using a shader material.  
The precision for perspective projection gets worse the nearer to the far plane that you go, so by placing something _on_ the far plane, you are basically going to get the worst precision problems possible for that frustum, although perhaps if you make the frustum smaller they can be reduced enough.

You could perhaps avoid this by using a shader material instead.

If you explain more clearly what you are trying to do it will be easier to help you.

---

<div class="post-metadata">

**Author:** ![edap](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/edap/32/180_2.png) [@edap](https://discourse.threejs.org/u/edap)\
**Post date:** [March 26, 2018, 11:59am UTC](https://discourse.threejs.org/t/how-to-draw-a-plane-laying-on-the-far-clipping-plane/2221/7 "2018-03-26T11:59:30Z")

</div>

Hello @looeee. Yes, I wanted to avoid z-fighting issues. I have thought that setting the material DoubleSide and depthTest: false would have been enough. I have tried to make the plane closer to the camera, but I did not know how to proceed with the calculation, scaling just the z was clearly wrong.  
Your solution is elegant and good enough for my needs, thanks 😉

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [March 26, 2018, 12:05pm UTC](https://discourse.threejs.org/t/how-to-draw-a-plane-laying-on-the-far-clipping-plane/2221/8 "2018-03-26T12:05:31Z")

</div>

No problem. I would say that there are much simpler ways of calculating the position and size of the plane by the way. For example, one pattern that is commonly used to make objects move with the camera is:

```auto
var object;

camera.add( object );
scene.add( camera );

```

Now if you move the camera, the object will move with it. Then you can create a 1x1 plane, and scale it by the aspect ratio and position it at `z = camera.far`.

Well, there will be some more calculation than that, but it will avoid changing the geometry each frame which you should avoid for performance reasons, especially if you are planning on putting more complex geometry in place of the plane.

---

<div class="post-metadata">

**Author:** ![edap](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/edap/32/180_2.png) [@edap](https://discourse.threejs.org/u/edap)\
**Post date:** [March 26, 2018, 12:44pm UTC](https://discourse.threejs.org/t/how-to-draw-a-plane-laying-on-the-far-clipping-plane/2221/9 "2018-03-26T12:44:13Z")

</div>

“Then you can create a 1x1 plane, and scale it by the aspect ratio and position it at z = camera.far.”  
This is also good 😉 thanks, I will give a try.

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [March 26, 2018, 12:52pm UTC](https://discourse.threejs.org/t/how-to-draw-a-plane-laying-on-the-far-clipping-plane/2221/10 "2018-03-26T12:52:17Z")

</div>

OK, that’s a simplification though! That will just set the plane to the correct aspect ratio, you’ll need to do a bit of trigonometry to figure out the actual length and width at that distance.