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);

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

Answer 1

你可以像这样设置更高的相机位置(在客户端.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