O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Getting Started with React VR

Getting Started with React VR

by John Gwinner
Publisher: Packt Publishing
Release Date: November 2017
ISBN: 9781788476607
View table of contents
Start reading

Book Description

Create amazing 360 and virtual reality content that runs directly in your browsers with JavaScript and React VR 2.0

About This Book

  • A practical guide to developing virtual reality experiences targeting web and mobile browsers
  • Create customized 3D graphics for your virtual reality experiences with Three.js
  • Explore the ReactVR library to create objects that seem real and see how they move in the Virtual world
  • Import free models into VR and include those in your code

Who This Book Is For

This book is for web developers who want to use their existing skill set of HTML, CSS, and JavaScript to create virtual reality experiences.

What You Will Learn

  • Use Blender 2.79 to make virtual reality objects for Web VR.
  • Import free models into VR and how to include those in your code
  • Build a Virtual Museum with interactive art pieces
  • Create your first VR App and customizing it
  • Build animations by procedurally changing an object's position, using timers and Animated APIs
  • Incorporate React Native code and JavaScript code in your VR world

In Detail

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!

Style and approach

A step-by-step practical guide to help readers build their first VR application.

Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the code file.

Table of Contents

  1. Preface
    1. What this book covers
    2. What you need for this book
    3. Who this book is for
    4. Conventions
    5. Reader feedback
    6. Customer support
      1. Downloading the example code
      2. Downloading the color images of this book 
      3. Errata
      4. Piracy
      5. Questions
  2. What is Virtual Reality, Really?
    1. What Virtual Reality is and how it works
      1. Use of stereo and parallax in Virtual Reality
      2. Why does Virtual Reality work if it doesn't look 100% real?
      3. Other types of VR; AR, XR, SR/FR
    2. History of VR
    3. User agency - interacting with the world through controllers
      1. High-end controllers for PC, Mac, and Linux
        1. HTC Vive
        2. Oculus Rift
      2. Mobile VR
    4. Rendering hardware
      1. How to view VR?
        1. VR can be dangerous
        2. VR Headset options
        3. Types of headsets
          1. Mobile headsets
          2. PC, Mac, and Linux headsets
    5. Summary
  3. Flatland and Beyond: VR Programming
    1. HTML and ways to move beyond the 2D internet
      1. Background of Node.js and JavaScript
    2. Making servers React
    3. Graphics libraries — OpenGL and WebGL
    4. Installation of Node.js and React VR
      1. Installation of Node.js
      2. Post Node.js installation — installing React VR
      3. Installation of a WebVR browser
    5. Summary
  4. 3D or Reality in Dimensions Other than X and Y
    1. Beyond flatland - 3D concepts
      1. Coordinates
        1. What about rotations?
      2. Points
      3. Vectors
      4. Transforms
        1. What about the matrix?
      5. Rendering
        1. Testing how it looks
        2. How rendering works
    2. Summary
  5. The React VR Library
    1. JSX - the syntax of React VR
      1. Differences between React VR and React
      2. Core Components
      3. VR Components
      4. Props
      5. State
      6. Events
      7. Layout and style
    2. The next level - the details
      1. Stuff (objects, whether visible or not)
        1. Primitives
          1. Box
          2. Cylinder
          3. Plane
          4. Sphere
        2. Model
        3. CylindricalPanel
        4. VideoControl
        5. VrButton
      2. Lights
        1. Common light properties
        2. AmbientLight
        3. DirectionalLight
        4. PointLight
        5. SpotLight
      3. Multimedia - sound and video
        1. Sound
        2. Video
      4. Cameras and viewing
        1. LiveEnvCamera 
        2. View
    3. Summary
  6. Your First VR App
    1. Moving beyond hello world - our first VR world
      1. VR world design - or, congrats, you are the new Astronomy Museum curator!
      2. Creating the base React VR components
      3. Creating the larger world - background image
      4. Cluttering up the world - adding our first VR components
        1. Lighting up the world
        2. Why did I have you paste in both a Plane and a Box?
      5. Got Class - consolidating objects as new keywords
      6. Putting it all together
      7. Adding the pedestals
    2. Summary
  7. Working with Poly and the Gon Family
    1. Polygons and why we like them
      1. Why doesn't VR use some of these techniques?
    2. What is a polygon? discussion of vertices, polygons, and edges
    3. Where to get 3D models
    4. Summary
  8. Sitting Down with a (Virtual) Teapot
    1. The teapot in Blender
      1. Fixing the UV maps for the teapot
    2. Importing materials
    3. Fixing the deck plates
      1. The finished VR world
    4. Summary
  9. Breath Life in Your World
    1. The Animated API
      1. Flying teapots
      2. Spinning once and forever
      3. The final code
    2. Sound
      1. Putting sound in our world
    3. Summary
  10. Do It Yourself – Native Modules and Three.js
    1. Native modules and views
      1. Making a three.js cube demo
      2. Making native code interact with React VR
      3. Summing up the code so far
    2. Something more visual
      1. Next steps
    3. Extending React VR — Native Views
      1. Extending the language
    4. Summary
  11. Bringing in the Real Live World
    1. Going to Mars (the initial world creation)
      1. Creating the initial world
    2. Jason and JSON
      1. Why JSON has nothing to do with React
    3. Finding the API -- All the way from Mars
      1. A better API from NASA
      2. Everyone needs a style(sheet)
    4. Building the image and status UI
      1. How (not to) to make people sick
    5. Summary
  12. Take a Walk on the Wild Side
    1. Going loco–VR locomotion
      1. Types of VR locomotion
      2. Avoiding the ghost effect
    2. Building a maze
      1. Almost random–pseudo random number generators
      2. Including library code from other projects
      3. The Maze render()
      4. Adding the floors and type checking
        1. Using the glTF file format for models 
    3. Animation — VR Buttons
      1. Raycasters
      2. Props, state, and events
      3. Making updates flow up river
    4. Where to go from here?
    5. Summary
  13. Publishing Your App, and Where to Go from Here
    1. Upgrading React VR
      1. Upgrading in place
      2. Third-party dependencies
      3. Really broken upgrades – rip and replace
      4. The best time to do an upgrade
    2. Getting your code ready to publish
      1. Good code organization
      2. Cleaning the lint trap (checking code standards)
      3. React VR coding style
      4. Third-party dependencies
    3. Bundling for publishing on the web
      1. Packaging React VR for release on a website
      2. Obtaining releases and attribution
      3. Checking image sizes and using content delivery sites
      4. Optimizing your models
    4. Now that we've gotten it published, what's next
      1. Physics – making the world interact with itself
      2. Game play engines – letting you interact with others
    5. Monetizing VR
    6. Where VR will go in the next five years
      1. Do not wait for next year's technology
      2. Better HMDs
      3. Better and more realistic graphics
      4. Easier content creation and more high-end content
      5. Eye tracking
      6. Audio improvements
      7. Controlling VR
      8. Social and legal issues and solutions
    7. Summary