RealityKit：如何让文本ModelEntity与3D背景框尺寸匹配并动态适配？

问题核心 #

需要实现3D文本与背景框尺寸动态匹配、位置完全对齐，且背景框处于文本后方的层级效果，当前代码存在背景框尺寸固定、位置计算错误的问题。

修改后的完整代码 #

var body: some View {
    RealityView { content in
        let headAnchor = AnchorEntity(.head)
        headAnchor.anchoring.trackingMode = .once
        
        let textEntity = GetText(testString)
        textEntity.name = "test"
        // 设置文本在锚点中的位置
        textEntity.transform.translation = SIMD3<Float>(
            -textEntity.visualBounds(relativeTo: headAnchor).extents.x / 2,
            -1.25,
            -0.75
        )
        textEntity.setParent(headAnchor)
        
        // 获取文本相对于锚点的实际边界
        let textBounds = textEntity.visualBounds(relativeTo: headAnchor)
        let textExtents = textBounds.extents
        // 给背景框添加内边距，避免文本贴边
        let padding: Float = 0.02
        let boxSize = SIMD3<Float>(
            textExtents.x + padding * 2,
            textExtents.y + padding * 2,
            0.05
        )
        
        // 创建紫色背景框
        let backgroundBox = ModelEntity(
            mesh: .generateBox(size: boxSize, cornerRadius: 0.1),
            materials: [UnlitMaterial(color: .purple)]
        )
        
        // 将背景框设为文本的子实体，自动同步位置
        backgroundBox.setParent(textEntity)
        // 调整Z轴偏移，让背景框处于文本后方
        backgroundBox.transform.translation = SIMD3<Float>(0, 0, -0.01)
        
        content.add(headAnchor)
    }
}

func GetText(_ newText: String) -> ModelEntity {
    let depthVar: Float = 0.01
    let fontVar = UIFont.systemFont(ofSize: 0.1)
    // 保持原有的容器帧设置，visualBounds会自动计算文本实际占用空间
    let containerFrameVar = CGRect(x: 0, y: 0, width: 1, height: 1)
    let alignmentVar: CTTextAlignment = .center
    let lineBreakModeVar: CTLineBreakMode = .byWordWrapping
    
    let model = ModelEntity(
        mesh: .generateText(newText, extrusionDepth: depthVar, font: fontVar, containerFrame: containerFrameVar, alignment: alignmentVar, lineBreakMode: lineBreakModeVar),
        materials: [SimpleMaterial(color: .white, isMetallic: true)]
    )

    model.components.set(InputTargetComponent())
    model.generateCollisionShapes(recursive: false)
    model.components.set(HoverEffectComponent())
    
    return model
}

关键修改说明 #

• 动态尺寸适配：通过visualBounds(relativeTo: headAnchor)获取文本的实际边界尺寸，以此生成背景框大小，确保背景框随文本内容动态变化。添加内边距可优化视觉效果。
• 位置自动同步：将背景框设为文本实体的子实体，无需手动计算位置，文本移动时背景框自动跟随，彻底解决位置错位问题。
• 层级顺序调整：背景框相对文本的Z轴偏移设为-0.01（小于文本的 extrusionDepth 0.01），确保背景框稳定处于文本后方。
• 文本位置优化：保留原有的X轴居中逻辑，确保文本在屏幕上的初始位置符合预期。

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