对 Three.js 中的 THREE.TextGeometry 对象应用发光效果

Question

我已经进行了好几个小时的 google 搜索，看看是否可以做到在 three.js 环境中。

我想创建基于 TextGeometry 的发光效果，而不是类似于下面 Lee StemKoski 中的类似球体或立方体对象的简单图元 - 阴影发光示例。

我一直在阅读和试验 Lee StemKoski examples

特别是他的 Shader Glow example，如上所述，它适用于简单的对象，但不适用于复杂的几何形状。因此，我想知道是否有任何解决方法或其他关于如何在文本周围创建发光效果的建议。

问候

w9914420

更新：我决定通过将图像附加到文本来使用映射概念，我可以创建发光效果。在这个例子中我使用了一个圆圈，但是为我需要的文本做一个地图应该不会太难。

更新：2017 年 3 月 20 日 - 所以我尝试使用 theeX.atmosphere material 来创建难以捉摸的文本发光效果。以下是部分结果。

正如您所看到的那样——我遇到的问题是我无法进一步平滑外发光文本的顶点。我不确定是否有任何建议值得赞赏。

用于创建效果的本机代码。

//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 );

Answer 1

所以最后我增加了辅助 TextGeometry 对象的 bevelsegments，这有助于平滑它。然后我就可以像这样将我的第一个文本封装到第二个文本中：

通过进一步调整，我将能够获得更微妙的发光效果，但目前效果还可以。

谢谢大家的意见:)

对 Three.js 中的 THREE.TextGeometry 对象应用发光效果

Apply a glow effect onto a THREE.TextGeometry object in Three.js

javascript

webgl

three.js