球体对象的three.js外发光？

Question

我正在 three.js 中构建某种行星系统，我花了几个小时寻找一个合适的解决方案，以便在一个行星上获得 外发光 -具有纹理的球体对象。

我遇到了 http://stemkoski.github.io/Three.js/Selective-Glow.html 这个例子，它的作用是什么，但问题是 - 这种发光形式也会影响主要的 3D 对象，导致颜色变化（如图所示）。

另一个很好的发光示例可以在这里找到http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html，但它再次发光整个区域，而不仅仅是“外部”的东西。

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

请分享您的想法，谢谢！

Answer 1

在您所指的示例中，我使用了带有加色混合的蓝色发光 - 如果您使用白色代替，可能会产生您想要的效果。

Answer 2

我在分离出产生大气效果的 WebGL Globe 代码部分（链接到上面）方面做了一些工作。初步工作版本在这里：

http://stemkoski.github.io/Three.js/Atmosphere.html

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

[4 月 30 日更新]

接下来，类似于源代码来自

http://stemkoski.github.io/Three.js/Selective-Glow.html

具有渐变照明纹理的球体（和另一个黑色纹理球体）被放置在第二个场景中，然后使用加法混合器将该场景的结果与原始场景合成。为了让您可以试验用于创建发光效果的参数，我提供了几个滑块，以便您可以更改值并查看产生的不同发光效果。

我希望这可以帮助您入门。祝你好运！

[6 月 11 日更新]

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

http://stemkoski.github.io/Three.js/Shader-Halo.html

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

[7 月 24 日更新]

我发现了平移/缩放问题。它需要使用着色器；有关复杂性的详细信息，请参阅相关问题Three.js - shader code for halo effect, normals need transformation，有关最终工作示例，请参阅：

http://stemkoski.github.io/Three.js/Shader-Glow.html.

我对最终结果很满意，所以我不会再更新这个答案了:)