如何仅在USDZ模型的画框内部显示纹理？

问题描述 #

我用以下代码给.usdz格式的画框模型添加图片：

var imageMaterial = UnlitMaterial()
imageMaterial.color = .init(tint: .white, texture: .init(texture))
modelEntity.model?.materials = [imageMaterial]        
anchorEntity.addChild(modelEntity)

但图片会覆盖画框的边框，我需要仅在画框内部区域显示图片，边框保持原有样式。

画框原始效果：

添加图片后的效果：

解决方案 #

方案1：拆分模型材质（推荐） #

问题根源是你的.usdz模型里，画框边框和内部区域共用了同一个材质。解决思路是在建模软件（如Blender、Maya）中：

• 选中画框内部的面，单独分配一个新的材质组
• 导出.usdz时保留多个材质通道
• 代码中只替换对应内部区域的材质：

// 假设模型有2个材质，索引1对应内部区域材质
if let materials = modelEntity.model?.materials, materials.count > 1 {
    var imageMaterial = UnlitMaterial()
    imageMaterial.color = .init(tint: .white, texture: .init(texture))
    var updatedMaterials = materials
    updatedMaterials[1] = imageMaterial // 替换内部材质
    modelEntity.model?.materials = updatedMaterials
}
anchorEntity.addChild(modelEntity)

方案2：独立添加平面实体 #

如果不想修改原模型，可以创建一个PlaneEntity，调整它的位置、大小和旋转，让它刚好嵌入画框内部，然后给这个平面设置图片材质：

// 创建平面实体，尺寸匹配画框内部
let planeEntity = ModelEntity(mesh: .generatePlane(width: 0.8, height: 0.6)) // 尺寸根据实际画框调整
var imageMaterial = UnlitMaterial()
imageMaterial.color = .init(tint: .white, texture: .init(texture))
planeEntity.model?.materials = [imageMaterial]
// 调整平面位置，避免和画框重叠
planeEntity.position = SIMD3<Float>(0, 0, 0.01) 
anchorEntity.addChild(modelEntity) // 添加原画框
anchorEntity.addChild(planeEntity) // 添加图片平面

方案3：调整UV映射（进阶） #

如果模型是单个Mesh且无法拆分材质，可以在代码中调整纹理的UV坐标，让图片只显示在内部区域：

guard let mesh = modelEntity.model?.mesh as? MeshResource else { return }
// 修改UV数据，限制图片映射范围
var modifiedUVs: [SIMD2<Float>] = []
// 假设原UV中内部区域对应(0.1,0.1)到(0.9,0.9)，需根据实际模型调整
for uv in mesh.vertexAttributes[.texcoord0].data as? [SIMD2<Float>] ?? [] {
    let clampedUV = SIMD2(
        max(0.1, min(0.9, uv.x)),
        max(0.1, min(0.9, uv.y))
    )
    modifiedUVs.append(clampedUV)
}
// 创建新Mesh资源
let newMesh = try! MeshResource.generate(from: mesh.vertices, attributes: [
    MeshAttribute(name: .texcoord0, data: modifiedUVs)
])
modelEntity.model?.mesh = newMesh
// 设置材质
var imageMaterial = UnlitMaterial()
imageMaterial.color = .init(tint: .white, texture: .init(texture))
modelEntity.model?.materials = [imageMaterial]
anchorEntity.addChild(modelEntity)

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