reactVR

1,191 阅读2分钟

ci此文章为介绍react360全景视图搭建的介绍, 

1,首先本地需要安装node 毕竟react 360是运行在浏览器上的,打包代码是要依赖node的. 

    官方介绍:

   Mac: mac上推荐使用homebrew来安装ndoe


   Windows: 推荐使用nodejs.org下载安装

   Linux: 推荐使用nodejs.org package manager页面,找到对应你的linux版本的node

2,reactvr项目 cli 打开终端  输入命令行npm install react-vr-cli

     这一步会生成一个初始化的文件 package.json


3,输入命令 npx react-vr-cli init react360 

   这一步生成项目文件与各种配置依赖,react-360为项目起的名字。结构大概是这个样子;

4,然后cd react360 进入项目文件夹  运行npm start启动 就可以看到基础的reactVR视图了


  当然这个是我优化过的, 下面解释附加的操作。添加的几个按钮页面切换


5,首先建立一个components文件夹,

     文件夹里面建立Button.js  ButtonList.js  Canvas.js 三     个js文件夹 

      上代码:首先是index.vr.js, 把默认的模块pano删除掉定义自己的canvas模块

export default class react360 extends React.Component {

  constructor(){
    super()
    this.state = {
      src: "reactconf_00.jpg"
    }
  }
  render() {
    return (
      <View>
        <Canvas src={this.state.src} />
        <ButtonList onClick={(src) => {
          this.setState({
            src:src
          })
        }}></ButtonList>
      </View>
    );
  }
};

 引入react与component模块, 引入asset与pano(这个是加载360用的) 最后把整个模块      export出去

import React,{Component} from 'react'
import { asset,Pano} from 'react-vr'

class Canvas extends Component {
  constructor(props) {
    super(props)
    this.state = {
      src: this.props.src
    }
  }

  render () {
    return(
      <Pano source={asset(this.props.src)} />
    )
  }
}


export default Canvas

 button.js模块建立button.js  animate为划过动画属性 easing为动画插件 npm直接安装

import React, { Component } from 'react'
import { Animated, asset, Image, View, VrButton } from 'react-vr'
const Easing = require('Easing')

class Button extends Component {
  constructor(props) {
    super(props)
    this.state = {
      animatedTranslation: new Animated.Value(0)
    }
  }

  animateIn = () => {
    Animated.timing(
      this.state.animatedTranslation,
      {
        toValue:0.125,
        duration:100,
        easing:Easing.in
      }
    ).start()
  }

  animateOut = () => {
    Animated.timing(
      this.state.animatedTranslation,
      {
        toValue:0,
        duration:100,
        easing:Easing.In
      }
    ).start()
  }

  render(){
    return(
      <Animated.View
          style={{
            alignItems:'center',
            flexDirection:'row',
            margin:0.0125,
            transform:[
              {
                translateZ: this.state.animatedTranslation
              }
            ],
            width:0.7
          }}
      >
        <VrButton
          onClick = {() => {this.props.onClick() }}
          onEnter = {this.animateIn}
          onExit = {this.animateOut}
        >
            <Image
                style={{
                  width:0.3,
                  height:0.3
                }}
                source={asset(this.props.src)}>
            </Image>
        </VrButton>
      </Animated.View>
    )
  }
}

export default Button

最后是buttonlist.js 引入  引入button组件引入 需要的全景图片与button图片 加载button组件

import React,{ Component } from 'react'
import {View} from 'react-vr'
import Button from './Button'

class ButtonList extends Component {
  constructor(props) {
    super()
    this.state = {
      buttons:[
        {
          key:0,imageSrc:'reactconf_00.jpg',buttonSrc:'button-00.png'
        },
        {
          key:1,imageSrc:'reactconf_01.jpg',buttonSrc:'button-01.png'
        },
        {
          key:2,imageSrc:'reactconf_02.jpg',buttonSrc:'button-02.png'
        },
        {
          key:3,imageSrc:'reactconf_03.jpg',buttonSrc:'button-03.png'
        }
      ]
    }
  }

  render(){
    return(
      <View
        style={{
          flexDirection:'row',
          flexWrap:'wrap',
          transform:[
            { rotateX:-12},
            { translate: [-1.5,0,-3]}
          ],
          width:3
        }}
      >
          {
            this.state.buttons.map(v => {
              return (<Button src={v.buttonSrc} key={v.key} onClick={()=> {
                this.props.onClick(v.imageSrc)
              }}></Button>)
            })
          }
      </View>
    )
  }
}

export default ButtonList 



最后总结,

react  constructor   r一定要先调用super 不然值是传递不过来的, 

框架的发展都是为解放劳动力 的, 用久了肯定是经过检验的更实用,

加油~~~