reactVR

Ci This article introduces the introduction of react360 panoramic view construction,

1. Install Node locally. React 360 runs in a browser, and the package code depends on Node.

Official introduction:

Mac: Homebrew is recommended for installing NDOE on Mac

Windows: Use nodejs.org to download and install

Linux: It is recommended to use the nodejs.org package Manager page to find the node for your Linux version

2, reactVR project cli Open terminal and enter command line NPM install react-vr-cli

This step generates an initialized file called package.json

3. Run the NPX react-vr-cli init react360 command

This step generates project files with various configuration dependencies, and React-360 names the project. It looks something like this;

4, then CD react360 go into the project folder and run NPM start to get the basic reactVR view

This is, of course, the one I optimized, and the additional operations are explained below. Add a few buttons for page switching

5, first create a Components folder

Create three js folders inside button.js buttonlist.js canvas.js

The code above: first is index.vr.js, and delete the default module pano to define your own Canvas module

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> ); }};Copy the code

Introduce react and Component modules, introduce asset and pano (this is for loading 360) and export the whole module

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 CanvasCopy the code

The button.js module creates a button.js animate property to ease the animation plugin 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. The 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 } ], <VrButton onClick = {() => {this.props. OnClick ()}} onEnter = {this.animatein} onExit = {this.animateout} > < span style={{width:0.3, height:0.3}}source={asset(this.props.src)}>
            </Image>
        </VrButton>
      </Animated.View>
    )
  }
}

export default ButtonCopy the code

Finally, the introduction of buttonList. js, the introduction of button component, the introduction of the required panorama picture and button picture loading button component

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', the transform: [{12} rotateX: -, {translate: [1.5, 0, 3]}], width: > {3}}. This state. The buttons. The map (v = > {return (<Button src={v.buttonSrc} key={v.key} onClick={()=> {
                this.props.onClick(v.imageSrc)
              }}></Button>)
            })
          }
      </View>
    )
  }
}

export default ButtonList 
Copy the code

In conclusion,

React constructor r must call super first otherwise the value will not be passed.

The development of the framework is to liberate the labor force, with a long time must be tested more practical,

Come on ~ ~ ~