React 360 - JavaScript

React 360 is a framework for creating virtual reality experiences using JavaScript and React. With React 360, you can build immersive and interactive applications for VR headsets and web browsers.

Getting Started

To get started with React 360, you'll need to install the React 360 CLI:

npm install -g react-360-cli

Next, you can create a new React 360 project:

react-360 init myproject
cd myproject
npm start

This will start the React 360 development server and open your project in a web browser.

Components

In React 360, you can create components just like you would in regular React. However, these components will be used to build 3D scenes in virtual reality.

For example, here's a simple rotating cube component:

import React from 'react';
import { View, StyleSheet } from 'react-360';
import * as THREE from 'three';

export default class RotatingCube extends React.Component {
  state = {
    rotation: new THREE.Euler(),
  };

  componentDidMount() {
    this.frameHandle = requestAnimationFrame(this.animate);
  }

  componentWillUnmount() {
    cancelAnimationFrame(this.frameHandle);
  }

  animate = () => {
    const rotation = this.state.rotation.clone();
    rotation.y += 0.01;
    this.setState({ rotation });
    this.frameHandle = requestAnimationFrame(this.animate);
  };

  render() {
    return (
      <View style={styles.container}>
        <View
          style={styles.cube}
          onEnter={() => console.log('Enter')}
          onExit={() => console.log('Exit')}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    transform: [{ translate: [0, 0, -3] }],
  },
  cube: {
    width: 2,
    height: 2,
    backgroundColor: 'red',
    transform: [{ rotate: this.state.rotation }],
  },
});

VR Inputs

React 360 provides several input components for handling VR input, such as the VrButton. You can use the VrButton component to create interactive elements in your VR scene.

Here's an example of a VrButton that changes color when pressed:

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

export default class InteractiveButton extends React.Component {
  state = {
    backgroundColor: 'red',
  };

  onPress = () => {
    this.setState({ backgroundColor: 'green' });
  };

  render() {
    return (
      <View style={styles.container}>
        <VrButton style={[styles.button, { backgroundColor: this.state.backgroundColor }]} onClick={this.onPress} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    transform: [{ translate: [0, 0, -3] }],
  },
  button: {
    width: 2,
    height: 0.5,
    borderRadius: 0.25,
  },
});

Conclusion

React 360 provides a powerful and flexible framework for creating VR experiences using JavaScript and React. With its intuitive API and rich set of features, React 360 makes it easy to build immersive and interactive applications for VR headsets and web browsers.