Explosion effect in textGeometry

Hi guys,
I need a suggestion to do this thing:
I want to load a textGeometry and create an effect of explosion.
After the “explosion” I’d like to be able
to recompose the geometry with the created particles.

Thanks in advance and kind regards,


add second attribute with random garbage, interpolate between that and positions in the vertex shader.


Thank you for the suggestion.
I’ll study a little and after I’ll try!

In this case, it’s better to use a non-indexed buffer geometry. I mean, it will be

new THREE.TextBufferGeometry( _params_ ).toNonIndexed();

Thus you’ll get each face of your geometry as a separate triangle.

1 Like

Maybe this will help. I’ve programmed some explosions.

https://github.com/hofk/THREEg.js/blob/42dfd7a44ea6a327e0164466ad7c04f14b4c9a12/THREEg.js line 1220, 1421, 1495

see https://hofk.de/main/threejs/sandboxthreeg/MagicBoxTHREEg.html examples No. 11 No.12

1 Like

Really thank you guys!
Tomorrow I’ll check all your suggestions and examples!
Have a nice evening / or day :smiley:


The following example could be useful, too:



Although these examples use another library on top of THREE (THREE.BAS), I found them really useful to pick apart and apply the logic to THREE (without the BAS library).

Plus, they’re really cool, inspiring demo’s anyway.


Thanks again.
The particles effect I would try to create is similar to the last 3 demos.
In my idea the particles must be spreaded randomly in the viewport.
Then It’s a good starting point!

It’s similar to a demo I built here - https://codepen.io/Staak/pen/vaPbvz

I know it’s not text, but the principle is the same, but the shader(s) and the JS might be helpful for you to pick through.

Define a start and end position for the vertices and then animate between the two states. Looks at the initToujoursJaune function line.


This is basically the base of the effect I want try to do!
I’ve used threejs developing 3d configurator
and sometimes for simple displacements on the images.
I think the level of this kind of animation/interaction is very high
then I must start to learn :smiley:

These code written in R75 version can’t understand how to convert it to the latest three version.

Three.js writes error into console in writes what is need to do.