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
About the Author
About the Reviewers
Customer Feedback

Animation — VR Buttons

OK! We want to animate something. To do that, we will use the VRButton. It activates when one of the following things occur:

  • Button A on an XBox Gamepad
  • Space button on a keyboard
  • Left click with a Mouse
  • Touch on a screen

Unfortunately, our "lowest common denominator" is a Google Cardboard, which may, or may not, have a button. You don't want to have to stick your finger inside and try to touch the screen. (After having said that, the newer VR headsets have a little lever arm that pokes the screen, even in the actual cardboard versions). What we will use is a Gaze button. When a mouse pointer or center of the screen (marked by a small dot) go over your object, events will be called, and our code will handle this.

The Gaze button is also packaged into a nice <GazeButton> object in the npm ecosystem. Please refer to the web page at: To use it, we'll need to understand what it does, and how we can let the View know that a Gem has been "touched...