zoukankan      html  css  js  c++  java
  • [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:8081/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')]} 
    />
  • 相关阅读:
    《课后习题》
    《课后习题---求两点之间的距离》
    《day06---面向对象入门》
    《java作业》
    《选择排序》
    《冒泡排序》
    《java版进制转换》
    《c语言全局变量的用法》
    《递归问题_2》
    C#把动态创建的多个控件中指定控件显示在最上层
  • 原文地址:https://www.cnblogs.com/Answer1215/p/8424951.html
Copyright © 2011-2022 走看看