Create amazing 360 and VR content using React

Last update: May 10, 2022

React 360 npm version Circle CI

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.

Getting Started

We've designed the React 360 developer experience to get your first project up and running in only a few minutes. Before installing the developer tools, you'll need to make sure that you have two prerequisites installed:

  • Node.js version 6.0.0 or higher
  • yarn or npm (>= v3.0.0) package managers

Next, install the React 360 CLI – a command-line tool that generates the basic layout of new projects.

npm install -g react-360-cli

Or

yarn global add react-360-cli

You'll only need to install this CLI once. It will alert you when it's out of date, and provide instruction on how to update it.

Once installed, the CLI can be used to create a new project by running

react-360 init PROJECT_NAME

where PROJECT_NAME is the name of your new application. Once it's been created and the dependencies are installed, change your working directory to PROJECT_NAME, and start the application server by running npm start (or yarn start). You can also use --https option to run the server with https.

When the server has booted, you can access your application by navigating to http://localhost:8081/ in your web browser. Your application's code can be found in index.js, and you can learn more about available framework features by diving into our documentation.

Opening Issues

If you encounter a bug with React 360, let us know. Search the existing issues and try to make sure your problem doesn't already exist before opening a new issue. It's helpful if you include the version of React 360, Browser, and OS you're using. Please include a stack trace and reduced repro case where appropriate.

React 360 is open source software, and we welcome contribution from the wider community. If you are able to fix your bug, or find a way to fix another existing issue, we encourage you to submit a PR to address it.

If you find a documentation typo, please don't file an issue – just create a pull request containing the fix and we will pull it into the documentation.

Contributing

For more information about contributing to React 360, see our Contributor Guidelines.

License

React 360 is BSD licensed. We also provide an additional patent grant.

React documentation is Creative Commons licensed.

Examples provided in this repository and in the documentation are separately licensed.

GitHub

