d81373fe-4bb9-56e6-9285-f2082b44f658:zx7pohSEomVRos4yXEnOdR

ChangingSkyboxes.zip

ChangingSkyboxesComplete.zip

Introduction

Creating the Button

Understanding the Script

Next Steps

Changing Skyboxes

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

Adding New Viewer Functionality

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. 

The Reflect Viewer project downloaded from Github GitHub - Unity-Technologies/com.unity.reflect.viewer: Unity Reflect Viewer

The Unity custom package, “ChangingSkyboxes.unitypackage” 

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. Open the Reflect Viewer project downloaded from Github and open the project in Unity.

3. Import the ChangingSkyboxes package from the tutorial resources.

4. Right-click on the UI Root 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 02).

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

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 04). 

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

9. Drag the changeSky script provided in the Assets > Scripts folder onto the new SkyChangeButton element (Figure 06).

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 07).

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

12. Select the changeSky. Change On Click () function in the script (Figure 9). 

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 10).

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.

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

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 01: Opening the Reflect scene

Figure 02: The new SkyChangeButton UI element

Figure 11: Assigning the skybox two Material

Figure 12: The new sky

Figure 03: Change the Source Image to Sun

Figure 04: Adding the Button component

Figure 05:  Positioning the new button

Figure 06: Drag the script onto the new button

Figure 07: Adding a click event

Figure 08: Linking the Button script to the On Click () event

Figure 9: Selecting the changeSky function

Figure 10: Assigning the skybox one Material

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

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.

Figure 13: The changeSky script

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.

Changing Skyboxes

1. Introduction

2. Creating the Button

3. Understanding the Script

4. Next Steps

Complete this tutorial