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

时间:2017-03-15 20:26:13

标签: javascript three.js webgl

我已经完成了几个小时的谷歌搜索,看看是否可以做到这一点 在three.js环境中。

我想创建一个基于TextGeometry的发光效果,而不是像Lee StemKoski中的球体或立方体对象那样的简单原始效果 - 下面的阴影发光示例。

Lee StemKoski - shadow glow example

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

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

问候

w9914420

更新:我决定采用映射概念,将图像附加到文本上,我可以创建发光效果。在这个例子中,我使用了一个圆圈,但是我不需要为我需要的文本制作地图太难了。

sprite glow effect

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

threex.atmospherematerial

angle view

正如你所看不到的那样 - 我遇到的问题是我无法更多地平滑外部发光文本的顶点。我不确定是否有可能赞赏任何建议。

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

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

1 个答案:

答案 0 :(得分:0)

所以最后我增加了我的辅助TextGeometry对象的 bevelsegments ,这有助于平滑它。然后,我能够将我的第一个文本变成第二个文本,如下所示:

enter image description here

enter image description here

通过进一步调整,我将能够使发光效果更加微妙,但是现在效果很有效。

谢谢大家的输入:)