如何使用 ARKit 检测触摸并显示新的 SCNPlane？

Question

现在我可以在检测到卡时显示不同的 SCNPlane。在显示 SCNPlanes 之后，用户触摸任何平面以显示新的 SCNPlane。但现在 touch 工作正常，但新的 SCNPlane 没有显示。

这是我试过的代码：

var cake_1_PlaneNode : SCNNode? = nil

func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {

    guard let imageAnchor = anchor as? ARImageAnchor else { return }

    if let imageName  = imageAnchor.referenceImage.name {            
        print(imageName)

        if imageName == "menu" {

            // Check To See The Detected Size Of Our menu Card (Should By 5cm*3cm)
            let menuCardWidth = imageAnchor.referenceImage.physicalSize.width
            let menuCardHeight =  imageAnchor.referenceImage.physicalSize.height

            print(
                """
                We Have Detected menu Card With Name \(imageName)
                \(imageName)'s Width Is \(menuCardWidth)
                \(imageName)'s Height Is \(menuCardHeight)
                """)

            //raspberry
            //cake 1

            let cake_1_Plane = SCNPlane(width: 0.045, height: 0.045)
            cake_1_Plane.firstMaterial?.diffuse.contents = UIImage(named: "france")
            cake_1_Plane.cornerRadius = 0.01

            let cake_1_PlaneNode = SCNNode(geometry: cake_1_Plane)
            self.cake_1_PlaneNode = cake_1_PlaneNode
            cake_1_PlaneNode.eulerAngles.x = -.pi/2
            cake_1_PlaneNode.runAction(SCNAction.moveBy(x: 0.15, y: 0, z: -0.125, duration: 0.75))

            node.addChildNode(cake_1_PlaneNode)
            self.sceneView.scene.rootNode.addChildNode(node)                
        }  
   }       

   override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {

    let touch = touches.first as! UITouch
    if(touch.view == self.sceneView){
        //print("touch working")
        let viewTouchLocation:CGPoint = touch.location(in: sceneView)
        guard let result = sceneView.hitTest(viewTouchLocation, options: nil).first else {
            return
        }

        if let planeNode = cake_1_PlaneNode, cake_1_PlaneNode == result.node{
            print("match")
            cake_1() 
        }
    }
}

func cake_1() {

    let plane = SCNPlane(width: 0.15  , height: 0.15)
    plane.firstMaterial?.diffuse.contents = UIColor.black.withAlphaComponent(0.75)

    let planeNodee = SCNNode(geometry: plane)
    planeNodee.eulerAngles.x = -.pi / 2
    planeNodee.runAction(SCNAction.moveBy(x: 0.21, y: 0, z: 0, duration: 0))

} //cake_1

关注此 link：Detect touch on SCNNode in ARKit。

Answer 1

查看您的代码，我发现了几个问题（更不用说变量和方法的命名约定了）。

首先，您正在创建一个 Global Variable 并声明如下：

var cake_1_PlaneNode : SCNNode? = nil

但是您在 Delegate Callback:

中为 cake_1_PlaneNode 同时使用了 Local 和 Global Variable

let cake_1_PlaneNode = SCNNode(geometry: cake_1_Plane)
self.cake_1_PlaneNode = cake_1_PlaneNode

应该简单地这样读：

self.cake_1_PlaneNode = SCNNode(geometry: cake_1_Plane)

其次，您将 cake_1_PlaneNode 添加到 ARSCNView 的 rootNode 而不是检测到的 ARImageAnchor，这可能是您不想做的，因为当检测到 ARAnchor 时：

You can provide visual content for the anchor by attaching geometry (or other SceneKit features) to this node or by adding child nodes.

因此，这种方法（除非你真的想这样做）是不必要的。

剩下的问题在于您的 cake_1 函数本身。

首先，您实际上并没有将 planeNodee 添加到 sceneHierachy。

由于您没有指定新初始化的 planeNode 是应该直接添加到您的 ARSCNView 还是作为 cake_1_planeNode 的 childNode 您的 function 应包括以下内容之一：

self.sceneView.scene.rootNode.addChildNode(planeNodee)    
self.cake_1_planeNode.addChildNode(planeNodee)

此外，可能也不需要旋转 planeNodee，因为默认情况下 SCNPlane 是垂直呈现的。

由于您没有规定放置内容的位置，因此可能没有必要使用 -.pi / 2，因为这样肉眼几乎看不到它。

另一个可能导致您在实际添加节点时看不到节点的问题是 Z 位置。

如果您在同一位置设置 2 个节点，您可能会遇到称为 Z-fighting 的问题（您可以阅读有关 here 的更多信息）。因此，您应该在添加时稍微向前移动添加的节点，例如SCNVector3 (0,0,0.001)考虑到这一点。

基于所有这些要点，我在下面提供了一个完整的工作和注释示例：

import UIKit
import ARKit

//-------------------------
//MARK: - ARSCNViewDelegate
//-------------------------

extension ViewController: ARSCNViewDelegate {

    func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {

        //1. Check We Have An ARImageAnchor, Then Get It's Reference Image & Name
        guard let imageAnchor = anchor as? ARImageAnchor else { return }

        let detectedTarget = imageAnchor.referenceImage

        guard let detectedTargetName = detectedTarget.name  else { return }

        //2. If We Have Detected Our Virtual Menu Then Add The CakeOnePlane
        if detectedTargetName == "cakeMenu" {

            let cakeOnePlaneGeometry = SCNPlane(width: 0.045, height: 0.045)
            cakeOnePlaneGeometry.firstMaterial?.diffuse.contents = UIColor.cyan
            cakeOnePlaneGeometry.cornerRadius = 0.01

            let cakeOnPlaneNode = SCNNode(geometry: cakeOnePlaneGeometry)
            cakeOnPlaneNode.eulerAngles.x = -.pi/2

            //3. To Allow Us To Easily Keep Track Our Our Currently Added Node We Will Assign It A Unique Name
            cakeOnPlaneNode.name = "Strawberry Cake"

            node.addChildNode(cakeOnPlaneNode)
            cakeOnPlaneNode.runAction(SCNAction.moveBy(x: 0.15, y: 0, z: 0, duration: 0.75))


        }
    }
}

class ViewController: UIViewController {

    @IBOutlet var augmentedRealityView: ARSCNView!
    let augmentedRealitySession = ARSession()
    let configuration = ARWorldTrackingConfiguration()

    //------------------
    //MARK: - Life Cycle
    //------------------

    override func viewDidLoad() {
        super.viewDidLoad()

        setupARSession()
    }


    //-----------------
    //MARK: - ARSession
    //-----------------

    /// Runs The ARSession
    func setupARSession(){

        //1. Load Our Detection Images
        guard let detectionImages = ARReferenceImage.referenceImages(inGroupNamed: "AR Resources", bundle: nil) else { return }

        //2. Configure & Run Our ARSession
        augmentedRealityView.session = augmentedRealitySession
        augmentedRealityView.delegate = self
        configuration.detectionImages = detectionImages
        augmentedRealitySession.run(configuration, options: [.resetTracking, .removeExistingAnchors])

    }

    //--------------------
    //MARK: - Interaction
    //--------------------

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {

        //1. Get The Current Touch Location & Perform An ARSCNHitTest To Check For Any Hit SCNNode's
        guard let currentTouchLocation = touches.first?.location(in: self.augmentedRealityView),
             let hitTestNode = self.augmentedRealityView.hitTest(currentTouchLocation, options: nil).first?.node else { return }

        //2. If We Have Hit Our Strawberry Cake Then We Call Our makeCakeOnNode Function
        if let cakeID = hitTestNode.name, cakeID == "Strawberry Cake"{

            makeCakeOnNode(hitTestNode)

        }
    }


    /// Adds An SCNPlane To A Detected Cake Target
    ///
    /// - Parameter node: SCNNode
    func makeCakeOnNode(_ node: SCNNode){

        let planeGeometry = SCNPlane(width: 0.15  , height: 0.15)
        planeGeometry.firstMaterial?.diffuse.contents = UIColor.black.withAlphaComponent(0.75)

        let planeNode = SCNNode(geometry: planeGeometry)
        planeNode.position = SCNVector3(0, 0, 0.001)
        planeNode.runAction(SCNAction.moveBy(x: 0.21, y: 0, z: 0, duration: 0))
        node.addChildNode(planeNode)

    }
}

在我的设备上产生以下结果：

供您参考，这似乎表明您对放置内容的计算不正确（当然，除非这是所需的结果）。

如您所见，所有内容均已正确呈现，但这些内容的间距非常大，因此在进一步测试和开发时，您可能需要稍微平移设备才能看到所有内容。

希望对您有所帮助...

Answer 2

***请为您的变量和函数使用描述性和清晰的名称，阅读和理解您的代码非常困难。您可以在此处阅读有关 swift 样式指南的更多信息：https://github.com/raywenderlich/swift-style-guide#naming

当用户触摸屏幕时，您正在创建一个新平面，但您并未将该平面添加到场景中，因此您的 "cake_1()" 函数仅创建一个新平面。当 ARKit 检测到图像时，它会自动创建一个空节点并将其添加到我们的场景中，位于检测到的图像的中心。我们必须首先保留对 ARKit 在检测到图像时为我们添加的节点的引用。将此变量添加到 class 的顶部：

var detectedImageNode: SCNNode?

然后在func renderer(renderer: didAdd node:, for anchor:)中添加如下行：

detectedImageNode = node

现在我们有了对节点的引用，我们可以轻松地添加和删除其他节点。在 cake_1() 末尾添加以下行：

if let detectedImageNode = detectedImageNode {
    cake_1_PlaneNode?.removeFromParentNode()
    detectedImageNode.addChildNode(planeNodee)
}

您的最终代码应如下所示：

func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {

    guard let imageAnchor = anchor as? ARImageAnchor else { return }

    if let imageName  = imageAnchor.referenceImage.name {
        print(imageName)

        if imageName == "menu" {

            let cake_1_Plane = SCNPlane(width: 0.045, height: 0.045)
            cake_1_Plane.firstMaterial?.diffuse.contents = UIImage(named: "france")
            cake_1_Plane.cornerRadius = 0.01

            let cake_1_PlaneNode = SCNNode(geometry: cake_1_Plane)
            self.cake_1_PlaneNode = cake_1_PlaneNode
            cake_1_PlaneNode.eulerAngles.x = -.pi/2
            cake_1_PlaneNode.runAction(SCNAction.moveBy(x: 0.15, y: 0, z: -0.125, duration: 0.75))

            node.addChildNode(cake_1_PlaneNode)
            // No need to add the following line. The node is already added to the scene
            //self.sceneView.scene.rootNode.addChildNode(node)                
            detectedImageNode = node
        }
    }
}

func cake_1() {

        let plane = SCNPlane(width: 0.15  , height: 0.15)
        plane.firstMaterial?.diffuse.contents = UIColor.black.withAlphaComponent(0.75)

        let planeNodee = SCNNode(geometry: plane)
        planeNodee.eulerAngles.x = -.pi / 2

        if let detectedImageNode = detectedImageNode {
            cake_1_PlaneNode?.removeFromParentNode()
            detectedImageNode.addChildNode(planeNodee)
        }    
    }

备选方案

如果您只是想更改飞机的图像，那么更简单的方法是更改飞机的纹理。将 cake_1() 的内容替换为：

if let planeGeometry = cake_1_PlaneNode?.geometry {
    planeGeometry.firstMaterial?.diffuse.contents = UIImage(named: "newImage")
}

如何使用 ARKit 检测触摸并显示新的 SCNPlane？

How to detect touch and show new SCNPlane using ARKit?

swift

scenekit

arkit

scnnode