javascript Three.js - 发光的球体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16360028/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Three.js - sphere that glows
提问by karlosss
I have a problem. I want to make a sphere which works like a source of light (sun). I found out that meshPhongMaterialhas an option like emissive: colorand shininess: intensitybut I did not manage to code the sun. Does anyone know how to do it? Thank you for answers!
我有个问题。我想制作一个像光源（太阳）一样工作的球体。我发现meshPhongMaterial有一个类似的选项emissive: color，shininess: intensity但我没有设法对太阳进行编码。有谁知道怎么做？谢谢你的回答！
采纳答案by Abstract Algorithm
meshPhong material has parameters 'emissive' and 'shininess' that affect the calculations within material shader, but those won't give you the effect that you want, they are just used for calculating final color.
meshPhong 材质的参数“emissive”和“shininess”会影响材质着色器中的计算，但这些参数不会给您想要的效果，它们仅用于计算最终颜色。
You can put spotlight, for example, at the exact position as the sphere, so it would lighten up object around it. However, if you want to achieve the effect of glowing sphere, you would have to write post-processing shader:
例如，您可以将聚光灯放在与球体相同的位置，这样它就会照亮周围的物体。但是，如果要实现发光球体的效果，则必须编写后处理着色器：
- Render sphere to framebuffer 1.
- Render same sphere colored yellow (or some other bright color) to framebuffer 2.
- Blur content in framebuffer 2 as post-processing effect.
- Blend original image (framebuffer 1) and blurred framebuffer 2 together to produce the final image.
- 将球体渲染到帧缓冲区 1。
- 将相同的球体呈现为黄色（或其他一些亮色）到帧缓冲区 2。
- 模糊帧缓冲区 2 中的内容作为后处理效果。
- 将原始图像（帧缓冲区 1）和模糊帧缓冲区 2 混合在一起以生成最终图像。
Also, some examples don't use actual post-processing to achieve glowing, but they use trick.
此外，一些示例不使用实际的后处理来实现发光，但它们使用了技巧。
You render sphere and then render some quad with "glow aura" texture in the back. Visit: http://threegraphs.com/charts/sample/world/to see how you can maybe simulate glow and create eclipse-like circle around sphere.
你渲染球体，然后在后面渲染一些带有“glow aura”纹理的四边形。请访问：http: //threegraphs.com/charts/sample/world/以了解如何模拟发光并在球体周围创建类似日食的圆圈。
回答by Lee Stemkoski
If you are looking to create a glow-style effect, I have a written a number of examples at http://stemkoski.github.io/Three.js/that may be helpful, including:
如果您想创建发光样式的效果，我在http://stemkoski.github.io/Three.js/上写了许多可能有用的示例，包括：
http://stemkoski.github.io/Three.js/Selective-Glow.html
with accompanying blog post
http://stemkoski.blogspot.com/2013/03/using-shaders-and-selective-glow.html
http://stemkoski.github.io/Three.js/Selective-Glow.html
以及随附的博客文章
http://stemkoski.blogspot.com/2013/03/using-shaders-and-selective-glow.html
as well as the more atmospheric-style glow effects
以及更大气风格的发光效果
http://stemkoski.github.io/Three.js/Atmosphere.html
and
http://stemkoski.github.io/Three.js/Shader-Halo.html
http://stemkoski.github.io/Three.js/Atmosphere.html
和
http://stemkoski.github.io/Three.js/Shader-Halo.html
Hope this helps!
希望这可以帮助！
回答by karlosss
Since you don't have a specific problem, I can't give you a specific answer. You seem a little lost though, so here's the thing you may be missing: In order for something to look like a source of light it must do two things:
因为你没有具体的问题，我不能给你一个具体的答案。不过你似乎有点迷茫，所以这就是你可能缺少的东西：为了让某物看起来像一个光源，它必须做两件事：
- Illuminate: You achieve this by creating a new Light object inside it. It is a good idea to put both your object and the light inside a new THREE.Object3D.
- Glow: You will need to create a shader to blure the pixels around that object. I found a tutorial specific for three.js for you here: Three.js glow tutorial.
- Illuminate：您可以通过在其中创建一个新的 Light 对象来实现这一点。将您的对象和灯光都放在一个新的 THREE.Object3D 中是个好主意。
- 发光：您需要创建一个着色器来模糊该对象周围的像素。我在这里为您找到了一个专门针对three.js 的教程：Three.js 发光教程。
There are more advanced techniques which you could try, like adding godrays.
您可以尝试更高级的技术，例如添加godrays。
I wish you luck.
祝你好运。
