react-360

Create amazing 360 and VR content using React

8,732

1,226

8,732

293

View on GitHub View on NPM

Top Related Projects

react-360

8,732

Create amazing 360 and VR content using React

aframe

16,566

:a: Web framework for building virtual reality experiences.

model-viewer

6,838

Easily display interactive 3D models on the web and in AR!

Quick Overview

React 360 is a framework for creating immersive 360 and VR experiences using React. It allows developers to build VR applications using familiar web technologies and React components, making it easier to create interactive 3D environments that can be viewed in web browsers or VR headsets.

Pros

Easy integration with existing React knowledge and ecosystem
Cross-platform compatibility (web browsers and VR headsets)
Simplified development of 3D and VR experiences
Good performance optimization for VR environments

Cons

Limited to 360-degree experiences and basic VR interactions
Less powerful than full-fledged game engines for complex 3D applications
Smaller community and ecosystem compared to other VR development tools
No longer actively maintained by Facebook (archived repository)

Code Examples

Creating a basic 360 view:

import React from 'react';
import {AppRegistry, View, Text} from 'react-360';

export default class Hello360 extends React.Component {
  render() {
    return (
      <View>
        <Text>Hello 360 World!</Text>
      </View>
    );
  }
}

AppRegistry.registerComponent('Hello360', () => Hello360);

Adding 3D objects to the scene:

import React from 'react';
import {View} from 'react-360';
import Entity from 'Entity';

export default class Scene extends React.Component {
  render() {
    return (
      <View>
        <Entity
          source={{obj: asset('cube.obj')}}
          style={{
            transform: [{translate: [0, 0, -5]}],
          }}
        />
      </View>
    );
  }
}

Handling user input:

import React from 'react';
import {VrButton, Text} from 'react-360';

export default class InteractiveButton extends React.Component {
  state = {clicked: false};

  handleClick = () => {
    this.setState({clicked: true});
  };

  render() {
    return (
      <VrButton onClick={this.handleClick}>
        <Text>
          {this.state.clicked ? 'Clicked!' : 'Click me!'}
        </Text>
      </VrButton>
    );
  }
}

Getting Started

To start a new React 360 project:

Install the React 360 CLI:
```
npm install -g react-360-cli
```
Create a new project:
```
react-360 init MyVRProject
```
Navigate to the project directory and start the development server:
```
cd MyVRProject
npm start
```
Open http://localhost:8081/index.html in your web browser to view your VR application.

Competitor Comparisons

react-360

8,732

Create amazing 360 and VR content using React

Pros of react-360

Identical repository and project, so all features and capabilities are the same
No differences in functionality or performance

Cons of react-360

No unique disadvantages compared to itself
Identical limitations and potential issues

Code Comparison

Both repositories contain the same codebase, so a code comparison would show identical snippets. For example, both would include the same React 360 initialization code:

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} from 'react-360';

export default class HelloWorld extends React.Component {
  render() {
    return (
      <View style={styles.panel}>
        <Text style={styles.greeting}>
          Welcome to React 360
        </Text>
      </View>
    );
  }
};

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

This comparison highlights that facebookarchive/react-360 and facebookarchive/react-360 are the same repository. They share identical pros, cons, and codebase. Any differences would be purely coincidental or due to potential synchronization issues between the two identical repositories, if they were maintained separately for any reason.

aframe

16,566

:a: Web framework for building virtual reality experiences.

Pros of A-Frame

Active development and community support
Extensive documentation and examples
Declarative HTML-based approach, making it easier for beginners

Cons of A-Frame

Potentially lower performance for complex scenes
Less flexibility compared to lower-level APIs
Steeper learning curve for advanced customizations

Code Comparison

React 360:

import React from 'react';
import {AppRegistry, View, Text} from 'react-360';

export default class HelloWorld extends React.Component {
  render() {
    return (
      <View>
        <Text>Hello VR World!</Text>
      </View>
    );
  }
}

AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

A-Frame:

<html>
  <head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
      <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
      <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

gvr-unity-sdk

2,707

Google VR SDK for Unity

Pros of gvr-unity-sdk

Integrated with Unity, a popular game development engine
Supports a wider range of VR devices, including Google Cardboard and Daydream
Offers more low-level control for developers

Cons of gvr-unity-sdk

Steeper learning curve for developers not familiar with Unity
Less focus on web-based VR experiences
Requires more setup and configuration compared to React 360

Code Comparison

react-360:

import React from 'react';
import {AppRegistry, View, Text} from 'react-360';

function MyVRApp() {
  return (
    <View>
      <Text>Hello VR World!</Text>
    </View>
  );
}

AppRegistry.registerComponent('MyVRApp', () => MyVRApp);

gvr-unity-sdk:

using UnityEngine;
using GoogleVR;

public class VRController : MonoBehaviour
{
    void Update()
    {
        if (GvrControllerInput.ClickButtonDown)
        {
            // Handle VR input
        }
    }
}

The react-360 example shows a simple React component for a VR app, while the gvr-unity-sdk example demonstrates how to handle VR input in Unity using C#. React 360 focuses on declarative UI creation, while gvr-unity-sdk provides more direct control over VR interactions within the Unity environment.

model-viewer

6,838

Easily display interactive 3D models on the web and in AR!

Pros of model-viewer

Simpler implementation for displaying 3D models on web pages
Built-in support for AR experiences on compatible devices
Actively maintained and regularly updated

Cons of model-viewer

Limited to displaying 3D models, lacks full VR environment capabilities
Less flexibility for creating complex interactive experiences
Smaller ecosystem and community compared to React 360

Code Comparison

model-viewer:

<model-viewer
  src="model.glb"
  alt="A 3D model"
  auto-rotate
  camera-controls
  ar
></model-viewer>

React 360:

import React from 'react';
import { AppRegistry, View } from 'react-360';

export default class MyVRApp extends React.Component {
  render() {
    return <View>/* VR content */</View>;
  }
}

AppRegistry.registerComponent('MyVRApp', () => MyVRApp);

model-viewer focuses on simplicity for displaying 3D models, while React 360 offers a more comprehensive framework for building VR experiences. model-viewer is better suited for quick integration of 3D models and AR features, whereas React 360 provides greater flexibility for creating immersive VR environments and complex interactions. The choice between the two depends on the specific requirements of your project and the level of complexity needed in the 3D/VR experience.

three.js

101,622

JavaScript 3D Library.

Pros of Three.js

More versatile and powerful for 3D graphics rendering
Larger community and ecosystem with extensive documentation
Actively maintained and regularly updated

Cons of Three.js

Steeper learning curve for beginners
Requires more low-level programming for complex scenes
Less optimized for VR-specific applications

Code Comparison

React 360:

import React from 'react';
import {AppRegistry, View, VrButton, Text} from 'react-360';

export default class HelloVR extends React.Component {
  render() {
    return (
      <View>
        <VrButton onClick={() => console.log('Clicked!')}>
          <Text>Hello VR World!</Text>
        </VrButton>
      </View>
    );
  }
}

AppRegistry.registerComponent('HelloVR', () => HelloVR);

Three.js:

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

React 360

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

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.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of react-360

Cons of react-360

Code Comparison

Pros of A-Frame

Cons of A-Frame

Code Comparison

Pros of gvr-unity-sdk

Cons of gvr-unity-sdk

Code Comparison

Pros of model-viewer

Cons of model-viewer

Code Comparison

Pros of Three.js

Cons of Three.js

Code Comparison

Convert designs to code with AI

README

React 360

Getting Started

Opening Issues

Contributing

License

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days