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:

Thank you very much!

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./watch?v=ckLghsutfmA

Thank you very much!

• javascript
• model
• three.js
• geometry
• webgl

• The youtube video even has a blog entry linked to it explaining the basic technique. Did you try this? blog.wolfire./2009/06/how-to-project-decals – GuyGood Commented Jan 12, 2014 at 19:56
• yeah i read through it. problem is that im not that big of a math guy and never heard of the algorithms he's talking about in there. i also dont have any "starting point"... i was wondering if there's some kind of plugin, code sample or something out there which would make it clearer to understand – seanarcher Commented Jan 13, 2014 at 21:56

2 Answers 2

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

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

And here's another take on this:

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

Both of these are based on the technique described here.

In 2023 you can use three/addons/geometries/DecalGeometry.js

Here is a demo: https://threejs/examples/#webgl_decals

Here is the source code: https://github./mrdoob/three.js/blob/master/examples/webgl_decals.html

Here is the documentation: https://threejs/docs/#examples/en/geometries/DecalGeometry

Here is snippet of code:

const geometry =  new DecalGeometry( mesh, position, orientation, size );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );