如何在 ARKit 中点击和移动场景节点

Question

我目前正在尝试构建 AR Chess 应用程序，但无法让棋子的移动正常工作。

我希望能够点击一个棋子，然后它可以在棋盘上进行的合法移动将被突出显示，并且它将移动到用户点击的任何一个方格。

棋盘设计和节点的图片： https://gyazo.com/2a88f9cda3f127301ed9b4a44f8be047

我想实现的内容： https://imgur.com/a/IGhUDBW

非常感谢有关如何使其正常工作的任何建议。

谢谢！

ViewController 代码：

import UIKit
import SceneKit
import ARKit

class ViewController: UIViewController, ARSCNViewDelegate {

    @IBOutlet var sceneView: ARSCNView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // Set the view's delegate
        sceneView.delegate = self

        // Show statistics such as fps and timing information
        sceneView.showsStatistics = true

        // Add lighting to the scene
        sceneView.autoenablesDefaultLighting = true
    }

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)

        // Create a session configuration to track an external image
        let configuration = ARImageTrackingConfiguration()

        // Image detection
        // Reference which group to find the image to detect in the Assets folder e.g. "Detection Card"
        if let imageDetect = ARReferenceImage.referenceImages(inGroupNamed: "Detection Card", bundle: Bundle.main) {
            // Sets image tracking properties to the image in the referenced group
            configuration.trackingImages = imageDetect
            // Amount of images to be tracked
            configuration.maximumNumberOfTrackedImages = 1
        }

        // Run the view's session
        sceneView.session.run(configuration)
    }

    // Run when horizontal surface is detected and display 3D object onto image
    // ARAnchor - tells a certain point in world space is relevant to your app, makes virtual content appear "attached" to some real-world point of interest
    func renderer(_ renderer: SCNSceneRenderer, nodeFor anchor: ARAnchor) -> SCNNode {
        // Creates 3D object
        let obj = SCNNode()
        // Check if image detected through camera is an ARImageAnchor - which contains position and orientation data about the image detected in the session
        if let imageAnchor = anchor as? ARImageAnchor {
            // Set dimensions of the horizontal plane to be displayed onto the image to be the same as the image uploaded
            let plane = SCNPlane(width: imageAnchor.referenceImage.physicalSize.width, height: imageAnchor.referenceImage.physicalSize.height)
            // Display mild transparent layer onto detected image
            // This is to ensure image detection works by display a faint layer on the image
            plane.firstMaterial?.diffuse.contents = UIColor(white: 1.0, alpha: 0.2)
            // Set geometry shape of the plane
            let planeNode = SCNNode(geometry: plane)
            // Flip vertical plane to horizontal plane
            planeNode.eulerAngles.x = -Float.pi / 2
            obj.addChildNode(planeNode)

            // Initialise chess scene
            if let chessBoardSCN = SCNScene(named: "art.scnassets/chess.scn") {
                // If there is a first in the scene file
                if let chessNodes = chessBoardSCN.rootNode.childNodes.first {
                    // Displays chessboard upright
                    chessNodes.eulerAngles.x = Float.pi / 2
                    // Adds chessboard to the overall 3D scene
                    obj.addChildNode(chessNodes)
                }
            }

        }

        return obj

    }

    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)

        // Pause the view's session
        sceneView.session.pause()
    }

}

Answer 1

您需要在视图中添加手势，并使用 ARSceneViews hitTest 方法来检测手势在场景中触摸的内容。然后，您可以根据手势的移动更新位置。

这是一个处理大致相同的拖动节点要求的问题。

Placing, Dragging and Removing SCNNodes in ARKit

Answer 2

首先，您需要在 viewDidLoad 中添加一个手势识别器，如下所示：

 let tapGesture = UITapGestureRecognizer(target: self, action: #selector(handleTap(_:)))
 myScnView.addGestureRecognizer(tapGesture)

然后实现handler函数：

    @objc
    func handleTap(_ gestureRecognize: UIGestureRecognizer) {
       // HERE YOU NEED TO DETECT THE TAP
       // check what nodes are tapped

        let location = gestureRecognize.location(in: myScnView)
        let hitResults = myScnView.hitTest(location, options: [:])

        // check that we clicked on at least one object
        if hitResults.count > 0 {
            // retrieved the first clicked object
            let tappedPiece = hitResults[0].node

            // HERE YOU CAN SHOW POSSIBLE MOVES
            //Ex. showPossibleMoves(for: tappedPiece) 
        }

    }

现在，要显示可能的走法，您需要确定棋盘上的所有象限和节点位置。

为此，您可以指定名称或数字，或字母和数字的组合，或者数字的组合。 （我建议组合数字，如第 1 行第 1 列，如矩阵）。

让我们接受我的建议，因此您可以将每个象限命名为 1.1 1.2 ... 2.1 2.2 等等。

现在，要检测您的作品在哪里，您可以检查与 PhysicsContactDelegate 的联系。

现在你已经有了 tappedPiece 和它所在的位置，所以你必须定义碎片的规则，例如：

let rules = ["tower":"cross"] //add the others

注意您可以选择要定义的规则。

让我们接受我的建议，现在您应该创建要突出显示的函数：

 func highlight(quadrant: SCNNode){
   quadrant.geometry?.firstMaterial?.emission.contents = UIColor.yellow
 }

最后 showPossibleMoves(for: tappedPiece) 可能是这样的：

func showPossibleMoves(for piece: SCNNode){

let pieceType = piece.name //You have to give the name as you did into your rules variable
 //ex. if you have rules like ["tower":"cross"] you have to set all towers name to "tower"

let rule = rules[pieceType]

switch rule{

case "cross":

      //you have to highlight all nodes on the right, left, above and bottom
      // you can achieve this by selecting the start point and increase it
      //assuming you named your quadrants like 1.1 1.2 or 11 12 13 ecc...
      let startRow = Int(startQuadrant.name.first)
      let startColumn = Int(startQuadrant.name.last)

      //Now loop the highlight on right
      for column in startColumn+1...MAX_COLUMN-1{
         let quadrant = myScnView.scene.rootNode.childNode(withName:"\(startRow).\(column)" , recursively: true)
         // call highlight function
          highlight(quadrant: quadrant)
      }

      //Now loop for above quadrants
      for row in startRow+1...MAX_ROW-1{
         let quadrant = myScnView.scene.rootNode.childNode(withName:"\(row).\(startColumn)" , recursively: true)
         // call highlight function
          highlight(quadrant: quadrant)
      }

      //DO THE SAME FOR ALL DIRECTIONS
}

// ADD ALL CASES, like bishop movements "diagonals" and so on

}

注意：在 handlerTap 函数中，您必须检查您正在点击的内容，例如，在选择一块后检查您是否正在点击象限（你想移动你的一块）你可以检查一个布尔值和所选节点的名称

  //assuming you have set the boolean value after selecting a piece

  if pieceSelected && node.name != "tower"{

      //HERE YOU CAN MOVE YOUR PIECE

  }