How to Add 3D Elements to iPhone AR Project

It is no secret that my strength when it comes to mobile application design and development is, well, the design. Nevertheless, I am going to attempt to explain to you and myself, how to add 3D elements to your AR application.

To start, we are going to open our project in Xcode. If you would like the starter code, you can find it here. This project already has some basic AR functionality, but we are going to remove some of the existing content and update it with our own.

First, we need to get our 3D object. If you don't have your own, you can download one from Apple. I chose the flower pot. Once you have the file, drag it from the finder to the "art.sncassets" folder in the Xcode project editor's file explorer.

Once you have added the file to the project, you need to open the file by double-clicking it. Then select the object.

When you have the object selected, look in the inspector window and choose "Show the Scene inspector." By adjusting any of the values, you will be promoted with "Convert this document to SCN format?" You want to select "Convert."

Once you have converted the document, it will allow you to change its name. We want to keep the name the same so remove "copy" from the end. The new file will end with .scn. You can now delete the original usdz file along with the "card.scn" file that was already there when we started.

Navigate to the ViewController.swift file and locate the viewdidLoad function. On line 26, we will change the path of the object to the file we just added. Mine looks like let scene = SCNScene(named: “art.scnassets/pot_plant.scn")!

override func viewDidLoad() {
     super.viewDidLoad()

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

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

    // Create a new scene
   let scene = SCNScene(named: "art.scnassets/pot_plant.scn")!

    // Set the scene to the view
    sceneView.scene = scene
}

Next, in the renderer function, we will change the word "card" to something related to our new file. In my case, I changed it to "pot." Then we will remove lines 63 - 77

Your renderer function should look like this.

func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {
     guard anchor is ARImageAnchor else { return }

     guard let pot = sceneView.scene.rootNode.childNode(withName: "pot", recursively: false) else { return }
     pot.removeFromParentNode()
     node.addChildNode(pot)

     pot.isHidden = false 
    }

You can run the app on your device and see the 3d object on the screen.

If you would like to adjust its position on the screen, you can open the "pot_plant.scn" file and edit its position by clicking on the object and moving it using the X/Y/Z values. Although the object isn't stationary and does move, you can always expand the project by adding surface detection to lock objects in place.

In conclusion, AR is hard. Apple does provide many example projects that you can download and test; however, step-by-step instructions are limited. It will take time to get a full grasp on coding for AR, and finding some online "classes" like Pluralsight will undoubtedly help.