React 360 全景VR交互項目實戰

react 360 項目實戰

這章節呢，我們從一個項目案例實戰，來進一步學習react 360框架的使用。
項目的內容呢，我們需要使用React VR開發一個360度球形的圖像可旋轉查看器。項目中呢，我們將採用幾張全景圖片和幾張對應的小的thunmb按鈕圖片，最終把按鈕放置在360度的立體空間內，製作點擊交互；點擊這些按鈕圖片後，全景的360畫廊直接進行切換；

當然，有一些開發的注意事項，由於呢，VR立體WEB空間技術，是屬於比較新穎的技術。所以我們的瀏覽器最好使用比較新的瀏覽器，例如chrome，firefox等，而且呢，這裏呢，要求我們大家最好把瀏覽器升級到最新的版本；

項目開發

接下來呢，我們就進入開發階段，在上一章節中，我們已經在本地使用了react-vr-cli這款腳手架工具，搭建好了我們的react 360開發環境。好，我們再來回顧下，搭建的流程，如下所示：

npm install -S react-vr-cli
npx react-vr-cli init newapp
cd newapp
npm start

使用npm start命令之後呢，我們就需要在瀏覽器的地址欄輸入http://localhost:8081/vr/, 以第一次使用npm start命令，命令行就會自動構建Bundling vr\client.js、index.vr.js客戶端文件，提供客戶端顯示的模塊支持。
如果大家看到了這樣一個，一個黑色和白色方格相見的的房間，然後呢有三階樓梯，柱子和還有Hello的文本，就說明我們的服務，啓動成功，而且瀏覽器可以直接兼容的。

我們現在來分析下新生成的項目目錄結構：

C:.
|   .babelrc
|   .flowconfig
|   .gitignore
|   .watchmanconfig
|   index.vr.js
|   package.json
|   rn-cli.config.js
|
+---static_assets
|       chess-world.jpg
|
+---vr
|       client.js
|       index.html
|
\---__tests__
        index-test.js

從構建生成的的目錄我們可以分析出，react VR CLI運行所提供支持的最重要的文件和文件夾是：

• index.vr.js : 這是應用程序的訪問入口。這個文件包含者我們在瀏覽器所看到場景的源代碼，因爲我們第一次啓動的使用構建的也是這個文件
• static_assets : 這個文件夾呢，應包含我們vr應用程序中使用的所有靜態資源。我們會把我們項目開發所需要使用的全景圖片和按鈕圖片放置在這個static_assets文件夾中

接下來，我們需要分析一下最終案例效果的項目組件組成部分 >

通過上面的最終案例分析，我們來劃分一下我們的組件層級結構：

• Canvas組件，這個canvas組件呢，它就是我們全屏360 VR圖像的畫布展示的內容
• Button組件，每一個按鈕圖標
• ButtonList UI組件，這幾個按鈕圖標組成的列表

這3個組件呢，對應着3個不同的js文件，所以呢，我們需要創建一個components文件夾，來存放我這這些組件文件。當然呢，大家也可以使用其他命名方式，不用採用components命名也是沒問題的，按照大家的喜好即可。

當然，在開發我們的組件之前呢，我們需要做一件事情，一件什麼樣子的事情呢？我們需要去到index.vr.js這個文件中，把項目啓動展示的默認案例的代碼給移除掉，好，我們可以編輯index.vr.js文件如下：

import React, {Component} from 'react';
import {
  AppRegistry,
  View,
} from 'react-vr';

export default class newapp extends Component {
  render() {
    return (
      <View>
        //...
      </View>
    );
  }
};

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

360 VR場景Canvas組件

接下來，我們進入組件開發階段，首先我們需要創建場景組件components/Canvas.js，編輯如下：

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.state.src)}/>
    );
  }
};
export default Canvas;

這裏呢，我們需要在我們的項目目錄中，引入我們的靜態全景資源圖片文件，當然也包括我們的靜態按鈕圖標圖片；

編輯 index.vr.js

接下來，我們繼續修改index.vr.js這個文件，將我們的場景Canvas組件，渲染到我們的展示頁面中，我們在index.vr.js文件中定義好要傳遞到Canvas場景組件中靜態全景圖片文件資源路徑，然後通過props中的src參數傳遞進去

