React-360 положение камеры в поле зрения - PullRequest
Новая
       8

React-360 положение камеры в поле зрения

0 голосов
/ 07 мая 2018

Я хочу, чтобы мой обзор камеры был выше по сравнению с визуализированным видом. Но я не знаю, где я мог бы установить начальную позицию камеры при рендеринге вида.

Мой компонент монтируется так: 

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 к элементу styles, но это не работает. Как я могу изменить положение камеры относительно установленного компонента Hello360 в этом примере?

1 Ответ

0 голосов
/ 08 мая 2018

Вы можете установить более высокое положение камеры (например, внутри init в client.js): 

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

...