How to add Decals to an Object in Three JS

Question

i just started using the three.js library and have a question concerning decals:

I created a sphere with a texture on it. How is it possible to add another texture on top of it without repeating it. Short example: if my sphere gets "hit" i want to add another texture on it that looks like a bullethole - of course only on that certain point. Im thinking of a transparent .png-file for that.

Is that the right approach? Or do i have to make another sphere for each "impact" that is slightly bigger than the original sphere, and then give it the bullethole texture, which will be a transparent png, and find a way to only show it once on the new sphere with a certain size ?

Can somebody point me in the right direction? I'm new to 3D-Design / coding / threejs

Here's a samply video on youtube of somebody doing it by clicking on an object, but i've no clue how he did that:

http://www.youtube.com/watch?v=ckLghsutfmA

Thank you very much!

Answer 1

It seems that the author of the video you had linked released the code behind it on github:

https://github.com/benpurdy/threejs-decals

And here's another take on this:

https://github.com/spite/THREE.DecalGeometry

Both of these are based on the technique described here.