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

three.js outer glow for sphere object?

提问by kyeno

I'm building some sort of planetary system in three.jsand I spent couple of hours looking for a decent solution to get an outer glowon one planet - a sphere object with a texture.

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

I came across this example http://stemkoski.github.io/Three.js/Selective-Glow.htmlwhich kind of does the trick, but the thing is - this form of glow also affects the main 3D object resulting in color change (as seen there).

我遇到了这个例子http://stemkoski.github.io/Three.js/Selective-Glow.html哪种方法可以解决问题，但问题是 - 这种形式的辉光也会影响主要的 3D 对象，导致颜色变化（如那里所见）。

Another nice glow example can be found here http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.htmlbut again it glows the entire region, not only "outer" thing.

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

I've been reading some discussion thread about "overrideMaterial" property on GitHub but this seems experimental, unused and undocumented... not even sure if this could solve my problem.

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

Please share your ideas, thanks!

请分享您的想法，谢谢！

回答by Lee Stemkoski

I've worked a bit on separating out the part of the WebGL Globe code (linked to above) that produces the atmospheric effect. A preliminary working version is here:

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

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

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

To the best of my understanding, there are a few interesting things going on in the original code to create the atmospheric effect. First, the glowing texture is placed on another sphere -- let's call it the Atmo Sphere :) -- that surrounds the sphere with the image of earth on it. The Atmosphere material is flipped so that the front side does not render, only the back side, thus it does not obscure the earth sphere even though it surrounds it. Second, the gradient lighting effect is achieved by using a fragment shader rather than a texture. However, the atmosphere will change its appearance if you zoom in and out; this was not evident in the WebGL Globe experiment because zooming was disabled.

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

[updated April 30th]

[4月30日更新]

Next, similar to the source code from

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

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

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

the sphere with the gradient lighting texture (and another black-textured sphere) are placed in a second scene, and then the results from that scene are composed with the original scene using an additive blender. And just so you can experiment with the parameters used to create the glow effect, I have included a couple of sliders so that you can change the values and see the different glow effects that result.

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

I hope this helps you get started. Good luck!

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

[updated June 11]

[6 月 11 日更新]

I have a new example which achieves the same effect in a muchsimpler way, rather than using post-processing and additively blending two scenes, I just changed some of the parameters in the customized material. (It seems obvious in retrospect.) For an updated example, check out:

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

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

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

Still haven't figured out the pan/zoom issues though.

仍然没有弄清楚平移/缩放问题。

[Updated July 24]

[7 月 24 日更新]

I figured out the pan/zoom issues. It requires using a shader; for details about the complexities, see the related question Three.js - shader code for halo effect, normals need transformationand for the final working example, see:

我想出了平移/缩放问题。它需要使用着色器；有关复杂性的详细信息，请参阅相关问题Three.js - 光晕效果的着色器代码，法线需要转换，有关最终工作示例，请参阅：

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

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

I'm pretty happy with the final result, so I will not be updating this answer any more :)

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

回答by Lee Stemkoski

In the example you are referring to, I used a blue glow with additive blending -- if you used a white color instead maybe that would produce the effect you want.

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