React Native viro react VR SkyBox 不工作答案

【问题标题】：React Native viro react VR SkyBox is not workingReact Native viro react VR SkyBox 不工作
【发布时间】：2019-05-11 00:58:17
【问题描述】：

我正在使用 ViroReact 开发一个 VR 应用程序，https://viromedia.com/viroreact。但我在使用 SkyBox (Cubemap) VR 场景时遇到问题。当我使用 Viro360Image 视图时，一切正常。

这是我使用 Viro360Image 视图的 VR 场景

export default class HotelRoomVRScene extends Component {
    constructor() {
        super();
        this.state = {} // Set initial state here
    }

    render() {
      return (
        <ViroScene>
          <Viro360Image source={require('./res/hotel-room.jpg')} />
        </ViroScene>
      )
    }
}


module.exports = HotelRoomVRScene;

上面的场景工作正常。我也可以在 VR 耳机中查看 VR 体验。但是当我将其更改为 Skybox 版本时，如下所示。它停止工作。

export default class HotelRoomVRScene extends Component {
    constructor() {
        super();
        this.state = {} // Set initial state here
    }

    render() {
      return (
        <ViroScene>
          <ViroSkybox source={{nx: require('./res/px.jpg'),
                       px: require('./res/px.jpg'),
                       ny: require('./res/px.jpg'),
                       py: require('./res/px.jpg'),
                       nz: require('./res/px.jpg'),
                       pz: require('./res/px.jpg')}} />
        </ViroScene>
      )
    }
}

module.exports = HotelRoomVRScene;

上面的代码抛出以下错误。

那么为什么 Skybox 版本不起作用？

【问题讨论】：

标签： react-native virtual-reality viro-react viro-media

【解决方案1】：

关于你的渲染方法：

render() {
  return (
    <ViroScene>
      <ViroSkybox source={{nx: require('./res/px.jpg'),
                   px: require('./res/px.jpg'),
                   ny: require('./res/px.jpg'),
                   py: require('./res/px.jpg'),
                   nz: require('./res/px.jpg'),
                   pz: require('./res/px.jpg')}} />
    </ViroScene>
  )
}

你有一个天空盒的错字，它不是

参考：https://docs.viromedia.com/docs/viroskybox1

而且你要导出同一个类两次，一次在：

export default class HotelRoomVRScene extends Component {

另一个在：

module.exports = HotelRoomVRScene;

我建议你删除后一个。

【讨论】：