Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Change 360 panorama background in React 360 app

    Tomasz ŁakomyTomasz Łakomy
    reactReact
    ^16.3.2

    React 360 is optimized for the presentation of 360 photos and videos. These are essential for creating an immersive environment, and allow you to seemingly transport your user to a virtual location.

    In this lesson we're going to learn how to change the default panorama background displayed around the user, as well as how to change the image dynamically using the Environment.setBackgroundImage() method.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: There are a couple of places in which we can change the background that gets displayed around the user. The first place is inside of the current JS. Here, we can specify the default background that will get displayed.

    Right now, it's 360 work. If I were to change it to Spain.jpeg, I am going to change the background to this picture of Spain that I took myself a couple of years ago.

    This picture is inside of the static_assets folder. Apart from changing the default background, we can also change the background dynamic inside of our React application.

    Let me go ahead and revert this change, and we're going to jump into index.js. Over here, we have the updated places. Each place has a flag and also a panorama associated with it. First, Spain has a flag of Spain and also this panorama that we can see over here.

    Here in the flag methods, we are mapping over all those places and displaying a flag for each country. Our goal would be whenever a user is going to click on one of those flags, we would like to travel to this place.

    To achieve this effect, first import environment from React 360. Next, we're going to create a change background method. It's going to take the panorama as argument. Here, we're going to inaudible environment, set background image. I am going to use the asset function to get the image associated with this panorama.

    Over here on this onClick handler, I am going to call this function change background and I am going to pass in the panorama of this place. Now, we can use our app to travel. If I were to click on the flag of Spain, I am going to go to Spain. If I click on the flag of Pakistan, I am going to go to this place.