[ReactVR] Start a Virtual Reality Project Using the React VR CLI

We will learn how to set up a React VR project, run the development mode with hot reloading, and take a small dive into the generated code and make a small change.

Install:

npm -g i react-vr-cli

Create app:

react-vr init app

Enable hotreload:

localhost:/vr/?hotreload

import React from 'react';

import {

  AppRegistry,

  asset,

  Pano,

  Text,

  View,

} from 'react-vr';

export default class app extends React.Component {

  render() {

    return (

      <View>

        <Pano

          style={{

            transform: [{rotateY: "10deg"}]

          }}

          onLoad={() => {console.log('Image is loaded successfully')}}

          onLoadEnd={() => {console.log('Load end')}}

          source={asset('mittel.jpg')}

          />

        <Text

          style={{

            backgroundColor: '#777879',

            fontSize: 0.8,

            fontWeight: '400',

            layoutOrigin: [0.5, 0.5],

            paddingLeft: 0.2,

            paddingRight: 0.2,

            textAlign: 'center',

            textAlignVertical: 'center',

            transform: [{translate: [0, 0, -3]}],

          }}>

          hello world

        </Text>

      </View>

    );

  }

};

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

'source' can also take array of assets:

<Pano

    source={[asset('right.png'), asset('left.png'), asset('up.png'), asset('down.png'), asset('back.png'), asset('front.png')]}

/>

巴特西

[ReactVR] Start a Virtual Reality Project Using the React VR CLI

最新文章

热门文章