SwiftUI+RealityKit实现按钮点击后显示对应AR模型文本

核心思路 #

要实现点击按钮后根据当前AR模型显示对应文本，关键是给每个锚点设置唯一标识，然后在按钮点击时遍历场景中的锚点，根据标识匹配对应的文本，最后在界面上展示。

步骤拆解与代码修改 #

1. 给AR锚点设置唯一名称

在加载锚点时，给boxAnchor和crownAnchor添加name属性，方便后续识别：

let boxAnchor = try! Experience1.loadBox()
boxAnchor.name = "BoxAnchor"  // 设置唯一标识
let crownAnchor = try! Experience1.loadCrown()
crownAnchor.name = "CrownAnchor"  // 设置唯一标识

2. 添加状态变量控制展示文本

在ContentView中添加@State变量，用来存储要显示的文本：

@State var arView = ARView(frame: .zero)
@State private var displayText = ""  // 新增：存储展示文本

3. 修改按钮点击逻辑，匹配模型与文本

修改information按钮的点击事件，遍历场景中的锚点，根据名称判断并设置文本：

Button("information") {
    displayText = ""
    // 遍历所有锚点，匹配标识
    for anchor in arView.scene.anchors {
        if anchor.name == "BoxAnchor" {
            displayText = "Box"
        } else if anchor.name == "CrownAnchor" {
            displayText = "Crown"
        }
    }
    // 如果同时存在两个模型，这里会显示最后匹配到的文本，可根据需求调整逻辑
}

4. 在界面上展示文本

在ZStack中添加Text组件，用来显示匹配后的文本：

ZStack {
    ARViewContainer(arView: $arView)
    // 新增：展示文本
    VStack {
        Spacer()
        Text(displayText)
            .font(.largeTitle)
            .foregroundColor(.white)
            .padding()
            .background(Color.black.opacity(0.7))
            .cornerRadius(10)
        Spacer().frame(height: 80)
    }
    HStack {
        Spacer()
        Button("information") {
            // 点击逻辑同上
        }
        Spacer()
        Button("remove") {
            stop()
            displayText = ""  // 清空文本
        }
        Spacer()
    }
}

完整修改后代码 #

import SwiftUI
import RealityKit

struct ContentView : View {
    
    @State var arView = ARView(frame: .zero)
    @State private var displayText = ""  // 控制展示的文本
    
    var body: some View {
        ZStack {
            ARViewContainer(arView: $arView)
            
            // 展示匹配后的文本
            VStack {
                Spacer()
                Text(displayText)
                    .font(.largeTitle)
                    .foregroundColor(.white)
                    .padding()
                    .background(Color.black.opacity(0.7))
                    .cornerRadius(10)
                Spacer().frame(height: 80)
            }
            
            HStack {
                Spacer()
                Button("information") {
                    displayText = ""
                    // 遍历锚点匹配标识
                    for anchor in arView.scene.anchors {
                        if anchor.name == "BoxAnchor" {
                            displayText = "Box"
                        } else if anchor.name == "CrownAnchor" {
                            displayText = "Crown"
                        }
                    }
                }
                Spacer()
                Button("remove") {
                    stop()
                    displayText = ""  // 移除模型后清空文本
                }
                Spacer()
            }
        } .edgesIgnoringSafeArea(.all)
    }
    
    func stop() {
        arView.scene.anchors.removeAll()
    }
}

struct ARViewContainer: UIViewRepresentable {
    
    @Binding var arView: ARView
    
    func makeUIView(context: Context) -> ARView {
        
        let boxAnchor = try! Experience1.loadBox()
        boxAnchor.name = "BoxAnchor"  // 设置锚点标识
        let crownAnchor = try! Experience1.loadCrown()
        crownAnchor.name = "CrownAnchor"  // 设置锚点标识
        
        arView.scene.anchors.append(boxAnchor)
        arView.scene.anchors.append(crownAnchor)
        
        return arView  
    }
    
    func updateUIView(_ uiView: ARView, context: Context) { }
}

额外说明 #

• 如果你的需求是切换显示单个模型（而不是同时显示两个），可以添加一个切换按钮，点击时移除当前锚点并添加另一个，此时displayText可以直接根据切换逻辑设置，无需遍历锚点。
• 若要同时显示多个模型但需分别展示对应文本，可以调整文本展示逻辑，比如用List或多个Text组件列出所有当前存在的模型名称。

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