Javascript 球体对象的3.js外部辉光?

Javascript 球体对象的3.js外部辉光?,javascript,3d,three.js,webgl,Javascript,3d,Three.js,Webgl,我正在用three.js构建某种行星系统,我花了几个小时寻找一个合适的解决方案,在一个行星上获得外部辉光——一个具有纹理的球体对象 我遇到了这样一个例子,这是一种技巧,但问题是-这种形式的辉光也会影响主要的3D对象,导致颜色变化(如图所示) 另一个很好的发光示例可以在这里找到,但它再次发光整个区域,而不仅仅是“外部”的东西 我一直在阅读一些关于GitHub上“OverrideMatary”属性的讨论,但这似乎是实验性的、未使用的和未记录的。。。甚至不确定这是否能解决我的问题 请分享你的想法,谢谢

我正在用three.js构建某种行星系统,我花了几个小时寻找一个合适的解决方案,在一个行星上获得外部辉光——一个具有纹理的球体对象

我遇到了这样一个例子,这是一种技巧,但问题是-这种形式的辉光也会影响主要的3D对象,导致颜色变化(如图所示)

另一个很好的发光示例可以在这里找到,但它再次发光整个区域,而不仅仅是“外部”的东西

我一直在阅读一些关于GitHub上“OverrideMatary”属性的讨论,但这似乎是实验性的、未使用的和未记录的。。。甚至不确定这是否能解决我的问题


请分享你的想法,谢谢

在您所指的示例中,我使用了添加混合的蓝光——如果您使用白色,可能会产生您想要的效果

我在分离产生大气效果的WebGL全球代码部分(链接到上面)方面做了一些工作。初步工作版本如下:

据我所知,在创建大气效果的原始代码中有一些有趣的事情。首先,发光纹理被放置在另一个球体上——我们称之为Atmo球体:)——该球体周围有地球图像。将翻转大气材质,以便不渲染正面,而只渲染背面,因此即使地球球体围绕它,也不会遮挡它。其次,渐变照明效果是通过使用片段着色器而不是纹理来实现的。但是,如果放大和缩小,大气将改变其外观;这在WebGL地球仪实验中并不明显,因为缩放被禁用

[4月30日更新]

接下来,类似于

将具有渐变照明纹理的球体(和另一个黑色纹理球体)放置在第二个场景中,然后使用附加混合器将该场景的结果与原始场景合成。为了让你可以试验用于创建光晕效果的参数,我提供了两个滑块,这样你就可以更改值并看到不同的光晕效果

我希望这能帮助你开始。祝你好运

[6月11日更新]

我有一个新的示例,它以一种更简单的方式实现了相同的效果,而不是使用后期处理和添加混合两个场景,我只是更改了自定义材质中的一些参数。(回想起来似乎很明显。)有关更新的示例,请查看:

但仍然没有解决平移/缩放问题

[7月24日更新]

我解决了平移/缩放问题。它需要使用着色器;有关复杂性的详细信息,请参见相关问题,最后一个工作示例,请参见:


我对最终结果非常满意,因此我将不再更新此答案:)

请您发布一个指向“OverrideMatary”讨论线程的链接,好吗?因为我是新用户,它不允许我发布超过2个链接。:)请看这个相关问题:非常感谢@WestLangley!我不是GLSL程序员,但这似乎是开箱即用的解决方案,明天将进行精确分析。:)开源,这里有下载链接:谢谢回复!我已经试过了——白色仍然会影响原始图像。我将在SecOk中发布我的代码,第一个示例,我只渲染主渲染器,单遍:第二个示例,我使用您的方法,使用composer渲染多遍:唯一的区别在于
onRenderLoop
callbackNice one Lee!看起来很有趣!真不敢相信你花了这么多时间解决这个问题,非常感谢!我现在就去看看。我欠你一个人情:)如果我可以向你建议一件事(仍然是我需要自己实现的事情)。这对于示例或其他任何内容来说都不是很重要,但您的浏览器调整大小事件无法处理Atmo球体。:)Proszęuprzejmy,kyeno——这是一个有趣的问题,一个我一直想做的项目。关于浏览器大小调整问题,您是对的,我使用
THREEx.WindowResize(渲染器、相机)
来处理这个问题,并且需要为具有光晕效果的次场景设置类似的设置。如果你觉得你“欠我的”,你可以用three.js标签帮助其他人提问来偿还。。。而且,没有什么比投票更能表达“谢谢”了:D完全同意w Dmitry。这很酷,但与所有新的threejs代码不兼容。@LeeStemkoski您好,这个示例似乎不适用于新的three.js版本。请你更新一下好吗?谢谢