Three.js DecalGeometry appears misaligned after moving model or group

Question

'm using DecalGeometry in Three.js to project a logo onto a mesh. It works fine if the model hasn't been moved after loading. But if I translate the model or its parent group (e.g., along the Y axis), then apply the decal, the decal appears in the wrong position — either above or below the intended surface.

// Move model group
group.position.y += 0.005;

// Create decal
const box = new THREE.Box3().setFromObject(targetMesh);
const center = box.getCenter(new THREE.Vector3());

const decalGeometry = new DecalGeometry(
    targetMesh,
    center, // Seems incorrect after movement
    orientation,
    size
);

const decal = new THREE.Mesh(decalGeometry, decalMaterial);
group.add(decal);

What’s the correct way to compute the decal position after the model or its parent group has been moved, so that the decal aligns properly with the mesh surface?

Any insight would be greatly appreciated!

Łukasz Daniel Mastalerz · Accepted Answer · 2025-05-31 20:30:01Z

Your problem probably lies in world space and local space... therefore center is not necessarily center, and also in the fact that the "main" mesh is inside the group. You add Decal to a group, so Decal inherits the group's transformations, so its position should also be appropriately shifted in the local group space. Try to change the position from the world space to the local group space.

DecalGeometry requires a position in world space relative to the targetMesh, therefore we need to provide the position in the mesh world space, and the mesh has a location relative to the group - so we need to correct the decal position relative to the targetMesh, not the group. Try add a decal to the same parent as group or to scene.

const group = new THREE.Group();
group.add(targetMesh);
scene.add(group);
group.position.y += 0.005;

const box = new THREE.Box3().setFromObject(targetMesh);
const worldCenter = box.getCenter(new THREE.Vector3());

const localCenter = group.worldToLocal(worldCenter.clone());

const decalGeometry = new DecalGeometry(
  targetMesh,
  worldCenter, 
  orientation,
  size
);
const decal = new THREE.Mesh(decalGeometry, decalMaterial);
scene.add(decal);

Collectives™ on Stack Overflow

Three.js DecalGeometry appears misaligned after moving model or group

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related