https://github.com/facebookincubator/react-vr
Comments
  • 1. No controllers

    Description

    Project works but Vive controllers are not visible. Unsure if this is a bug or not.

    Expected behavior

    I expect to see my Vive controllers after enabling the game controller flags in chrome. (Perhaps this is enabled so that we are able to use the HMD but not the controllers yet.)

    Actual behavior

    The controllers are visible in the HTC overlay but disappear when returning to the react-vr demo window.

    Windows VR Device:Vive

    Reviewed by Fasani at 2016-12-16 00:04
  • 2. Possible to layer Panos?

    Description

    I'm trying to figure out whether it's possible to layer one Pano overtop of another. For example, if I have a base Equirectangular image of a kitchen, and I wanted to select a different color countertop, I could layer a second Pano of an Equirectangular png cutout of just the countertop, instead of having to stitch together an entirely different panoramic image for each possible scenario.

    From what I've tried up to this point, it looks like the answer is no, but if someone could say so definitively or give an idea of how this might be accomplished another way, that would be greatly appreciated!

    What I've tried so far:

    Layering one Pano element over another (ReactVR seems to try to make it work, but result is glitchy)

    export default class TestVR extends React.Component {
      render() {
        return (
          <View>
            <Pano source={asset('Kitchen.jpg')}>
              <Pano source={asset('Kitchen_Cabs.png')}/>
            </Pano>
          </View>
        );
      }
    };
    

    Layering as Image over Pano (won't ever line up properly bc png itself is an equirectangular image)

    export default class TestVR extends React.Component {
      render() {
        return (
          <View>
            <Pano source={asset('Kitchen.jpg')} />
            <Image source={asset('Kitchen_Cabs.png')}
                   style={{
                     width: xxx,
                     height: xxx,
                     layoutOrigin: [0.5, 0.5],
                     transform: [{translate: [0, 0, -xxx]}],
                   }} />
          </View>
        );
      }
    };
    
    Reviewed by dludwick at 2018-01-11 17:41
  • 3. Changing Pano source crashes iOS

    Description

    Changing pano source crashes both Safari and Chrome on iOS after a few times.

    Seems it happens when going back to a previously loaded source. Do you by any chance miss checking if the browser garbage collector has snatched a previously loaded object before trying to render it? (Just a guess.)

    It's simple to reproduce. Running 1.4.0.

    Actual behavior

    iOS Chrome: Aw, Snap! iOS Safari: A problem occured with this web page, so it has reloaded.

    Reproduction

    init new project cd static_asset eq2cm chess-world.jpg 64 c1cm eq2cm chess-world.jpg 2048 c2cm

    Then just flipping between these two Pano sources 8-12 times crashes the viewer.

    index.vr.js:

    import React from 'react';
    import {
      AppRegistry,
      asset,
      Pano,
      Text,
      View,
      VrButton,
    } from 'react-vr';
    
    const cm1 = [ asset('c1cm0.png'), asset('c1cm1.png'), asset('c1cm2.png'), asset('c1cm3.png'), asset('c1cm4.png'), asset('c1cm5.png') ];
    const cm2 = [ asset('c2cm0.png'), asset('c2cm1.png'), asset('c2cm2.png'), asset('c2cm3.png'), asset('c2cm4.png'), asset('c2cm5.png') ];
    
    export default class crashtest extends React.Component {
      constructor (props) {
        super(props);
        this.state =  {
          src: cm1,
          toggle: false,
        };
        this.toggleSrc = this.toggleSrc.bind(this);
      }
    
      toggleSrc(){
        if(this.state.toggle) {
          this.setState({src: cm1});
        } else {
          this.setState({src: cm2});
        }
        this.setState({toggle: !this.state.toggle});
      }
    
      render() {
        return (
          <View>
            <Pano source={this.state.src}></Pano>
            <VrButton onClick={()=>this.toggleSrc()}>
              <Text style={{
                backgroundColor: '#777879', fontSize: 0.4, fontWeight: "400",
                layoutOrigin: [0.5, 0.5], textAlign: 'center', textAlignVertical: 'center',
                transform: [{translate: [0, 0, -3]}],
              }}>
                Click me 15 times on iOS Chrome or Safari
              </Text>
            </VrButton>
          </View>
        );
      }
    };
    
    AppRegistry.registerComponent('crashtest', () => crashtest);
    
    

    Solution

    Haven't found any work-around. Happens sooner or later depending on total file sizes. Launch blocking.

    Additional Information

    • 'react-vr' package version: 1.4.0
    • 'react-vr-web' package version: 1.4.0
    • Operating System: Mac OSX
    • Graphics Card: iPhone 7
    • Browser: iOS Chrome, iOS Safari, latest versions
    • VR Device: Non-VR mode, swiping
    Reviewed by ctoLarsson at 2017-07-09 15:33
  • 4. Firebase / WebSockets handshake error

    Trying to use Firebase with ReactVR.

    This is my code -

    export default class WelcomeToVR extends React.Component {
    
      constructor(){
        super();
        
        var config = {
          apiKey: "<REDACTED>",
          authDomain: "<REDACTED>",
          databaseURL: "<REDACTED>",
          projectId: "<REDACTED>",
          storageBucket: "<REDACTED>",
          messagingSenderId: "<REDACTED>",
        };
        firebase.initializeApp(config);
      }
    
      componentWillMount() {
        firebase.database().ref(`viewers`).on('child_added', function(data) {
          console.log(data);
        });
      }
    
      render() {
        return (
          <View>
          </View>
        );
      }
    };
    
    AppRegistry.registerComponent('WelcomeToVR', () => WelcomeToVR);
    
    

    This is the error I am seeing in the console -

    WebSocket connection to 'wss://kastio-vr.firebaseio.com/.ws?v=5' failed: Error during WebSocket handshake: Unexpected response code: 500
    
    WrappedWebSocket	@	VM1892:37
    connect	@	WebSocketModule.js:45
    frame	@	ReactNativeContext.js:416
    frame	@	createRootView.js:188
    _frame	@	VRInstance.js:152
    

    Would love some help here. Do I need to do anything special for WebSockets?

    Reviewed by steverob at 2017-04-21 10:51
  • 5. VideoPano issue with large files

    I am trying to play a large 360 vr video file using the VideoPano option. The file size is about 600MB and I am getting some sort of timeout error when executing 'npm start'. I don't have any issues playing a 15MB video file.

    "Loading dependency graph...(node:15008) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): # (node:15008) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code."

    Not sure how to properly handle this error (I am a beginner at programming). Anyone else come across this or know how to handle it? Being able to use large mp4 files is a make or break for me using ReactVR.

    (Windows)

    Reviewed by aziliak at 2018-01-29 04:57
  • 6. A large amount a OBJ cannot be loaded as a Model

    Description

    I tried to display some objects from the poly google lib i just discovered, and a lot of them make react-vr displaying an error when trying to load them.

    Expected behavior

    Be able to load any model from the Poly Google library.

    Actual behavior

    An error occurs so the model is not displayed (with 4/5 models i tried from the library), here is the error:

    Failed to fetch resource: "../static_assets/models/<MY_MODEL>/model.obj".

    The first line of the stack trace is: (anonymous) | @ | ObjModelLoader.js:115

    Reproduction

    Just try to display this model for example: https://poly.google.com/view/aSeRYpWIbqV

    Here is the render:

    <View>
      <Model
         style={{
           transform: [
             { translate: [-25, 0, 0] },
             { scale: 100 },
             { rotateY: 0 },
             { rotateX: 20 },
             { rotateZ: -10 }
           ]
         }}
         source={{
           obj: asset('models/chip/model.obj'),
           mtl: asset('models/chip/materials.mtl')
         }}
       />
    </View>
    

    Solution

    I really don't know, i am just discovering the framework...

    Additional Information

    • 'react-vr' package version: 2.0.0
    • 'react-vr-web' package version: 2.0.0
    • Operating System: MacOS
    • Graphics Card: AMD Radeon
    • Browser: Chrome 62.0.3202.75
    • VR Device: Out of VR
    Reviewed by JohnCoding94 at 2017-11-06 13:08
  • 7. Can play video on browser for android

    As we know, there's auto-play restricted on mobile, so I try to use Video or VideoPano to set a vr video (mp4 type) and MediaPlayerState to play it , it work good on PC, but unwork on Chrome(v58) or Firfox(v53) of my android(v5.1) device.

    Reviewed by huangbuyi at 2017-04-21 10:09
  • 8. Headset cursor selector and toggling VR mode

    I would like to request two features, one for handling when a user clicks "view in VR" and "exit VR". I would like to create an event handler to look for interaction with the 'View in VR' and 'Exit VR' feature. I need to use this to signify when to re-render components in a native 360 environment instead of the components rendered outside of react 360. I would also like to have a feature to use with VR headsets default fixed-center cursor for selection (by holding its position on an interactive element). If such features exist I have been unsuccessful in finding that information, even in the source code.

    Thanks in advance, -Aiden

    Reviewed by AidenFaulconer at 2019-02-21 02:01
  • 9. [Question] Bump Map Support

    I am attempting to assign a bump map to a model using materialParameters but cannot see the bump map in the scene, are bump maps a supported feature? Example below - Thanks!

    <GazeButton duration={1000} onClick={onClick}> <AmbientLight intensity={1} style={{ layoutOrigin: [0.5, 0.5] }} /> <Model lit={true} source={{ obj: asset('models/coin/coin.obj'), mtl: asset('models/coin/coin.mtl'), }} style={{ layoutOrigin: [0.5, 0.5], transform: [ {rotateX: '90deg'} ] }} materialParameters={{ bumpMap: asset('models/coin/coin-texture-bump.jpg'), bumpScale: 1000, }} /> </GazeButton>

    Reviewed by ericseaton-avatar at 2017-08-31 21:35
  • 10. Poor performance?

    Hi, I'll probably attach a repro anytime soon, but I wanted to check with you if you were already aware of poor performances when it comes to update the "markup" of a scene.

    For instance, I have a set of colored spheres positioned in the 3d space, and when I gaze at one of them, all the spheres of the same color should stay colored while the rest should become black.

    When I run the app and I gaze at a sphere, it takes several seconds to highlight the selected set of spheres and it flickers a lot.

    Same thing happens with the movement of the camera, I tried to make the camera move when I use the analog of the Oculus, but it lagged a lot, I mean, it took few minutes to perform any update. I tried to move the objects in the scene instead of the camera to see if it helped, but the result is almost the same.

    Thank you for your help!

    Reviewed by FezVrasta at 2017-03-31 15:49
  • 11. "Error: Unrecognized platform: vr" when following instructions

    Description

    Bug: Right after following install instructions, upon navigating to http://localhost:8081/vr/, nothing is displayed.

    Browser log:

    caught ReferenceError: ReactVR is not defined
        at (index):11
    

    server log:

    Error: Unrecognized platform: vr
    

    Additional Information

    • react-vr package version: 0.1.1
    • react-vr-web package version: [FILL THIS OUT]
    • Operating System: MacOS
    • Graphics Card: AMD Radeon R9 M370X 2048 MB
    • Browser: Chrome 55
    • VR Device: out, browser
    Reviewed by vgrafe at 2016-12-14 17:50
  • 12. React360 is incompatible with Oculus Quest

    Description

    Like thousands of other VR enthusiasts, I recently got an Oculus Quest and was excited to try to use it for development purposes. I was particularly eager to try React 360 because I'm very familiar with React and so the principles are easy for me to pick up. (I am sure there are many others like me in this regard.) But when I navigated in my Quest to my local Metro build as described in the documentation, the Oculus Browser provides no option to launch the content in VR.

    The limited search results available when I tried to research this issue indicated that this is because of a discrepancy between what the Oculus Browser supports (WebXR) and the API that React 360 uses (WebVR).

    Expected behavior

    I expect that one of the most ideal workflows for creating web-based VR content should be available for VR viewing in the single most popular VR headset on the market right now. Not making this available seems very counterintuitive if the goals of this project include enabling more developers to experiment and pursue projects that will make VR a more viable and exciting product for consumers.

    Solution

    I am not sure what needs to be done to facilitate this feature. I am unfamiliar with the specifics of this project, but I'm certainly willing to help contribute if some guidance or advisement can be provided.

    Reviewed by intrepidOlivia at 2020-12-12 21:42
  • 13. Bump ini from 1.3.5 to 1.3.7

    Bumps ini from 1.3.5 to 1.3.7.

    Commits
    • c74c8af 1.3.7
    • 024b8b5 update deps, add linting
    • 032fbaf Use Object.create(null) to avoid default object property hazards
    • 2da9039 1.3.6
    • cfea636 better git push script, before publish instead of after
    • 56d2805 do not allow invalid hazardous string as section name
    • See full diff in compare view
    Maintainer changes

    This version was pushed to npm by isaacs, a new releaser for ini since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    Reviewed by dependabot[bot] at 2020-12-11 10:19
  • 14. solved the footer star problem

    Description Is this a Bug or a Feature Request? A bug. Star link in the footer is not working.

    Expected behavior It should lead to the repository to be starred.

    Actual behavior It is dead.

    Reproduction Open the website Scroll down to the footer Try clicking on the 'Star' link Additional Information Operating System: [MacOS] Browser: [Chrome Version 79.0.3945.130]

    Reviewed by iamrubayet at 2020-11-23 22:32
  • 15. .md files got modified

    Fixing grammar and snippet languages in the docs/*.md files.

    • [x] Explain the motivation for making this change.
    • [ ] Provide a test plan demonstrating that the code is solid.
    • [x] Match the code formatting of the rest of the codebase.

    Motivation (required)

    What existing problem does the pull request solve?

    I came across the documents of the project and faced some grammar issues and find out some of the snippets are not indicated with any specific languages so I try to fix them to allow future users to read them easier.

    Reviewed by SMAKSS at 2020-10-24 02:08
  • 16. Star link got fixed

    Fixes #781 and closing (PR) #810 which do not fix this problem.

    • [x] Explain the motivation for making this change.
    • [x] Provide a test plan demonstrating that the code is solid.
    • [x] Match the code formatting of the rest of the codebase.

    Motivation (required)

    What existing problem does the pull request solve?

    siteConfig.js includes a property named as repoUrl which is commented earlier, this property was used as a href for star link in the footer, so it caused it to not work as expected.

    Test Plan (required)

    You can simply try the star link in the footer to see if it works or not.

    star

    Reviewed by SMAKSS at 2020-10-24 01:03
  • React bindings to create and control a 3D scene using three.js

    react-three-legacy Create/control a three.js canvas using React. To use React for drawing 2D using WebGL, try react-pixi. This react-three is deprecat

    Apr 26, 2022
    📄 Create PDF files using React
    📄  Create PDF files using React

    React renderer for creating PDF files on the browser and server Lost? This package is used to create PDFs using React. If you wish to display existing

    May 14, 2022
    Create elegant HTML email templates using React.

    react-html-email ⚠️ Currently Unmaintained react-html-email is presently unmaintained. As React has matured, it is no longer as necessary to use a sep

    May 14, 2022
    🎥 Create videos programmatically in React
    🎥      Create videos programmatically in React

    Join the Discord Remotion is a suite of libraries building a fundament for creating videos programmatically using React. Why create videos in React? L

    May 17, 2022
    📄 Create word documents with React
    📄  Create word documents with React

    redocx Create word documents with React Introduction redocx is a library which lets you create word documents with React. It provides a set of compone

    May 11, 2022
    🍙 A minimal implementation of react-dom using react-reconciler
    🍙 A minimal implementation of react-dom using react-reconciler

    react-tiny-dom react-tiny-dom is a minimal implementation of react-dom as custom renderer using React 16 official Renderer API. The purpose of this pr

    May 10, 2022
    Write PixiJS applications using React declarative style.

    ReactPixiFiber – React Fiber renderer for PixiJS ReactPixiFiber is a JavaScript library for writing PixiJS applications using React declarative style

    May 8, 2022
    Experiments to see the advantages of using Web Workers to Render React Virtual DOM

    React Renderer using Web Workers A React Custom renderer using Web Workers. All the Virtual DOM reconcilliations happen in a WebWorker thread. Only no

    May 1, 2022
    🦍• [Work in Progress] React Renderer to build UI interfaces using canvas/WebGL
    🦍• [Work in Progress] React Renderer to build UI interfaces using canvas/WebGL

    React Ape React Ape is a react renderer to build UI interfaces using canvas/WebGL. React Ape was built to be an optional React-TV renderer. It's mainl

    May 12, 2022
    A simple react task to render uses contacts list using fake mockAPI
    A simple react task to render uses contacts list using fake mockAPI

    CONTACT LIST A simple react task to render uses contacts list using fake mockAPI. Contact list Light Page Contact list Dark Page Search by name Loadin

    Nov 26, 2021
    🇨🇭 A React renderer for Three.js (web and react-native)
    🇨🇭 A React renderer for Three.js (web and react-native)

    react-three-fiber react-three-fiber is a React renderer for threejs on the web and react-native. npm install three react-three-fiber These demos are r

    May 15, 2022
    🇨🇭 A React renderer for Three.js (web and react-native)
    🇨🇭 A React renderer for Three.js (web and react-native)

    react-three-fiber react-three-fiber is a React renderer for threejs on the web and react-native. npm install three react-three-fiber These demos are r

    May 19, 2022
    Build performant, native and cross-platform desktop applications with native React + powerful CSS like styling.🚀
    Build performant, native and cross-platform desktop applications with native React + powerful CSS like styling.🚀

    React NodeGui Build performant, native and cross-platform desktop applications with React. ?? React NodeGUI is powered by React ⚛️ and Qt5 ?? which ma

    May 18, 2022
    Build native, high-performance, cross-platform applications through a React (and/or QML) syntax

    ReactQML Build native, high-performance, cross-platform universal applications (desktop and mobile) through a React (and/or QML) syntax ?? NOTE: React

    Apr 23, 2022
    React bindings to Apple's TVJS and TVML
    React bindings to Apple's TVJS and TVML

    react-tvml this is a very alpha release React bindings to Apple's TVJS and TVML (it's not this slow, click on the gif to see a video) install $ npm in

    Mar 26, 2022
    Reactron is a React component visualizer that allows you to traverse an app's fiber tree and render components individually.
    Reactron is a React component visualizer that allows you to traverse an app's fiber tree and render components individually.

    Reactron Empowering the Development Process from Top to Bottom A tool for the complete and total visualization of your React application Reactron bols

    Mar 14, 2022
    React render tracker – a tool to discover performance issues related to unintentional re-renders and unmounts
    React render tracker – a tool to discover performance issues related to unintentional re-renders and unmounts

    React Render Tracker React Render Tracker – a tool to discover performance issues related to unintended re-renders. React Render Tracker (RRT) present

    May 4, 2022
    Render and format currencies easily

    Render and format currencies easily

    Nov 20, 2021
    React JSX Renderer is a React Component for rendering JSX to React nodes.

    React JSX Renderer A React Component for Rendering JSX. Description React JSX Renderer is a React Component for rendering JSX to React nodes.

    Jan 9, 2022