视图中的 React-360 相机位置

Question

与渲染视图相比，我想将相机视图设置得更高。但是我不知道在渲染视图时在哪里可以设置初始相机位置。

我的组件是这样挂载的：

import {ReactInstance} from 'react-360-web';

function init(bundle, parent, options = {}) {
  const r360 = new ReactInstance(bundle, parent, {
    // Add custom options here
    fullScreen: true,
    ...options,
  });

  // Render your app content to the default cylinder surface
  r360.renderToSurface(
    r360.createRoot('Hello360', { /* initial props */ }),
    r360.getDefaultSurface()
  );
}

window.React360 = {init};

组件如下所示：

export default class Hello360 extends React.Component {
  // Our component will keep track of this state
  state = {
    count: 0,
  };
  render() {
    return (
      <View style={styles.panel}>
        <View style={styles.greetingBox}>
          <Text style={styles.greeting}>
            Hello React
          </Text>
          <Text style={styles.greeting}>
            {`Count: ${this.state.count}`}
          </Text>
        </View>
      </View>
    );
  }
};

const styles = StyleSheet.create({
  panel: {
    // Fill the entire surface
    width: 1000,
    height: 600,
    backgroundColor: 'rgba(255, 255, 255, 0.4)',
    alignItems: 'center',
    justifyContent: 'center'
  }
});

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

我尝试将 transform 属性添加到样式元素，但这不起作用。在此示例中，如何更改相机相对于已安装的 Hello360 组件的位置？

Answer 1

您可以像这样将相机位置设置得更高（在 client.js 中的 init 内）：

r360._cameraPosition = [0, 3, 0]; //[x, y, z], default ist [0, 0, 0]

https://github.com/facebook/react-360/blob/master/React360/js/ReactInstance.js

视图中的 React-360 相机位置

React-360 camera position in view

javascript

css

reactjs

react-native

react-360