React 360 by Example: Part 3
Making our VR application interactive.
This article is part of a series starting with React 360 By Example: Part 1.
note: The final result of this article is available in the flat branch of the repository larkintuckerllc/hello-react-360.
The Goal
In order to illustrate a number of additional React 360 concept, we will build an application that:
- Uses the equilateral photo from a 3D scene we examined in the previous article (with four objects around the camera)
- Has green clickable circles in front of each of the objects
- When clicked, the circles change to red and the name of the object appears above it. Clicking the circle again hides the name and changes it back to green
The final runnable example for this series is available at:
https://larkintuckerllc.github.io/hello-react-360/
note: When this series is complete, the final runnable example will have additional functionality; beyond what is explained here.
Flat Surfaces
Previously we learned that surfaces can either be a cylinder or flat; the last example used the default (cylinder) surface. Now we will use a flat surface:
Flat Surfaces are positioned on the outside of an imaginary sphere, 4 meters in radius — this puts them at the same distance as the Cylinder Surface. The location of the Surface on that sphere can be controlled through three angles:
yaw — Rotate the surface location left and right
pitch — Rotate the surface location up and down
roll — Rotate the surface itself The roll angle is optional, only use it if you have specific requirement such as making a billboard surface.
— React 360 — Surfaces
In our case, we update client.js to create four flat surfaces positioned around the camera:
Observations:
- Each of the four surfaces display the same React 360 component (registered as Info); each, however, is supplied a different name property
- We position each of the flat surfaces using its setAngle method
For the organizational sake, we define the React 360 component in a src/components folder and simply register them in index.js:
VrButton and 2D Layout
Much like React Native’s TouchableOpacity component, the VrButton is simply a View (has no default visual appearance) that can additionally accept an onClick property (among some others). In order to create the clickable circle, we use a VrButton in src/components/Info/InfoView/index.js:
Children of 2D Views (we will examine 3D Views later) are laid out using flexbox; same implementation details as in React Native. We see this in our styles; src/components/Info/InfoView/styles.js:
Usual React Stuff
Finally, as we are using React, we have all the usual React features, e.g., state and propTypes as seen in the component; src/components/Info/index.js:
Observations:
- We only had to register the Info component; InfoView is imported like a normal React component into Info
Next Steps
In the next article, React 360 by Example: Part 4, we will enhance this application with animations, 3d images, and sound.
