The three of multiple mesh combined to achieve the explosion effect as shown in the diagram
You can explode a mesh into triangles pretty easily. But it looks like you want to explode and still keep identifiable pieces. Maybe you could break the model up based on face angle - for an architectural model with lots of flat walls that’s probably possible. Otherwise, I’d say this is something that needs to be done in a modelling program.
Can you share the model you want to explode here? Maybe it’s already split up into pieces.
Hello, this is my own effect, there is a triangle, this is not the effect I want, as shown in the picture
This is how I THREE.BufferGeometryUtils.mergeBufferGeometries (geometries) the component merge
Can you share your code and model here please?
I would move the vertices along their face normal to achieve something like this. Take a look at this viewer’s explode mechanism: http://glb-viewer.blogspot.com/
1 Like
That works well, but only if the model is already split up into separate pieces. In any case, there’s no source code available so it’s not especially helpful.
Thank you very much, I have successfully solved this problem myself. Here are a few ideas to share with you:
- determine the central point of the explosion
- save the center position of the component before merging the model
- exploded in the opposite direction of the explosion point with the center of the original component
1 Like
I tested with a mesh I have in separate parts. It appears to explode the parts out based on their vector(angle) from world origin(0,0,0). Note how some parts have not moved(I think the many rings part may not have been broken up, or all shared the same origin point in this version, it’s an old asset).
The lighting is also rather dark, I had this issue when first bringing the model into Three JS from blender, iirc an HDRI envmap and gamma correction fixed that. I used this asset for an explosion animation too, but my approach was manually placing the parts to an exploded position, and then taking those positions for each part to JS to use for handling animation there between the rest and exploded position.
I suppose an automatic approach could achieve the same with exploding along a single axis like I have, then taking distance between bounding boxes, so long as meshes are grouped/detected in some way, it should produce the same outcome.
This is a screenshot of the exploded position in blender, I don’t have one of it in Three JS on me atm, but looked the same. For animation between the two states I used React-Spring.
2 Likes