Force A Sprite Object To Always Be In Front Of Skydome Object In THREE.js

I currently have a custom shader draw a gradient on a skydome and would like to have a sun/moon in front of the skydome (from users perspective). The easiest way to do this is to h

Solution 1:

Make sure your skydome is drawn before any other object and disable the depthWrite / depthTest flags on the material (depthWrite being the important thing here):

yourmaterial = new THREE.ShaderMaterial({...});
yourmaterial.depthWrite = false;
yourmaterial.depthTest = false;
skydome.renderDepth = 1e20;

where skydome is the mesh on which you have applied yourmaterial.