Search code examples
2dthree.jsgradient

three.js skydome with gradient


I would like to add a sphere with a 2d gradient as texture to create a skydome. I read that in openGL this is often solved by rendering the skybox without depthtest in an additonal pass. I disabled depthTest on my sphere so everything else is drawn in front of it, it's kinda giving me the disired effect but depending on the camera angle it clips through other objects in my scene.

I was looking at several examples which make use of THREE.EffectComposer and a second scene, I may be completely after the wrong thing here but I think that could solve this. The thing is I havent ever touched the effectComposer and have no idea at all how to work with it and which things i exactly need.

I would aprreciate any input on this, maybe I'm after the wrong stuff at all.


Solution

  • Here are two three.js examples in which a skydome with a gradient is created. They do not involve EffectComposer or disabling depth test.

    1. https://threejs.org/examples/#webgl_lights_hemisphere
    2. https://threejs.org/examples/#webgl_materials_lightmap