# Model explosion

**URL:** <https://discourse.threejs.org/t/model-explosion/20787>\
**Category:** Questions\
**Created:** [November 17, 2020, 8:41am UTC](https://discourse.threejs.org/t/model-explosion/20787 "2020-11-17T08:41:28Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Blessy\_Sebastian](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/blessy_sebastian/32/14510_2.png) [@Blessy\_Sebastian](https://discourse.threejs.org/u/Blessy_Sebastian)\
**Post date:** [November 17, 2020, 8:41am UTC](https://discourse.threejs.org/t/model-explosion/20787/1 "2020-11-17T08:41:28Z")

</div>

Hello everyone …I want to add the functionality MODEL EXPLOSION in my code…but i don’t know how to make it happen…I want to explode my model in a way shown in this link: [https://glb-viewer.blogspot.com/](https://glb-viewer.blogspot.com/) .  
Please help me out…Thanks in advance

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [November 17, 2020, 8:58am UTC](https://discourse.threejs.org/t/model-explosion/20787/2 "2020-11-17T08:58:05Z")

</div>

To explode model by parts:

1. Calculate model centre (or just assume `(0, 0, 0)`.)
2. For each submesh of the model calculate direction vector towards the centre.
3. Offset each submesh by `vectorToCentre.multiplyScalar(offsetScale)` (mind, do not recalculate the centre vector.)

To explode model by faces you have a few ways. The easiest is probably creating a dynamic canvas texture and using it as a displacement map for the model and it’s submeshes - then set the displacement scale to some high value (when you paint the canvas black the model will stay together, when you paint it white all faces of the model will be displaced by that value.)

Also, [this demo](https://github.com/mrdoob/three.js/blob/95ef309c79158aa506f3f7ddeab769e7c4908187/examples/webgl_modifier_tessellation.html) may help you.

---

<div class="post-metadata">

**Author:** ![Blessy\_Sebastian](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/blessy_sebastian/32/14510_2.png) [@Blessy\_Sebastian](https://discourse.threejs.org/u/Blessy_Sebastian)\
**Post date:** [November 17, 2020, 9:12am UTC](https://discourse.threejs.org/t/model-explosion/20787/3 "2020-11-17T09:12:38Z")

</div>

Thank you…let me try this…I saw that example but they are using text and I am using an externally loaded gltf model…will there be any change?  
I am new in this area that’s why I am asking this…