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

Я только начал изучать реакцию 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);

react-360
person Community    schedule 25.08.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

Вот что я реализовал, чтобы иметь возможность использовать полные 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
  );
person emik    schedule 12.04.2019