SceneKit 3D Programming for iOS: Getting Started

Learn how to use SceneKit for 3D graphics programming by building an app modeling the solar system. By Keegan Rush.

4.9 (13) · 2 Reviews

Download materials
Save for later
You are currently viewing page 2 of 4 of this article. Click here to view the first page.

Modifying Materials

On the right of the Scene Editor, in the Inspectors panel, select the Materials inspector.

Material inspector

An object’s material is a set of properties that, when combined with the material’s lighting model, determine how to render each pixel of a geometry. Here, you can change the properties that determine the color of the sun’s sphere geometry.

Next, click the Diffuse color to bring up the Color picker. Navigate to the Sliders tab, then set the drop-down to RGB Sliders. Finally, set the Hex Color # to #F2FF2C.

You can think of a material’s diffuse as the “base color” of an object.

Next, set the color of Illumination to white: #FFFFFF. A material’s illumination lets it define how light hits the object. Even if the geometry is obscured from a light source, setting illumination causes the material to color itself as if it were receiving light.

Build and run.

Running the scene, but can't see the sun.

If you don’t see anything, pan the camera until your sphere comes into view.

The sun comes into view

Behold, the center of our solar system: the sun!

However, it’s a little dainty at the moment. Next, you’ll make it bigger to provide some scale for the other planets.

In the Inspectors panel, click the Attributes inspector. Here, you can control a variety of properties for the node and any of its attachments, like a sphere’s radius.

The sphere's radius property

Change the radius to 10, which will increase the sphere’s size tenfold. Build and run.

No sun, again

Wait, where’d it go? Panning the camera won’t help this time. You’ve increased the size of the sun, and it’s engulfed the camera. You’ll need to move the camera to a safe distance.

Setting Up the Camera Node

In the scene graph, click the camera node. Then, in the Inspectors panel, click the Node inspector.

The Node inspector

Here, you can set the position, shape and orientation of the node. How you orient the node will affect anything attached to that node. So, changing the position of the camera node will change the position of the camera attached to it.

Every node in your scene has the following properties, which the Node inspector can edit:

  • Identity: The node’s name, used to access the node in code.
  • Position: Where the node is placed in the scene relative to its parent.
  • Euler: The rotation of the node relative to its parent.
  • Scale: Allows you to transform the node, transforming its size along each axis.

To correctly reposition the camera, change Position to x: -55, y: 65 and z: -68.

Then, change Euler to x: 145, y: -13 and z: -158. This orients the camera to point at your sun. It also creates an empty space that your planets will fill.

Now, your transforms will look like this:

Transforms in Node inspector after update

Zoom out of the Scene Editor until you can clearly see the camera and the sun.

Camera and sun inside scene editor

Your camera is pointing at your scene, but its viewing depth isn’t far enough to see your sun. In the Inspector panel, switch to the Attributes inspector. Here, you’ll find the Z Clipping properties, which let you increase the viewing depth.

Under Z Clipping, change Far to 300.

Z clipping property

Build and run.

The sun in the running scene

Now, you can see the sun, along with plenty of space for more planets!

Creating Planets

Next, you’ll add five planets to your solar system:

  1. Mercury
  2. Venus
  3. Earth
  4. Mars
  5. Saturn

Each is a sphere, like the sun. You’ll change details like each planet’s color, size and position.

Note: Most of the following steps repeat what you did to create the sun. If you need a refresher, look back at the Adding Objects section.


First, add a new sphere geometry from the Objects Library.

Then, in the Node inspector, change the Name to mercury. Change the Position to x: 0, y: 0 and z: 25.

Node inspector for mercury

In the Material inspector, change the Diffuse to #BBBBBB by using the color picker. Then, change Roughness to 1. By changing a material’s roughness, you can make it more or less shiny. Setting a roughness close to 0 makes it shiny and setting a roughness close to 1 makes it less reflective.

Build and run.

Mercury in the running app

SceneKit renders your first planet, Mercury, close to the sun. Next, you’ll add the rest of the planets in order, following the steps you followed for Mercury.


To create Venus, do the following:

  1. Add a sphere to the scene graph.
  2. In the Node inspector, change Name to venus. Change Position‘s z value to 35.
  3. In the Attributes inspector, change Radius to 2.
  4. In the Material inspector, change Diffuse to #59B1D6 and Roughness to 1.


For the planet we call home, follow these steps:

  1. Add a sphere to the scene graph.
  2. In the Node inspector, change Name to earth. Change Position‘s z value to 50.
  3. In the Attributes inspector, change Radius to 2.
  4. In the Material inspector, change Diffuse to #2F5CD6 and Roughness to 1.


Next, make these changes for the red planet:

  1. Add a sphere to the scene graph.
  2. In the Node inspector, change Name to mars. Change Position‘s z to 75.
  3. In the Material inspector, change Diffuse to #C65B2C and Roughness to 1.

Build and run.

The four planets in the scene editor

Your solar system is taking shape, but it’s still a bit bland. For some variation, you’ll add everyone’s favorite gas giant: Saturn!

Adding Saturn’s Ring

Saturn follows a similar pattern to the previous planets, but you’ll take it one step further: Saturn needs a ring.

First, create the body of the planet, just as you did for the previous planets:

  1. Add a sphere to the scene graph.
  2. In the Node inspector, change Name to saturn. Change Position‘s z to 150.
  3. In the Attributes inspector, change Radius to 5.
  4. In the Material inspector, change Name to saturn, Diffuse to #D69D5F and Roughness to 1.
Note: Don’t forget the set Name in both the Node inspector and the Material inspector this time. You’ll use it later.

Pan the Scene Editor to take a closer look at your newest planet.

Saturn in scene editor

Saturn is missing its trademark ring. To add the ring, you’ll use another of SceneKit’s primitive shapes: a tube.