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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!