Swift实现ARKit图像检测平面添加可点击按钮方法咨询

嘿，我来帮你搞定这个问题！给ARKit检测到的平面加可点击按钮其实不难，核心就是把UIKit的交互能力和SceneKit的3D节点结合起来，下面是一步步的实现方案：

1. 给检测平面添加按钮节点 #

首先，在你的renderer(_:didAdd:for:)方法里，当ARKit检测到目标图像并创建平面节点后，你需要创建一个可点击的按钮节点。这里有两种常用方式：

方式一：用UIButton转成SceneKit节点 #

这种方式能利用UIKit成熟的按钮样式和状态：

func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {
    guard let imageAnchor = anchor as? ARImageAnchor else { return }
    
    // 1. 创建你已有的平面节点（假设这段代码你已经实现了）
    let plane = SCNPlane(width: imageAnchor.referenceImage.physicalSize.width, height: imageAnchor.referenceImage.physicalSize.height)
    let planeNode = SCNNode(geometry: plane)
    planeNode.eulerAngles.x = -.pi / 2
    node.addChildNode(planeNode)
    
    // 2. 创建UIButton
    let button = UIButton(type: .system)
    button.setTitle("查看详情", for: .normal)
    button.backgroundColor = .white
    button.layer.cornerRadius = 8
    button.frame = CGRect(x: 0, y: 0, width: 120, height: 60)
    
    // 3. 将UIButton转为SceneKit材质内容
    let buttonMaterial = SCNMaterial()
    buttonMaterial.diffuse.contents = button
    
    // 4. 创建承载按钮的平面节点（单位为米，适配现实尺寸）
    let buttonPlane = SCNPlane(width: 0.12, height: 0.06)
    buttonPlane.materials = [buttonMaterial]
    let buttonNode = SCNNode(geometry: buttonPlane)
    buttonNode.position = SCNVector3(0, 0, 0.01) // 让按钮浮在平面上方，避免遮挡
    buttonNode.name = "imageBtn_\(imageAnchor.referenceImage.name ?? "unknown")" // 命名节点，用于后续识别
    
    // 5. 将按钮节点添加到检测图像的根节点上
    node.addChildNode(buttonNode)
}

方式二：用SceneKit原生节点（比如SCNText）实现 #

如果你不想依赖UIKit，也可以直接用SceneKit的3D元素：

// 在renderer方法的平面创建逻辑后添加：
let textGeometry = SCNText(string: "点击我", extrusionDepth: 0.01)
textGeometry.firstMaterial?.diffuse.contents = UIColor.systemBlue
textGeometry.firstMaterial?.specular.contents = UIColor.white
let textNode = SCNNode(geometry: textGeometry)
textNode.scale = SCNVector3(0.01, 0.01, 0.01) // 缩放适配现实尺寸
textNode.position = SCNVector3(0, 0, 0.01)
textNode.name = "imageBtn_\(imageAnchor.referenceImage.name ?? "unknown")"
node.addChildNode(textNode)

2. 添加点击手势，处理按钮交互 #

接下来，给ARSCNView添加点击手势识别，在回调里判断点击的是哪个按钮节点：

第一步：在ViewController中注册手势 #

override func viewDidLoad() {
    super.viewDidLoad()
    // 你的ARKKit初始化代码...
    
    let tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleButtonTap(_:)))
    self.sceneView.addGestureRecognizer(tapGesture)
}

第二步：实现点击处理逻辑 #

@objc func handleButtonTap(_ gesture: UITapGestureRecognizer) {
    let sceneView = gesture.view as! ARSCNView
    let touchPoint = gesture.location(in: sceneView)
    
    // 检测点击命中的节点
    let hitResults = sceneView.hitTest(touchPoint, options: [.boundingBoxOnly: true])
    guard let targetNode = hitResults.first?.node else { return }
    
    // 判断是否为我们的按钮节点
    guard targetNode.name?.starts(with: "imageBtn_") == true else { return }
    
    // 提取对应的图像名称，区分不同检测对象
    let targetImageName = targetNode.name?.replacingOccurrences(of: "imageBtn_", with: "") ?? ""
    print("触发了图像\(targetImageName)的按钮点击")
    
    // 根据不同图像执行对应逻辑
    triggerActionForImage(named: targetImageName)
}

// 示例：不同图像的专属响应逻辑
func triggerActionForImage(named imageName: String) {
    switch imageName {
    case "poster1":
        let alert = UIAlertController(title: "海报1", message: "你点击了海报1的按钮", preferredStyle: .alert)
        alert.addAction(UIAlertAction(title: "确定", style: .default))
        present(alert, animated: true)
    case "productBox":
        // 执行产品详情展示逻辑
        print("展示产品详情")
    default:
        break
    }
}

3. 关键注意事项 #

• 节点命名规范：给按钮节点关联对应检测图像的名称，是区分不同点击目标的核心。
• 尺寸适配：SceneKit的单位是米，创建按钮平面时要根据现实图像的物理尺寸调整，避免按钮过大或过小。
• 点击优先级：把按钮的z轴位置设为比平面高一点（比如0.01米），确保点击时优先命中按钮而非平面。
• 性能优化：hitTest时使用.boundingBoxOnly选项，只检测节点边界框，提升复杂场景下的响应速度。

这样就能让每个检测到的对象对应的按钮都独立响应点击事件啦！

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