# Explosion effect in textGeometry

**URL:** <https://discourse.threejs.org/t/explosion-effect-in-textgeometry/12624>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [February 9, 2020, 7:37pm UTC](https://discourse.threejs.org/t/explosion-effect-in-textgeometry/12624 "2020-02-09T19:37:01Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![DidoMarchet](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/didomarchet/32/9136_2.png) [@DidoMarchet](https://discourse.threejs.org/u/DidoMarchet)\
**Post date:** [February 9, 2020, 7:37pm UTC](https://discourse.threejs.org/t/explosion-effect-in-textgeometry/12624/1 "2020-02-09T19:37:01Z")

</div>

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,

Davide

---

<div class="post-metadata">

**Author:** ![makc3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makc3d/32/10452_2.png) [@makc3d](https://discourse.threejs.org/u/makc3d)\
**Post date:** [February 9, 2020, 8:02pm UTC](https://discourse.threejs.org/t/explosion-effect-in-textgeometry/12624/2 "2020-02-09T20:02:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![DidoMarchet](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/didomarchet/32/9136_2.png) [@DidoMarchet](https://discourse.threejs.org/u/DidoMarchet)\
**Post date:** [February 9, 2020, 8:14pm UTC](https://discourse.threejs.org/t/explosion-effect-in-textgeometry/12624/3 "2020-02-09T20:14:30Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [February 9, 2020, 8:24pm UTC](https://discourse.threejs.org/t/explosion-effect-in-textgeometry/12624/4 "2020-02-09T20:24:54Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [February 9, 2020, 8:56pm UTC](https://discourse.threejs.org/t/explosion-effect-in-textgeometry/12624/5 "2020-02-09T20:56:56Z")

</div>

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

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

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

---

<div class="post-metadata">

**Author:** ![DidoMarchet](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/didomarchet/32/9136_2.png) [@DidoMarchet](https://discourse.threejs.org/u/DidoMarchet)\
**Post date:** [February 9, 2020, 10:44pm UTC](https://discourse.threejs.org/t/explosion-effect-in-textgeometry/12624/6 "2020-02-09T22:44:47Z")

</div>

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

Davide

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [February 10, 2020, 10:36am UTC](https://discourse.threejs.org/t/explosion-effect-in-textgeometry/12624/7 "2020-02-10T10:36:40Z")

</div>

The following example could be useful, too:

[https://threejs.org/examples/webgl\_modifier\_tessellation](https://threejs.org/examples/webgl_modifier_tessellation)

---

<div class="post-metadata">

**Author:** ![danlong](https://avatars.discourse-cdn.com/v4/letter/d/58f4c7/32.png) [@danlong](https://discourse.threejs.org/u/danlong)\
**Post date:** [February 10, 2020, 10:48am UTC](https://discourse.threejs.org/t/explosion-effect-in-textgeometry/12624/8 "2020-02-10T10:48:44Z")

</div>

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.

https://codepen.io/zadvorsky/embed/preview/xVrMMO?height=300&slug-hash=xVrMMO&default-tabs=js,result&host=https://codepen.io

https://codepen.io/zadvorsky/embed/preview/BKJQep?height=300&slug-hash=BKJQep&default-tabs=js,result&host=https://codepen.io

https://codepen.io/zadvorsky/embed/preview/reYxQG?height=300&slug-hash=reYxQG&default-tabs=js,result&host=https://codepen.io

---

<div class="post-metadata">

**Author:** ![DidoMarchet](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/didomarchet/32/9136_2.png) [@DidoMarchet](https://discourse.threejs.org/u/DidoMarchet)\
**Post date:** [February 10, 2020, 1:28pm UTC](https://discourse.threejs.org/t/explosion-effect-in-textgeometry/12624/9 "2020-02-10T13:28:50Z")

</div>

Cool!  
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!

---

<div class="post-metadata">

**Author:** ![danlong](https://avatars.discourse-cdn.com/v4/letter/d/58f4c7/32.png) [@danlong](https://discourse.threejs.org/u/danlong)\
**Post date:** [February 10, 2020, 4:38pm UTC](https://discourse.threejs.org/t/explosion-effect-in-textgeometry/12624/10 "2020-02-10T16:38:52Z")

</div>

It’s similar to a demo I built here - [https://codepen.io/Staak/pen/vaPbvz](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.

---

<div class="post-metadata">

**Author:** ![DidoMarchet](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/didomarchet/32/9136_2.png) [@DidoMarchet](https://discourse.threejs.org/u/DidoMarchet)\
**Post date:** [February 10, 2020, 6:52pm UTC](https://discourse.threejs.org/t/explosion-effect-in-textgeometry/12624/11 "2020-02-10T18:52:21Z")

</div>

Yes!  
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 😃

---

<div class="post-metadata">

**Author:** ![Qiumeng12](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/qiumeng12/32/19371_2.png) [@Qiumeng12](https://discourse.threejs.org/u/Qiumeng12)\
**Post date:** [August 30, 2021, 9:24am UTC](https://discourse.threejs.org/t/explosion-effect-in-textgeometry/12624/12 "2021-08-30T09:24:30Z")

</div>

> [@danlong](#):
>
> 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.

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

---

<div class="post-metadata">

**Author:** ![Chaser\_Code](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chaser_code/32/20199_2.png) [@Chaser\_Code](https://discourse.threejs.org/u/Chaser_Code)\
**Post date:** [August 30, 2021, 10:26am UTC](https://discourse.threejs.org/t/explosion-effect-in-textgeometry/12624/13 "2021-08-30T10:26:07Z")

</div>

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