Book Image

Getting Started with React VR

By : John Gwinner
Book Image

Getting Started with React VR

By: John Gwinner

Overview of this book

This book takes you on a journey to create intuitive and interactive Virtual Reality experiences by creating your first VR application using React VR 2.0.0. It starts by getting you up to speed with Virtual Reality (VR) and React VR components. It teaches you what Virtual Reality (VR) really is, why it works, how to describe 3D objects, the installation of Node.js (version 9.2.0) and WebVR browser. You will learn 3D polygon modeling, texturing, animating virtual objects and adding sound to your VR world. You will also discover ways to extend React VR with new features and native Three.js. You will learn how to include existing high-performance web code into your VR app. This book will also take you through upgrading and publishing your app. By the end of this book, you'll have a deep knowledge of Virtual Reality and a full-fledged working VR app to add to your profile!
Table of Contents (20 chapters)
Title Page
Credits
About the Author
Acknowledgements
About the Reviewers
www.PacktPub.com
Customer Feedback
Preface

Building the image and status UI


Next, we will need to render the camera data in two different ways. The first, when we have no CameraData, yet, in other words, right when the app starts up, or if we don't have an internet connectivity; and the second, when we obtain the data and need to display it. We also want to keep these routines fairly modular so that when a state change is initiated we can easily redraw the objects that need it.

Note that a lot of this is done automagically by React VR. If an object's props or state do not change, it is not told to render itself. In this case, our main thread already has the JSON handling to modify the change, so nothing in the main loop has to be created to re-render the camera data. 

  1. Add the following code:
export default class CameraData extends Component {
    render() {
        if (!this.props) {
            return this.renderLoadingView();
        }
        var photos = this.props.photoCollection.photos;
        if (!photos) {
            return...