---
title: "Changing Skyboxes"
content_type: tutorial
url: "https://learn.unity.com/course/basic-reflect-customization/unit/adding-new-viewer-functinoality/tutorial/changing-skyboxes?language=en"
language: en
container_type: course
container_title: "Basic Reflect Customization "
container_url: "https://learn.unity.com/course/basic-reflect-customization.md?language=en&version=2019.3"
unit_title: "Adding New Viewer Functionality"
unit_url: "https://learn.unity.com/course/basic-reflect-customization/unit/adding-new-viewer-functinoality?language=en&version=2019.3"
standalone_markdown_url: "https://learn.unity.com/tutorial/changing-skyboxes.md?language=en&version=2019.3"
previous_title: "Customizing Post-Processing Effects"
previous_url: "https://learn.unity.com/course/basic-reflect-customization/unit/modifying-the-viewer/tutorial/customizing-post-processing-effects?language=en&version=2019.3"
previous_markdown_url: "https://learn.unity.com/course/basic-reflect-customization/unit/modifying-the-viewer/tutorial/customizing-post-processing-effects.md?language=en&version=2019.3"
next_title: "Customizing Controls"
next_url: "https://learn.unity.com/course/basic-reflect-customization/unit/adding-new-viewer-functinoality/tutorial/customizing-controls?language=en&version=2019.3"
next_markdown_url: "https://learn.unity.com/course/basic-reflect-customization/unit/adding-new-viewer-functinoality/tutorial/customizing-controls.md?language=en&version=2019.3"
difficulty: intermediate
duration_minutes: 15
unity_version:
  - "2019.3"
supported_unity_versions:
  - name: "2019.4"
    url: "https://learn.unity.com/tutorial/changing-skyboxes.md?language=en&version=2019.4"
  - name: "2019.3"
    url: "https://learn.unity.com/course/basic-reflect-customization/unit/adding-new-viewer-functinoality/tutorial/changing-skyboxes.md?language=en&version=2019.3"
last_updated: "2026-08-04T14:24:22.000Z"
---

# Changing Skyboxes

Discover how to change the sky in your Scene at runtime in response to a button click.

In this tutorial we’ll explore how to change the sky in the Scene at runtime when a button is clicked.

## Materials

