CODEWITHSUNDEEP
javascriptthree.jswebgl
W9914420
W9914420

Reputation: 705

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

I have done quite a few hours of google search to see if this can be done within the three.js environment.

I want to create a glow effect based on a TextGeometry and not a simple primitive like a sphere or cube object similar to the one in Lee StemKoski - shadow glow example below.

Lee StemKoski - shadow glow example

I have been reading and experimenting with Lee StemKoski examples

In particular with his Shader Glow example which as stated works well with simple objects but not with complex geometric shapes. Therefore I was wondering if there are any work arounds to this or other suggestions to how one could create a glow effect around text.

regards

w9914420

UPDATE: I decided to go with the mapping concept by attaching an image to the text I can create a glow effect. In this example I used a circle, but should not be too difficult to do a map for the text that I need.

sprite glow effect

UPDATE: 20/3/17 - So I had an attempt at using the theeX.atmosphere material to create that elusive text glow effect. Here are some of the results.

threex.atmospherematerial

angle view

As you can see not quite there yet - the issue that I have is I am not able to smooth the vertices of the outer glow text more. I am not sure if it is possible any advice appreciated.

Native code used to create effect.

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

Upvotes: 3

Views: 6485

Answers (1)

W9914420
W9914420

Reputation: 705

So In the end I increased the bevelsegments of my secondary TextGeometry object which helped to smooth it. I was then able to encase my first text into the second like so:

enter image description here

enter image description here

With further tweaking I will be able to get the glow effect more subtle, but for now the effect works.

Thank you all for the input :)

Upvotes: 1

Related Questions