React Native viro react VR SkyBox无法正常工作

时间:2019-05-11 00:58:18

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

我正在使用ViroReact https://viromedia.com/viroreact开发一个VR应用程序。但是我在使用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;

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

enter image description here

那么为什么不能使用Skybox版本?如何解决?

1 个答案:

答案 0 :(得分: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;

我建议您删除后者。