Change 360 panorama background in React 360 app
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.
Instructor: [00:00] 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.
[00:09] 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.
[00:18] 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.
[00:27] 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.
[00:41] 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.
[00:52] 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.
[01:10] 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.