React 360 - отображать текст на 180 градусов (за начальным видом пользователя)

Question

Я только начал изучать реакцию 360, установив первоначальный проект. Первоначальный проект всегда отображает текст при начальной загрузке перед пользователем. Я пытаюсь переместить текст вправо, используя абсолютную позицию, но после того, как он выходит за пределы начальной поверхности, он больше не виден. Я прочитал документацию, но это не ясно. Что мне нужно сделать? Нужно ли увеличивать ширину поверхности, чтобы она охватывала весь вид (вокруг пользователя), чтобы этот текст был виден? Как мне это сделать? Или есть на самом деле какой-либо другой предпочтительный общий метод. Я ищу решение за последние 2 часа, не может найти решение.

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);

Answer 1

Как вы говорите, вам нужно увеличить размер поверхности. Проверьте своиclient.jsфайл и соответствующую поверхностную документацию, чтобы решить, что вам нужно.

Вот что я реализовал, чтобы иметь возможность использовать все 360 градусов в качестве визуализируемой поверхности для 2D-элементов:

  ...
  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
  );