在Three.js中，为一个THREE.TextGeometry对象应用一个发光效果

Question

我花了相当多的时间进行谷歌搜索，看看是否可以在three.js环境中完成这个操作。

我想创建一个基于TextGeometry而不是简单的原始对象（例如Lee StemKoski -shadow glow example中的球体或立方体）的发光效果。

我一直在阅读和尝试Lee StemKoski的例子

特别是他的Shader Glow example，正如所述，该示例适用于简单对象，但与复杂几何形状不兼容。因此，我想知道是否有任何变通方法或其他建议来创建文本周围的发光效果。

问候

w9914420

更新：我决定使用映射概念，通过将图像附加到文本上，可以创建发光效果。在这个例子中，我使用了一个圆，但对于我需要的文本进行映射应该不太困难。

更新：20/3/17 - 所以我尝试使用theeX.atmosphere材质来创建那种难以捉摸的文本发光效果。以下是一些结果。

如您所见，还没有完全实现 - 我遇到的问题是无法更多地平滑外部发光文本的顶点。我不确定是否可能，欢迎任何建议。

用于创建效果的原生代码。

//normal text created  

var geometry2  = threeLab.asset.simpleText('hello','my_font');
var materialme  = new THREE.MeshNormalMaterial();
var mesh    = new THREE.Mesh( geometry2, materialme );
this.scene.add( mesh );


// we create a secondary text object to use as glow
var geometry  = threeLab.asset.simpleText('hello','my_font');

// clone for manipulation
var geoclone = geometry.clone();


//Thes functions are need to make it work in this case
geoclone.mergeVertices();
//geoclone.computeCentroids();
geoclone.computeVertexNormals();
geoclone.computeFaceNormals();

// part of threex library to make the glow scale and expand
THREEx.dilateGeometry(geoclone, 0.5);
var materialz   = THREEx.createAtmosphereMaterial();
var meshHalo    = new THREE.Mesh(geoclone, materialz );

//we have now our glow
this.scene.add( meshHalo );

- W9914420

---

“Glow”是什么意思？有很多种解释方式。这里是一种技术，虽然不是在three.js中，但可以作为一种解决方案。这里是另一种不同的技术，即使用发光贴图。 - gman

@gman 对于我造成的混淆，我表示歉意。我已经根据我要重新创建的示例重新编辑了我的问题。我想要的特效风格是像这个例子一样，但是使用文本而不是简单的球体：Shader-Glow-Example - W9914420

似乎上面链接的发光贴图技术可以实现你想要的效果。 - gman

请查看threex.geometricglow。 - prisoner849

@prisoner849，非常感谢您的帮助，我需要进一步调查。谢谢。 - W9914420

Answer 1

最终，我增加了次要TextGeometry对象的bevelsegments以帮助平滑它。然后，我能够将第一个文本包裹在第二个文本中，如下所示：

通过进一步调整，我将能够使发光效果更加微妙，但目前这个效果已经有效。

感谢大家的意见 :)

- W9914420