Currently, we have an app that detects horizontal planes and notifies us about the state of the tracking system. Now, we want to create an AR experience where users will tap on the screen to create a portal and, when going through it, see themselves inside a 3D representation of Van Gogh's Bedroom in Arles painting. The following diagram depicts the scene in SceneKit's coordinate system:

 

From the user's perspective, we will have a portal with a hole in it, as shown in the previous diagram. The hole will let us see the model in the background, that is, the 3D painting. The portal will not be gray; it will be transparent so that we can see the camera feed instead of the whole 3D painting scene that hides behind it. In this section, we will learn how to make this possible.

For that, we need to add the 3D model, create the screen-tapping functionality, and create the actual portal, which only shows part of the painting from the outside.

In the following subsections, we will do the following:

• Import a 3D model into our project and scene
• Add the user interaction so that when a user touches the screen, the 3D model will appear over the touched anchor plane

• Add the walls to the portal to make the model invisible from the outside, except for the door
• Improve the app by adding textures to the walls and a compass image to help users find out where the portal will appear

Now, let's start by adding the 3D model we want to show.