Sticker over mesh with normal map

Questions
, , , , , ,
1

Problem statement :
There are balls (sphere geometry) with normal maps, and I need to place some stickers over it.

What I have tried so far :
I’m having one simple golf ball, sphere geometry with normal map,
When I try to place decal geometry over the golf ball, it does not take the normal from the golf ball.
I understand that the decal geometry is a mesh on it’s own and needs it’s own normal map. If I give normal map to the decal then scaling and rotations it the problem, matching it with golf ball’s normal map scaling and rotation.

I also tried getting rid of decal geometry and just using material[map] for sticker. e.g :

      const sphere = new THREE.SphereGeometry(1, 32, 32);
      sphere.position = new THREE.Vector3(0, 0, 0);
      sphere.rotation = new THREE.Euler(0, 0, 0, 'XYZ');
      sphere.visible = true;
      sphere.castShadow = true;

      const baseMaterial = new THREE.MeshPhysicalMaterial({
        color: 0xFFFFFF,

        map: decalMap,
        normalMap: normalMap,

        clearcoat: 1.0,
        clearcoatNormalMap: clearCoatMap,
        clearcoatNormalScale: new THREE.Vector2(2.0, -2.0)
      });

      const mesh = new THREE.Mesh(sphere, baseMaterial);

      scene.add(mesh);

This worked for me, see the output :

golfball.PNG
golfball.PNG1248×935 193 KB

Now the problem with this is,
The .map color is modulated by the diffuse .color
as the docs say :
Material map

Now my texture is affected by the .color in material. which I don’t want.
even If I don’t enter any color it still picks white by default.

I’m very very new with ThreeJs and 3d field.
Any help would be appreciated :slight_smile: