Build 3D Panorama Scenes Using the Pano Component in React VR
A 360° image can be used to teleport a user to a different place. Alternatively it can be used as a background for a 3D scene. In this lesson we'll learn how we can use various types of images to make 3D VR scenes.
We'll learn how to load in panoramas which are equirectangular images, and we'll also learn how to cubemap multiple images. We'll also learn about passing event and style properties to <Pano/>.
[00:00] To render a 360 degree panorama, we need to input the pano component from React AR and add it to a scene. We add a source property, pass in an object, and reference the image in the URI property.
[00:15] In our case, we take the chess world that comes with the React AR boilerplate. If we refresh the page in a browser now, you can see that we can look around in this 360 degree chess world. This works because the pano component maps an image using an angular rectangular projection to [inaudible] surrounding us.
[00:36] Before we move on with code, let's have a closer look how a certain image looks like. As you can see it is one large image covering 360 degree horizontally and 180 degree vertically.
[00:49] Back to code where I would like to introduce you to a helper function asset. It allows you to reference files in the static assets folder without typing out the relative path. Asset ships with React AR and we can import it from there. Asset itself accepts one string argument for a file name in the folder. We refresh the page and verify that this works.
[01:19] One important aspect of the pano component is that it is not limited to 3D scenes in any way. Recently, for example, I took a 360 degree photo to use it in React AR and to transform it to an angular rectangular projection and then add it as a source to my pano. In browser, we now can experience this photo in a VR scene and look around.
[01:43] Especially when viewing larger images it's useful to know when the image finished loading. Therefore, we can attach the handler on load. We're going to lock loader and verify in the browser that locks are loaded once the image finished loading.
[02:06] In addition, the pano component supports the star property, accept all sorts of CSS properties, but also some custom ones specific to React AR like transform. Transform allows us to provide translation, scaling, and rotation information for all three axes x, y, and z.
[02:27] To demonstrate this, we are rotating the pano on the y axis and refresh the page. This is useful to initiate the panorama from a different angle to let the observer focus on a different section in the scene right from the beginning.
[02:43] Before we finish up the lesson I want to highlight one more feature of the source property. It not only accepts an angular rectangular image but also a cube map of six images, one for each face of the cube.
[02:57] Here, for example, we have a scene stored in a static assets directory rendered to six images -- back, down, front, left, right, and up. To render a cube map we have to pass in an array of assets. Keep in mind the order is fixed. It's right, left, up, down, back, and front.
[03:30] Once we refresh the page we can now explore the environment by looking around. Of course you can have the same scene rendered as an angular rectangular image.