Three.js技术求助：如何在简易场景中创建Decal（贴花）

算力阿峰

2026-7-16

问题排查与修复方案

针对你的Decal贴花功能失效问题，梳理出几个核心问题及修复方式：

材质类型错误：你使用THREE.MeshStandardMaterial创建贴花，但Three.js中贴花需要用专门的THREE.DecalMaterial，它内置了贴花所需的透视融合、深度处理逻辑。替换材质代码：
```
const decalMaterial = new THREE.DecalMaterial({
  map: decalTexture,
  transparent: true,
  depthTest: true,
  depthWrite: false,
  polygonOffset: true,
  polygonOffsetFactor: -4
});
```
射线检测对象遗漏：你的射线检测遍历scene.children，但目标立方体被放在group下，不在检测范围内。将检测对象改为group.children，或者直接把立方体添加到scene中。
贴花旋转未对齐法线：当前代码只设置了贴花位置，没有根据交点的表面法线计算旋转，导致贴花可能朝向错误。添加旋转计算逻辑：
```
const q = new THREE.Quaternion();
q.setFromUnitVectors(new THREE.Vector3(0, 1, 0), intersect.face.normal);
decalMesh.setRotationFromQuaternion(q);
```
纹理跨域风险：你引用的外部纹理可能存在跨域限制，建议替换为本地纹理或确认资源允许跨域访问。