移动模型或父组后Three.js DecalGeometry错位问题求解

问题出在坐标系转换错误：你直接使用包围盒中心创建贴花，却忽略了父组位移带来的坐标系差异——Box3.getCenter()默认返回世界空间坐标，但你把贴花添加到了父组group中，导致父组的变换会再次作用于贴花，造成双重偏移。

解决方案一：让贴花随父组同步移动 #

如果你希望贴花跟着父组一起移动，需要将世界空间坐标转换为父组的局部空间坐标，确保贴花的局部位置与父组变换匹配：

// 移动模型组
group.position.y += 0.005;

// 1. 获取targetMesh在父组局部空间的包围盒（不考虑世界变换）
const box = new THREE.Box3().setFromObject(targetMesh, false);
const localCenter = box.getCenter(new THREE.Vector3());

// 2. 将局部中心转换为世界空间，用于DecalGeometry计算贴合位置
const worldCenter = group.localToWorld(localCenter.clone());

// 3. 创建贴花几何（传入世界空间位置）
const decalGeometry = new THREE.DecalGeometry(
    targetMesh,
    worldCenter,
    orientation,
    size
);

// 4. 创建贴花并设置为父组局部空间位置，添加到父组
const decal = new THREE.Mesh(decalGeometry, decalMaterial);
decal.position.copy(localCenter);
group.add(decal);

解决方案二：贴花固定在世界空间 #

如果不需要贴花随父组移动，直接将贴花添加到场景根节点，避免父组变换的影响：

// 移动模型组
group.position.y += 0.005;

// 1. 获取targetMesh的世界空间包围盒中心
const box = new THREE.Box3().setFromObject(targetMesh);
const worldCenter = box.getCenter(new THREE.Vector3());

// 2. 创建贴花几何
const decalGeometry = new THREE.DecalGeometry(
    targetMesh,
    worldCenter,
    orientation,
    size
);

// 3. 将贴花添加到场景而非父组
const decal = new THREE.Mesh(decalGeometry, decalMaterial);
scene.add(decal);

额外提示 #

如果需要贴花精准贴合模型的某个表面（而非包围盒中心），建议使用**射线投射（Raycaster）**获取模型表面的世界空间交点，再用上述坐标系转换方法处理，能得到更准确的贴花位置。

内容的提问来源于stack exchange，提问作者Murat Topçu