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

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

0 голосов
/ 25 августа 2018

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

1 Ответ

0 голосов
/ 13 апреля 2019

Как вы говорите, вам нужно увеличить размер поверхности.Проверьте ваш 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
  );
...