React 360

React 360

by Michael Colonna

Note: As of 2022, React 360's repo has been archived, suggesting that Facebook is not continuing support for the project.

Description

React 360 is a framework for the creation of interactive 360 experiences that run in your web browser. It pairs modern APIs like WebGL and WebVR with the declarative power of React, producing applications that can be consumed through a variety of devices. Leveraging web technologies and the existing React ecosystem, React 360 aims to simplify the construction of cross-platform 360 experiences.

React 360 builds off of React Native in its component structure and three.js for rendering 3D graphics in the browser.

For more info, see What is React 360? and https://facebook.github.io/react-360/

Download

https://facebook.github.io/react-360/docs/setup.html

Assuming you have Node installed on your computer, from the terminal simply run the following in order to download the React 360 command line interface:

npm i -g react-360-cli

Tutorial for Hello World

Estimated Time for Hello World:

  • Mac: <10 min.

  • Windows: <10 min.

  • Linux: <10 min.

Recommended System Requirements

Metrics

Accessibility: The estimated time for someone to create Hello World in VR

  • Beginner: No coding or graphics experience | 30 minutes

  • Intermediate: Some coding or graphics experience | 5 minutes

  • Advanced: Both coding and graphics experience | <5 minutes

  • Expert: A lot of experience with computer graphics, specifically with this software | <5 minutes

Power: The engine's power - i.e. how much one can do with this

  • Medium: React 360 allows React developers to enter the VR space with a gentle learning curve. However, because the library hides critical 3D geometric information from developers (such as raycasting information), it is clear that the library is not meant to be used for complex object manipulation. In addition, React 360 only supports .obj and .gltf2 models. The library is better suited for simple VR interfaces.

Usage: Evaluation of software's use for the following purposes

  • Game Design - Not good. Without information like raycasting, it would be difficult to make anything other than a point-and-click game with React 360.

  • Education - With the ability to create VR interfaces, import 3D models, and produce simple animations, React 360 could potentially be useful in producing educational content.

  • Science - React 360 can only import .obj and .gltf2 models, so it would be difficult to visualize scientific datasets like LiDAR and VTK files without some sort of additional conversion step. 3D object translation/rotation is also difficult.

Summary

React 360 is an interesting library for beginners in VR, especially those transitioning from frontend frameworks like React. As an entry point into VR, it is effective in introducing some basic concepts to the developer. However, for an in-depth dive into VR, a more advanced and robust library would be more useful.