import React, {Component} from 'react';
import {
  AppRegistry,
  View,
} from 'react-vr';
// 引入Canavs組件
import Canvas from './components/Canvas';

export default class newapp extends Component {
 
 // add new +
 constructor() {
    super();
    this.state = {
      src: 'reactconf_00.jpg',
    };
  }

  render() {
    return (
      <View>
        <Canvas src={this.state.src} />
      </View>
    );
  }

};

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

創建按鈕列表組件

接下來，我們需要做的就是創建4個按鈕，用戶可以點擊觸發這些按鈕來修改可旋轉交互的全景vr圖像。因此呢，我們需要添加兩個新組件：Button組件,ButtonList組件，我們先從Button組件開始創建，components/Button.js編輯內容如下：

import React,{Component} from 'react';
import {
  asset,
  Image,
  View,
  VrButton,
} from 'react-vr';
class Button extends Component {
  onButtonClick = () => {
    this.props.onClick();
  }
  render () {
    return (
      <View
        style={{
          alignItems: 'center',
          flexDirection: 'row',
          margin: 0.0125,
          width: 0.7,
        }}
      >
        <VrButton
          onClick={this.onButtonClick}
        >
          <Image
            style={{
              width: 0.7,
              height: 0.7,
            }}
            source={asset(this.props.src)}
          >
          </Image>
        </VrButton>
      </View>
    );
  }
};
export default Button;

接下來，我們需要創建一個ButtonList組件，components/ButtonList.js編輯如下：

import React from 'react';
import {
  View,
} from 'react-vr';
import Button from './Button';
class UI extends React.Component {
  constructor(props) {
    super(props);
    this.buttons = this.props.buttonConfig;
  }
  render () {
    const buttons = this.buttons.map((button) =>
      <Button
        key={button.key}
        onClick={()=>{
          this.props.onClick(button.key);
        }}
        src={button.buttonImageSrc}
      />
      );
    return (
      <View
        style={{
          flexDirection: 'row',
          flexWrap: 'wrap',
          transform: [
            {rotateX: -12},
            {translate: [-1.5, 0, -3]},
          ],
          width: 3,
        }}
      >
        {buttons}
      </View>
    );
  }
};
export default UI;

這個ButtonList組件，是需要父級組件傳遞進入我們的按鈕列表配置信息的，所以呢，我們需要在index.vr.js中，配置一下我們所有按鈕的配置信息，編輯如下：

const Config = [
  {
    key: 0,
    imageSrc: 'reactconf_00.jpg',
    buttonImageSrc: 'button-00.png',
  },
  {
    key: 1,
    imageSrc: 'reactconf_01.jpg',
    buttonImageSrc: 'button-01.png',
  },
  {
    key: 2,
    imageSrc: 'reactconf_02.jpg',
    buttonImageSrc: 'button-02.png',
  },
  {
    key: 3,
    imageSrc: 'reactconf_03.jpg',
    buttonImageSrc: 'button-03.png',
  }
];

接下來，我們就需要爲我們的按鈕列表，添加一些動態可交互的鼠標效果，我們在components/Button.js中編輯如下：

import React from 'react';
import {
  Animated,
  asset,
  Image,
  View,
  VrButton,
} from 'react-vr';
const Easing = require('Easing');
class Button extends React.Component {
  constructor(props) {
    super();
    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();
  }
  onButtonClick = () => {
    this.props.onClick();
  }
  render () {
    return (
      <Animated.View
        style={{
          alignItems: 'center',
          flexDirection: 'row',
          margin: 0.0125,
          transform: [
            {translateZ: this.state.animatedTranslation},
          ],
          width: 0.7,
        }}
      >
        <VrButton
          onClick={this.onButtonClick}
          onEnter={this.animateIn}
          onExit={this.animateOut}
        >
          <Image
            style={{
              width: 0.7,
              height: 0.7,
            }}
            source={asset(this.props.src)}
          >
          </Image>
        </VrButton>
      </Animated.View>
    );
  }
};
export default Button;

到這裏呢，我們的整個項目基本已經構建完成了，接下來，我們就需要打包好我們的項目，因爲，一般情況下開發完成，我們是需要上傳服務器的，所以，我們需要打包好靜態文件，如何打包呢，我們可以使用如下命令打包：

├─ static_assets/
│
├─ index.html
├─ index.bundle.js
└─ client.bundle.js