three.js skydome with gradient

那年仲夏 提交于 2019-12-08 01:28:31

问题


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.


回答1:


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

http://mrdoob.github.com/three.js/examples/webgl_lights_hemisphere.html

http://mrdoob.github.com/three.js/examples/webgl_materials_lightmap.html

three.js r.55




回答2:


You dont have to use a cone or other 3D-geometry to simulate a gradient sky. I solved it using a canvas (with 3 gradient-spots, lightblue -> white (horizon) -> darkblue) and draw it as sprite in front of my camera with the right distance to it (fog-distance). You only have to manage the distance when moving/rotating your cam. Tip: Use mesh.scale.set (xx,xx,1) to zoom the canvas-texture to needed size.



来源:https://stackoverflow.com/questions/14416458/three-js-skydome-with-gradient

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!