Create a Cylinder Surface and attach a component to it in React 360
Surfaces allow you to add 2D interfaces in 3D space, letting you work in pixels instead of physical dimensions. Currently there are two different shapes of Surfaces supported by React 360: Cylinder and Flat.
A Cylinder Surface takes your 2D content and projects it onto the inside of a cylinder with a 4 meter radius. A cylinder is great for displaying 2D content, because no matter which way you turn, you are always looking at the content straight-on.
In this lesson we are going to learn how to create a Cylinder Surface spanning the 360 degree view and how to attach a React 360 component to it.
Instructor: [0:00] So far, we've been creating React components inside of this index.js file, and those components were somehow projected onto this 360 view. How does it happen?
[0:09] The answer is, within the client.js, which a second JavaScript file that gets created by default once you create a new React 360 project. Essentially, each Reach 360 application is made out of two parts. There's your React code and the code is going to take your React components and actually project them onto 360 surface.
[0:27] The second piece is what we refer to as the run time. The run time is specified within the client.js because this is where your React 360 project gets initialized. Let's focus on this part.
[0:39] Here, we're entering to our surface, our travel vr component. The travel vr component is this component we have been working on so far. Here, we're using a default surface.
[0:49] In React 360, there are two types of surfaces. There is a cylinder surface and a flat surface. Let's take a look at the cylinder surface because this is what we have been using so far.
[0:58] If you look over here, you will notice that both the top and the bottom of our component is curved because this component is actually projected on a cylinder. The cylinder is actually a sphere of a four-meter radius that is surrounding the entirety of the user view.
[1:13] We can project different components on top of the surface, such as this travel vr component. Let's stop using the default surface and create our own. First, import surface from React 360 web. Here, we're going to create a new surface. I am going to call it as my surface. It's going to be a new surface.
[1:29] We need to specify a width, which I am going to set to 4,680. I am going to set the height to 600. I am going to set the surface, surface, shape, cylinder. The reason for the specific width is that if we set the width to 4,680, we create a surface that's going to wrap the entirety of the user's view.
[1:49] What we're going to do is that we're going to have a React component that is going to be displayed everywhere around the users. No matter which way we look, we are always going to see this component.
[1:59] To use this new surface, remove this default surface and use it like this. We are rendering this travel vr component to our newly created my surface. Let me fix it, because I have a typo over here. Save and refresh.
[2:12] At the first glance, it would seem that our component has disappeared. This is not the case. What happens is that our component will simply move to the beginning of the surface and display over here.
[2:21] Instead of having this view of flags, we're going to create a component that's going to be in front of us no matter which way we look.
[2:28] To do that, go back to index.js. Remove both of those flags. We won't need them from now. Remove this flag. Remove those flags as well. We're going to set the width of this component to 4,680 so it's exactly the same as the width of the cylinder.
[2:42] I am going to set opacity to 50 percent so that I can actually see what's behind my component after I save. First [inaudible] , we have the desired effect. Right now, we have this component displayed on the cylinder. No matter which way I look, I always see this component in front of me.