How to display DecalGeometry from ThreeJs on Specific Mesh

Questions
,
1

I have this Mesh: (https://i.stack.imgur.com/TIwyP.png) and I want to display the Decal on the front of the mesh.

I tried this:

    textureDecal.side = THREE.DoubleSide
  const euler = new THREE.Euler(0,0,0, "XYZ");
  const decalImage = new DecalGeometry(
    OCounter,
    new THREE.Vector3(0, 0, 5),
    euler,
    new THREE.Vector3(2,2, 10)
  );

  
  const decalMaterial = new THREE.MeshStandardMaterial({
    transparent: true, 
    depthTest: true,   
    depthWrite: false,   
    polygonOffset: true,  
    polygonOffsetFactor: -4,   
    
  });


  decalMaterial.side = THREE.DoubleSide;
  DecalLogo = new THREE.Mesh(decalImage, decalMaterial);
  scene.add(DecalLogo);

I tried with a cube and a sphere, it works properly by changing Vector3 values in DecalGeometry.

But even with various settings on this mesh, it does not display at all, not even a small portion of the decal.

2

I see absolutely no problem in applying a decal to a shape like this. I made an experiment and here is the result (the decal mesh is yellow):

image
image1346×796 54.8 KB

Note, that decals work on meshes. If your object is not a mesh, the decal will not work. Are you sure your object is actually a THREE.Mesh? Maybe it is a THREE.Group containing the mesh?

1 Like
3

Thanks for your reply !

image
image1620×676 62.2 KB

This is a mesh and my object is not a group sure. It’s a mesh from blender btw.
I import it at .glb. It’s maybe somewhere in the parameters of the object.

4

Can you try it with the 3D model I have ?
Mesh.glb (1.1 MB)

image
image774×644 8.3 KB

On a Cube it works find but
image
image598×587 12.7 KB

nothing on this.
I have absolutely no idea what it can be.

5

@PavelBoytchev can you copy/paste the decal code in this forum…seems like @Crapaud needs to just compare notes

6

Decals work with your GLB file:

image
image803×446 18.9 KB

I had to to ensure several things:

  1. the model is a pure THREE.Mesh (see code comment 1)
  2. the scale of the mesh is 1, but the geometry itself is scaled (see code comments 2 and 3)
  3. the decal is created after the model is completely loaded (see code comment 4)

As you did not share your code of how the object is loaded, I guess you may have items 1 and 3 done, but not item 2. It appears decal considers the geometry of a mesh and ignores the scale of the mesh. So, in item 2 I rescale the geometry and set the mesh scale back to 1. Thus the object looks as big as before, but now the decal is happy.

var model;

new GLTFLoader().load( './Mesh.glb', gltf => {
	model = gltf.scene.children[0]; /* 1 */
	model.geometry.scale( model.scale.x, model.scale.y, model.scale.z ); /* 2 */
	model.scale.set( 1, 1, 1 ); /* 3 */

	scene.add( model );

	var material = new THREE.MeshLambertMaterial( {
		color: 'yellow',
		depthTest: true,
		depthWrite: false,
		polygonOffset: true,
		polygonOffsetFactor: - 4,
	} );

	var decal = new THREE.Mesh( new DecalGeometry(
		model,
		new THREE.Vector3( 5, 0, 0 ),
		new THREE.Euler( 0, 0, 0 ),
		new THREE.Vector3( 10, 12, 8) ),
		material
	);

	scene.add( decal ); /* 4 */
} );
2 Likes
7

It was that, you are right. There was an issue about the scale of my scene and my model. On my blender the scale was 0.001.I just reset the scale to 1 and no problem.
image

Thanks a lot !!!

1 Like
8

Thx Pavel……