Question

我刚刚开始通过安装初始项目来探索React 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文件和relevant surface documentation来确定所需的内容。

这是我实现的，以便能够将整个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
  );

React 360-显示文字180度（在用户初始视图后）

1 个答案: