Walk through Reality Composer

Walk through Reality Composer

After Apple introducing ARKit at WWDC17 and continuously improving on their related frameworks they at the recent WWDC19 introduced major improvements with respect to frameworks and tooling — not least with respect to making it easier for Developers to get started and dealing with the 3D aspects of AR. One prime example of this is the introduction of Reality Composer.

What is Reality Composer:

Reality Composer is a tool that lets anyone quickly prototype and build AR scenes ready to integrate into apps or experience with AR Quick Look.


To use Reality composer you need: macOS Catalina and Reality Composer installed, and to use content created in Reality Composer you need Xcode 11 and iOS13.

In this article I’m going to use Reality Composer on Mac, but if you want to use it on iOS or iPad you need to request the Reality Composer app in Apple Developer website: here. then if your request accepted, you’ll receive an invitation to TestFlight version of the Reality Composer in your email.

In this tutorial I am going to show you

  • how to create a scene in Reality Composer
  • how to export your scene to use in both AR Quick Look and Xcode

We are going to create our first scene in Reality Composer, but, what is the anatomy of the scene:

Scene is a collection of entities that contains Anchor, Objects, Behaviours and Physics world. Each scene has only one Anchor. I’m going to show you how to select a right Anchor, add objects to your anchor and add behaviour to your objects.

1- Selecting an Anchor

by opening the Reality Composer you’ll be prompted to choose an anchor for your scene.

  • Horizontal: if you are building something for room or table top, you need to choose the Horizontal anchor.
  • Vertical: if you want it to be on the wall, pick vertical.
  • Image: if you’re augmenting 2D media in your environment, like books or posters, choose the image anchor.
  • Face: and for augmenting faces, select Face anchor.

After choosing the right anchor, in my case it’s Horizontal, you’ll see the default scene with a box and a text.

By selecting any object in the scene you can see all the configuration related to that object in the right panel which can be opened by pressing setting button on top right of the editor. I will add more details about some of these configurations later in this tutorial.

Right next to the setting there is a button to open the Behaviours panel.

2- Populating your scene

To start let’s just clean the scene by deleting the default objects. To do so, Select each item and press the Delete button on the keyboard.

Press the + button on top of the editor to see the objects. You can choose one of the existing objects or import your own USDZ file. For now let’s just select an existing object.

I’m going to choose a spinner and change its default configuration:

1- You can choose a name for you’re object to access it later in code. After importing your project in Xcode, it will generate code based on the project.

2- You can also change the height of the spinner by using the slider or write a number in the textField.

3- By changing the diameter you can have a wider or narrower spinner.

4- Revolutions shows the number of the rounds in the spinner.

5- By changing the thickness you can have a thicker or thinner spinner.

6- And roundness changes the look at the end of the spinner which can be round or flat.

 — not all objects have the same properties, but all of them have the name property.

— give it a try and see how these fields affect the look of your object

As you might notice you can move the object in 3 axes, x, y and z by selecting one of the arrows (red = x, green = y, blue = z) and dragging them. To rotate the object select the circle and rotate the colour inside of the circle.

3- Adding behaviour to your objects

Let’s add a behaviour to our object. In this case I will add a spin behaviour to my spinner.

By pressing the + button in Behaviours panel you’ll see the list of Behaviours.

You can choose a behaviour right there, or press custom at the end of the list to get the empty Trigger and Action sequence boxes.

By pressing the Trigger box you’ll get the Triggers list:

Now you need to choose the trigger for your action. My action is going to be spin and I want it to be triggered as soon as the Scene starts, so I will choose the Scene start as Trigger.

By pressing the Action box you’ll get the list of actions from which we will select ’Spin’.

After choosing the action, the next step is choosing the object that is going to have the behaviour. To do so, press the choose button in front of the affected objects and choose one or more objects that you want to have this behaviour. By choosing them in the scene their colour will be changed, so you can see which objects are selected, press done at the end.

Then change the default configuration as you want it to be. In this case Duration and Iterations show the number of Iterations(spins) in the given Duration.

If you are not familiar with these configurations, don’t worry, you can easily test them by pressing the play button on the header of the card so you will see how your scene gets affected by the configuration.

Now our scene with a simple object and behaviour is ready, time to see how to use it.

4- Using the scene in AR Quick Look

To use the scene in AR Quick Look all you need is to export the scene from File menu:

This will create spinner.reality file in the given location. Airdrop that file to your device (iOS 13) and open it in AR Quick Look.

Here is the result:

5- Using the scene in Xcode projects

To use the scene in AR projects in Xcode, save the entire project like below:

The result will be Spinner.rcproject file in the given location.

Now, drag and drop the file in your Xcode project, xcode will automatically recognize the file, so you can access it by typing the name of the file.

import UIKit
import ARKit
import RealityKit

class ARController: UIViewController {
    // 1: create an ARView 
    var arView = ARView(frame: .zero)
    override func loadView() {
        // 2: add the arView to the main view        
    override func viewDidLoad() {
        // 3: assign a frame to arView        
        arView.frame = view.frame
        // 4: access to your Reality Composer file only by it's name
        // and load the scene asynchronously, in this case it's Scene1
        Spinner.loadScene1Async { (result, error) in
            guard error == nil else {
            if let spinnerScene = result {     
                // 5: add the spinnerScene as an anchor in arView                
    override func viewWillAppear(_ animated: Bool) {
        // 6: create an ARWorldTrackingConfiguration
        let configuration = ARWorldTrackingConfiguration()
        // 7: run the configuration

The result is almost the same as AR Quick Look, except that you don’t need to find a horizontal anchor to add the object to it. In this example the scene will be added to the ARView as an anchor and will be shown immediately on the real world as the ARView appears. So to get a better result, point your phone to the right place like an empty space.


All in all, using Reality Composer to create 3D scenes is the best way to start. It is easy and convenient if you are not experienced in the field of 3D design.

This Post Has 4 Comments

  1. B Nichols

    Great piece thank you! Do you happen to know how to use code to embed the .reality file into a website so one may use AR Quick Look through the site?

  2. Shane

    I’d also love to know how to open the AR within a web browser window.

  3. Roderic

    Have you had any luck cloning the spring and then sending notifications to it? I seem to run into these super odd issues where either the notifications don’t end up doing anything or I get an error that the owner scene of the entity is not in the ARView’s scene.

Leave a Reply