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

The Animated API


React and React VR make this easy as the animation API has a number of animation types that make this straightforward, without having to do math or have key frames, as you would with traditional animation. Instead of keyframing, you can ramp up things slowly, bounce, and pause declaratively. These props are spring, decay, and timing; more detail on these is in the online documentation at http://bit.ly/ReactAnims.

It's fine to animate, but we need to know where we are going. To do this, the Animation API has two value types: value for scalar (single values), and ValueXY for vectors. You might wonder why in this case a vector is only X and Y—ValueXY is intended for UI elements, that by their nature, are flat. If you need to animate an X, Y, and Z location, you would use three scalars.

First, we'll create an animated teapot that spins. This will be especially helpful to see how our texture mapping works. If you've been following along the code, your SpaceGallery app should already...