Explode onclick


how to explode my canvas onclick animation…


I will be sorry for past information.

My full page detail show here:
How To Explode On click My Canvas

index.html (7.3 KB)

It’s still not so clear what you want to achieve, as I can’t see what’s going on on your provided page because it can’t load scripts. Even if I can get correct links for three.js and OrbitControls.js by myself, I don’t know what is loading.js and what it does.
Maybe providing explanatory pictures with more details will help.


My demo is here : https://codepen.io/dhanrajmanohare/pen/EzMrvg

i like this type : https://jsfiddle.net/gabrieleromanato/XAVmC/

Please help me… i have try explode my canvas but this code not working. :cry:

All I see is a rotating globe.
What have to happen when click? By the way, click what? Renderer’s canvas a whole? Just the globe?

I just have to click on the globe.
When you click on the globe, it should explode the effect.
I tried but it is not working
Please help me.

My live demo here : http://eoniansoftware.com/dev/Earthglobe/

Like this explode effect just example .:- https://workshop.chromeexperiments.com/examples/guiVR/#1--Basic-Usage

Throwing a hammer into the canvas used to work too in the days of CRT screens :slight_smile: those days were fun.

But in all seriousness, would a three-explode-canvas example be helpful here?


So far, I think he needs to explode not the canvas itself, but the globe :slight_smile: (though, I like the idea with the hammer :smiley: )

Could you provide a link to it? :slight_smile:

I’m not an expert threejs, I’m a web designer.
So please suggest me.

To be honest, I still don’t understand what you want to get in the result.

I’m sorry to say that you are not able to understand properly. , But I’m trying to explain to you.

When I click on the globe, then I should have an explosion effect like the picture shown.


With all the respect and my inability to understand: you better build such object, for example, in Blender, load it in the scene and then animate each piece, creating that effect of explosion.

1 Like

It doesn’t actually exist yet but i think we should make a PR for it. Makes sense to be in /src and have lots and lots of PRs after :slight_smile:

Web designers usually design, doctors doctor, and engineers engineer? Have you considered hiring an engineer that would use your wireframes or mocks to implement this?

Closing since the topic is too broad and the discussion gets off topic.

@Dhanraj_Manohare Please try to ask more specific questions in the feature and not request “complete solutions”.


The first result when googling three.js explode seems to be what your screenshot is taken from.

…which also has an article explaining how it’s done

…and the source code is freely available

Did you research these before asking here, as I’ve asked you to do before?

This forum is not a place to find people to do your work for you. Please put the effort in to research topics yourself first. If you still can’t understand something, then post here, and include whatever piece of code you are trying to understand.