- [ChangingSkyboxes.zip](https://unity-connect-prd.storage.googleapis.com/20200518/b29f3ec2-a990-4a77-8564-7b47d1d05fba/ChangingSkyboxes.zip)
- [ChangingSkyboxesComplete.zip](https://unity-connect-prd.storage.googleapis.com/20200518/2b7ec040-339f-443b-abf3-b0215ae9bb77/ChangingSkyboxesComplete.zip)

## 1. Introduction

The Reflect Viewer uses the standard Skybox that is defined in the game Scene. This Skybox Material can be accessed at runtime via the RenderSettings.skybox class.

For this tutorial, you will need:

- The Reflect Package installed via the Package Manager
- A Pro license for the Unity Editor

The Unity custom package, _ChangingSkyboxes.unitypackage_

## 2. Creating the Button

We’ll start by creating a new button that will change the sky when clicked. This button will be created under the existing Settings Canvas and will appear after the splash screen sequence.

**1.** Import the ChangingSkyboxes package from the tutorial resources.

**2.** Drag the Reflect Prefab from the **Assets** > **Prefabs** folder into the Scene Hierarchy (**Figure 01**).

![Figure 01: Drag the Reflect Prefab to the Scene Hierarchy](https://connect-mediagw.unity.com/h1/20200518/learn/images/70386685-86b8-4646-85d0-8458ea543339_image9.png)

**3.** Open the Reflect Prefab by clicking on the arrow to the right of the Reflect element in the Scene Hierarchy (**Figure 02**).

![Figure 02: Opening the Reflect Prefab](https://connect-mediagw.unity.com/h1/20200518/learn/images/7bcc084a-7c28-41d6-9b7d-593da35443a5_image4.png)

**4.** Right-click on the Settings Canvas element and create a new **UI** > **Image** element. This will be the button you will use to change the sky.

**5.** Select the new image element and rename it _SkyChangeButton_ (**Figure** **03**).

![Figure 03: The new SkyChangeButton UI element](https://connect-mediagw.unity.com/h1/20200518/learn/images/7adc0506-0ad3-4b75-98f6-abd0898cbc53_image1.png)

**6.** With the SkyChangeButton element still selected, change the Source Image to Sun (**Figure** **04**).

![Figure 04: Change the Source Image to Sun](https://connect-mediagw.unity.com/h1/20200518/learn/images/583bc71b-4839-4d2a-998d-1fd3fe563e30_image12.png)

**7.** Click **Add Component** to add a Button component. This will make the image clickable and allow you to add interaction to the button (**Figure** **05**).

![Figure 05: Adding the Button component](https://connect-mediagw.unity.com/h1/20200518/learn/images/22a3d9dc-6edb-4cfd-915d-c7d3c9d3a499_image10.png)

**8.** Using the Move and Scale tools, change the position and size of the sun icon to fit in the top left corner (**Figure** **06**).

![Figure 06:  Positioning the new button](https://connect-mediagw.unity.com/h1/20200518/learn/images/3a6bba46-91f1-4335-9501-3b2ba1b7fba6_image7.png)

**9.** Drag the ChangeSky script provided in the **Assets** > **Scripts** folder onto the new SkyChangeButton element (**Figure** **07**).

![Figure 07: Drag the script onto the new button](https://connect-mediagw.unity.com/h1/20200518/learn/images/c9df53bc-77e1-4c85-a725-f1b852b6a717_image13.png)

**10.** Now you’ll need to link the script to the On Click event for the button. In the Inspector, under the Button component that was added earlier, select **+** (**Figure 08**).

![Figure 08: Adding a click event](https://connect-mediagw.unity.com/h1/20200518/learn/images/97565421-b2ac-447c-a6b5-bd2cc0394d85_image6.png)

**11.** Drag the SkyChangeButton element into the new On Click event in the Inspector (**Figure 09**).

![Figure 09: Linking the Button script to the On Click event](https://connect-mediagw.unity.com/h1/20200518/learn/images/4afb25c6-7b8a-4e50-a845-125b81d47786_image14.png)

**12.** Select the changeSky.ChangeOnClick function in the script (**Figure 10**).

![Figure 10: Selecting the changeSky function](https://connect-mediagw.unity.com/h1/20200518/learn/images/61032146-93fb-4eee-bac5-8b0f03a0719a_image3.png)

**13.** In the Inspector, on the added script component, add the CloudSkybox Material to the Skybox One slot by selecting the radio button next to it and then selecting the relevant sky (**Figure 11**).

![Figure 11: Assigning the skybox one Material](https://connect-mediagw.unity.com/h1/20200518/learn/images/0f020045-98ab-418a-977b-be44ce1b154b_image8.png)

This animated Skybox is part of the imported resources for this tutorial. It’s provided by Keijirro and can be downloaded from [https://github.com/keijiro/CloudSkybox](https://github.com/keijiro/CloudSkybox).

**14.** Repeat Step 11 for the Skybox Two slot and add the Default-Skybox Material (**Figure 12**).

![Figure 12: Assigning the sky materials](https://connect-mediagw.unity.com/h1/20200518/learn/images/0bb5ac55-6471-476b-b6b9-aeaabc44ae57_image5.png)

**15.** Run the project. Clicking the SkyChangeButton should switch between the two Skyboxes that were added to the Material slots (**Figure 12**). You may change the Materials in these slots to any Skybox you wish to use.

![Figure 12: The new sky](https://connect-mediagw.unity.com/h1/20200518/learn/images/a5f22a0d-5143-42f3-9fc0-30747a662bbe_image11.png)

## 3. Understanding the Script

The script used in this project is a very simple one that takes an On Click event and switches between two Materials.

![Figure 13: The changeSky script](https://connect-mediagw.unity.com/h1/20200518/learn/images/37a423f3-aee3-4064-92c0-abb42428352a_image2.png)

Two Material variables are declared (**01**), which creates the two slots for the Materials in the Inspector

The ChangeOnClick (**2**) function checks if Material One is applied when the button is clicked. If it finds this to be true, it changes the sky to Material Two. If not, it switches to Material One.

## 4. Next Steps

This tutorial covered changing the Skybox Materials when a button is clicked. You should now have an understanding of how to access the Skybox Material at runtime and how to specify which Material is to be used in the script. Using these techniques, you can create your own Skybox options and even use 360 images of specific sites to show the project in context.