how to add label node and user image in SCNNode with gesture action in ARKit?

Question

Actually i am working business card image detection to show there business profile. I have already achieved image detection, plane animation. Here is my question, when image detected along with plane it should show user name label, profile and website. I am trying show user name label but i have done in SCNText. how can i do using SCNNode label user iamge.

Here is the code i tried:

guard let imageAnchor = anchor as? ARImageAnchor else {return}
if let imageName  = imageAnchor.referenceImage.name {

    print(imageName)

    if imageName == "card" {

   //                let planeGeometry = SCNPlane(width: 25, height: 25)
   //                planeGeometry.firstMaterial?.isDoubleSided = true
  //                planeGeometry.firstMaterial?.diffuse.contents = UIColor.blue.withAlphaComponent(0.5)
         //--
        let plane = SCNPlane(width: 4,
                                 height: 10)
        plane.firstMaterial?.diffuse.contents = UIColor.init(red: 0, green: 189, blue: 255, alpha: 0.88)
        plane.cornerRadius = 0.25

        let planeNode = SCNNode(geometry: plane)
        planeNode.opacity = 0.25
        planeNode.eulerAngles.x = -.pi / 2
   //                planeNode.position = SCNVector3(x:0, y:0, z:2)
        planeNode.runAction(SCNAction.moveBy(x: 0, y: 0, z: 5, duration: 0.5))


        let nameText = SCNText()
        nameText.firstMaterial?.diffuse.contents = "Gowdhaman"
        nameText.font = UIFont(name: "Avenir-medium", size: 16)
        nameText.firstMaterial?.diffuse.contents = UIColor.red
        nameText.firstMaterial?.diffuse.contents = SCNVector3.init(0, 0, 0)
     //            nameText.firstMaterial?.diffuse.contents =

     //                nameText.firstMaterial?.diffuse.contents = SCNAction.moveBy(x: 0, y: 0, z: 5, duration: 1)

        let nameLabelNode = SCNNode(geometry: nameText)
        let eulerAngles = 
    self.sceneView.session.currentFrame?.camera.eulerAngles

        nameLabelNode.eulerAngles = SCNVector3((eulerAngles?.x)!, 
   (eulerAngles?.y)!, (eulerAngles?.z)! - .pi/6)

        planeNode.addChildNode(nameLabelNode)
        node.addChildNode(planeNode)

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



    }

}

Answer 1

I'm currently working on a very similar project! One thing I have tried is to create a SCNPlane and then set its content to the image inside the renderer function

func renderer(_ renderer: SCNSceneRenderer, nodeFor anchor: ARAnchor) -> SCNNode? {

        let node = SCNNode()

        ......

        // create a plane to contain the image
        let profilePlane = SCNPlane(width: 0.035, height: 0.035)

        // Add the profile picture file in your assets folder to the contents of your plane
        profilePlane.firstMaterial?.diffuse.contents = "ProfilePictureName"

        let profilePlaneNode = SCNNode(geometry: profilePlane) 

        node.addChildNode(profilePlaneNode)

}

With this code it'll spawn a square at the center of the imageAnchor, so you'll need to adjust a few things after