React 360 - Display the text 180 degrees (behind the users initial view)

Question

I have just started exploring react 360 by installing the initial project. The initial project always displays text on initial load in front of the user. I am trying to move the text to the right using absolute position but after it goes outside of the initial surface it can not be seen anymore. I have read the documentation but it's not clear. What do I need to do? Do I need to increase the width of the surface so it wraps around the entire view (all around the user) in order for that text to be seen? How do I do this? Or is there actually any other preferred common technique. I am looking for the solution for last 2h unable to find any solution.

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  asset,
  VrButton,
  Environment,
   } from "react-360";





export default class Hello360 extends React.Component {



  state = {
    name: 'Click me'
  }

  handleClick = () => {
    this.setState({
      name: 'You have clicked me'
    })
  }

  componentDidMount() {
   Environment.clearBackground();
   Environment.setBackgroundImage(asset("360_house.jpg"), { format: "2D" });

 }
  render() {

   return  <View style={styles.panel}>
      <View style={styles.greetingBox}>
        <Text style={styles.greeting}>{this.state.name}</Text>
        <VrButton onClick={this.handleClick} style={styles.button}>
          <Text style={styles.buttonText}>Click</Text>
        </VrButton>
      </View>
    </View>;
 }
  };

const styles = StyleSheet.create({
 panel: {
   // Fill the entire surface
   width: 1000,
   height: 600,
    backgroundColor: 'rgba(255, 255, 255, 0.5)',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
 },
  greetingBox: {
   padding: 20,
   backgroundColor: '#000000',
   borderColor: '#639dda',
   borderWidth: 2,
  },
  greeting: {
    fontSize: 30,
 },
 button: {
   padding: 20,
   backgroundColor: '#000000',
   borderColor: '#639dda',
   borderWidth: 2,
 },
 buttonText: {
    fontSize: 10,
 }
   });

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

score 0 · Answer 1 · answered Apr 12 '19 at 21:31

As you say, you need to increase the size of the surface. Check your client.js file and the relevant surface documentation to work out what you need.

Here is what I implemented in order to be able to use the full 360 degrees as a renderable surface for 2D elements:

  ...
  import {Surface} from 'react-360-web';
  ...

  const myCylinderSurface = new Surface(
    4096, /* width */
    720, /* height */
    Surface.SurfaceShape.Cylinder /* shape */
  );
  myCylinderSurface.setDensity(4096); // set density based on webgl limitations doc advice
  r360.renderToSurface(
    r360.createRoot('myapp'),
    myCylinderSurface
  );

React 360 - Display the text 180 degrees (behind the users initial view)

1 Answers1