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:
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?
Hi.
Using scene.background with THREE.Texture() isn’t an option? https://jsfiddle.net/prisoner849/rh5p2Ln6/
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.
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 
Later it will be a more complex geometry than a plane, but first I need to get a plane working.
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:
// 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);
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.
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 
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:
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.
“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.
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.