如何在Three.js指定网格OCounter上显示DecalGeometry

核心排查与修复步骤 #

• 补全材质纹理绑定
  你的代码中定义了textureDecal但未将其绑定到贴花材质，这是贴花不可见的核心原因。必须在MeshStandardMaterial配置中添加纹理映射：

  const decalMaterial = new THREE.MeshStandardMaterial({
    transparent: true, 
    depthTest: true,   
    depthWrite: false,   
    polygonOffset: true,  
    polygonOffsetFactor: -4,
    map: textureDecal // 关键：绑定贴花纹理
  });
  

• 校准贴花位置与网格坐标系
  自定义网格OCounter的局部坐标系可能和默认立方体/球体不同，先通过边界盒确认网格范围：

  const box = new THREE.Box3().setFromObject(OCounter);
  console.log('OCounter边界范围:', box.min, box.max);
  

  根据输出调整贴花位置，确保贴花处于网格表面（而非内部或超出范围），比如把Z轴位置设为网格最大Z值+0.1：

  new THREE.Vector3(0, 0, box.max.z + 0.1)
  

• 调整贴花尺寸参数
  你设置的贴花Z轴尺寸10过大，会导致贴花被异常裁剪，建议先缩小到1，再根据网格大小适配：

  new THREE.Vector3(2, 2, 1)
  

• 验证网格面朝向
  若OCounter网格的法线方向异常，即使设置DoubleSide也可能影响贴花投射。可临时开启线框模式确认面方向：

  OCounter.material.wireframe = true;
  

  若法线错误，需重新烘焙网格法线，或调整DecalGeometry的欧拉角（如new THREE.Euler(0, Math.PI, 0)）匹配正面朝向。

修正后的完整代码示例 #

// 确保纹理加载完成并配置合理的包裹模式
textureDecal.wrapS = THREE.ClampToEdgeWrapping;
textureDecal.wrapT = THREE.ClampToEdgeWrapping;

// 获取OCounter网格的边界盒，计算贴花位置
const box = new THREE.Box3().setFromObject(OCounter);
const decalPosition = new THREE.Vector3(0, 0, box.max.z + 0.1);

const euler = new THREE.Euler(0, 0, 0, "XYZ");
const decalSize = new THREE.Vector3(2, 2, 1);

const decalImage = new THREE.DecalGeometry(
  OCounter,
  decalPosition,
  euler,
  decalSize
);

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

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

内容的提问来源于stack exchange，提问作者Crapaud