React VR 快速入門完全教程

andot 發(fā)布于2019-08-20 17:16 / 2022人閱讀

摘要：快速入門什么是是一個(gè)開放源代碼的庫(kù)，為呈現(xiàn)的數(shù)據(jù)提供了視圖渲染。最后，項(xiàng)目根組件應(yīng)該通過來進(jìn)行注冊(cè)，以便能夠進(jìn)行打包和正常運(yùn)行?；舅枷胧卿秩疽粋€(gè)立方體，并將觀眾置于中心，隨后移動(dòng)。表示從指定方向平均照亮所有物體的光源。

React VR 快速入門 什么是React

React是一個(gè)開放源代碼的JavaScript庫(kù)，為HTML呈現(xiàn)的數(shù)據(jù)提供了視圖渲染。React視圖通常使用指定的像HTML標(biāo)簽一樣的組件來進(jìn)行UI渲染。它目前是最流行的JavaScript庫(kù)之一，它擁有強(qiáng)大的基礎(chǔ)和龐大的社區(qū)。

創(chuàng)建一個(gè)React App

$ npm install -g create-react-app
$ create-react-app my-app

$ cd my-app
$ npm start

效果圖

什么是React Native？

React Native是僅使用Javascript的移動(dòng)應(yīng)用構(gòu)建框架。它使用與React相同的設(shè)計(jì)，包含豐富的UI庫(kù)和組件聲明。

它使用與常規(guī)iOS和Android應(yīng)用程序相同的基本UI構(gòu)建塊。

使用React-Native最贊的地方是還可以通過原生的Objective-C, Java, 或者Swift來構(gòu)建組件。

React VS React Native：

React Native bridge：

創(chuàng)建一個(gè)React Native App

環(huán)境安裝

查看官網(wǎng)http://facebook.github.io/react-native/docs/getting-started.html

創(chuàng)建項(xiàng)目

$ react-native init my-rn-app

運(yùn)行項(xiàng)目

To run your app on iOS:
   cd /Users/liyuechun/Pictures/my_rn_app
   react-native run-ios
   - or -
   Open ios/my_rn_app.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   cd /Users/liyuechun/Pictures/my_rn_app
   Have an Android emulator running (quickest way to get started), or a device connected
   react-native run-android

效果圖

iOS	Android

聯(lián)系我

開始使用React VR

React VR旨在允許Web開發(fā)人員使用React的聲明方法(特別是React Native)來創(chuàng)作虛擬現(xiàn)實(shí)（VR）應(yīng)用程序。

React VR使用Three.js 來支持較低級(jí)別的WebVR 和 WebGL API. WebVR是用于訪問Web上VR設(shè)備的API。 WebGL（Web圖形庫(kù)）是一種無(wú)需使用插件即可用于在任何兼容的Web瀏覽器中渲染3D圖形的API。

React VR類似于React Native，因?yàn)樗褂?b>View，Image和Text作為核心組件，并且支持Flexbox布局。此外，React VR還將Pano，Mesh和PointLight等VR組件添加相關(guān)庫(kù)中。

在本篇文章中，我將帶領(lǐng)大家創(chuàng)建一個(gè)簡(jiǎn)單的VR應(yīng)用程序來學(xué)習(xí)如何創(chuàng)建一個(gè)全景圖片，3D對(duì)象模型，按鈕和flexbox布局的使用場(chǎng)景。我們的模擬應(yīng)用程序基于React VR的兩個(gè)網(wǎng)格和布局的官方示例。

該應(yīng)用程序?qū)秩疽粋€(gè)能夠放大和縮小的地球和月球的3D模型，效果圖如下所示：

這些模型中，它們的尺度和旋轉(zhuǎn)不是地球-月球系統(tǒng)的真實(shí)復(fù)制品。這種關(guān)系只是為了展示React VR的工作原理。與此同時(shí)，我們將解釋一些關(guān)鍵的3D建模概念。一旦掌握了ReactVR，就可以隨意創(chuàng)造更多的作品。

你能夠從 GitHub找到最后的項(xiàng)目源代碼。

要求

到目前為止，虛擬現(xiàn)實(shí)是一項(xiàng)相當(dāng)新的技術(shù)，開發(fā)或測(cè)試我們的VR應(yīng)用程序的方法很少。

WebVR 和 Is WebVR Ready? 可以幫助您了解哪些瀏覽器和設(shè)備支持最新的VR規(guī)范。

但是你也不必過于擔(dān)心， 你現(xiàn)在不需要任何特殊的設(shè)備，例如： Oculus Rift, HTC Vive, 或者 Samsung Gear VR 來測(cè)試一個(gè)WebVR APP。

下面是你現(xiàn)在 所需要 準(zhǔn)備的：

一臺(tái)Windows／Mac電腦。

Google瀏覽器。

最新版本的Node.js

如果您也有Android設(shè)備和Gear VR耳機(jī)，您可以安裝Carmel Developer Preview瀏覽器來探索您的React VR 應(yīng)用程序。

創(chuàng)建項(xiàng)目

首先，我們需要使用NPM來安裝React VR CLI工具：

$ npm install -g react-vr-cli

使用React VR CLI來創(chuàng)建一個(gè)名字叫做EarthMoonVR的新項(xiàng)目：

$ react-vr init EarthMoonVR

在創(chuàng)建過程中您需要等一會(huì)兒，這將創(chuàng)建一個(gè)EarthMoonVR目錄，目錄里面就是相關(guān)項(xiàng)目文件，如果希望創(chuàng)建速度快一些，您可以安裝 Yarn 來提高速度。

一旦項(xiàng)目創(chuàng)建完畢，可以通過cd切換到EarthMoonVR文件路徑下面：

$ cd EarthMoonVR

在終端通過npm start來啟動(dòng)程序以便查看效果：

$ npm start

在瀏覽器中輸入http://localhost:8081/vr。稍微等一會(huì)兒，即可查看到VR效果：

React VR

下面是初始化的React VR新項(xiàng)目的項(xiàng)目結(jié)構(gòu):

+-__tests__
+-node_modules
+-static_assets
+-vr
-.babelrc
-.flowconfig
-.gitignore
-.watchmanconfig
-index.vr.js
-package.json
-rn-cli-config.js
-yarn.lock

我將index.vr.js文件呈現(xiàn)高亮狀態(tài)，它包含了您應(yīng)用程序的源碼，static_assets目錄包含像圖片和3D模型的外部資源文件。

你可以從這里了解更多項(xiàng)目結(jié)構(gòu)。

index.vr.js 文件的內(nèi)容如下:

import React from "react";
import {
  AppRegistry,
  asset,
  StyleSheet,
  Pano,
  Text,
  View,
} from "react-vr";

class EarthMoonVR extends React.Component {
  render() {
    return (
      
        
        
          hello
        
      
    );
  }
};

AppRegistry.registerComponent("EarthMoonVR", () => EarthMoonVR);

我們可以看到React VR使用了ES2015 和 JSX。

這個(gè)代碼通過React Native packager進(jìn)行預(yù)編譯，它提供了(ES2015, JSX)編譯和其他資源加載。

在render函數(shù)中，return了一個(gè)頂級(jí)標(biāo)簽，里面包含：

View 組件, 它是可以包含其他所有組件的容器組件。

Pano 組件, 用于將(chess-world.jpg)渲染一張360度的圖片。

Text 組件, 用于渲染字體的3D空間。

注意，Text組件通過一個(gè)內(nèi)聯(lián)的樣式對(duì)象來設(shè)置樣式。在React VR中的每一個(gè)組件都有一個(gè)style屬性來控制控制它的外觀和布局。

除了添加Pano或VrButton等特殊組件之外，React VR還使用了與React和React Native相同的概念，例如組件，屬性，狀態(tài)，生命周期，事件和彈性布局。

最后，項(xiàng)目根組件應(yīng)該通過AppRegistry.registerComponent來進(jìn)行注冊(cè)，以便App能夠進(jìn)行打包和正常運(yùn)行。

現(xiàn)在我們知道代碼是做什么用的，接下來我們將全景圖片拖拽到項(xiàng)目中。

全景圖像

通常，我們的VR應(yīng)用程序中的空間由全景（pano）圖像組成，它創(chuàng)建了一個(gè)1000米的球體（在React VR距離中，尺寸單位為米），并將用戶置于其中心。

一張全景圖像允許你從上面，下面，后面以及你的前面去觀察它，這就是他們也被稱為360的圖像或球面全景的原因。

360全景圖有兩種主要格式：平面全景圖和立方體。 React VR支持兩者。

平面全景圖

平面全景圖由寬高比為2:1的單個(gè)圖像組成，意味著寬度必須是高度的兩倍。

這些照片是通過360度照相機(jī)創(chuàng)建的。一個(gè)很好的平面圖像來源是Flickr，你打開這個(gè)網(wǎng)站嘗試搜索equirectangular關(guān)鍵字，例如：我通過equirectangular關(guān)鍵字嘗試搜索就找到這張圖片:

看起來很奇怪，不是嗎？

無(wú)論如何，下載最高可用分辨率的照片，將其拖拽到項(xiàng)目中static_assets的路徑下面，并且修改render函數(shù)中的代碼，如下所示：

render() {
    return (
      
        
      
    );
  }

Pano組件的source屬性接收一個(gè)當(dāng)前圖片位置的uri屬性值。這里我們使用了asset函數(shù)，將sample_pano.jpg作為參數(shù)，這個(gè)函數(shù)將會(huì)返回static_assets 路徑下的圖片的正確的uri。換句話說，上面的方法等價(jià)于下面的方法：

render() {
  return (
    
      
    
  );
}

假設(shè)本地服務(wù)器一直在運(yùn)行，當(dāng)我們?cè)跒g覽器中刷新頁(yè)面時(shí)，我們將看到如下效果：

順便說一下，如果我們想避免在每次更改時(shí)都需要重新刷新頁(yè)面，我們可以通過在URL(http://localhost:8081/vr/?hot... 中添加 ?hotreload 來啟用 熱刷新。

立方體全景圖

立方體全景圖是360度全景圖的其他格式。這種格式使用六個(gè)圖像作為一個(gè)多維數(shù)組集的六個(gè)面，它將填充我們周圍的球體。它也被稱為天空盒。

基本思想是渲染一個(gè)立方體，并將觀眾置于中心，隨后移動(dòng)。

例如，下面的這張大圖中，每一個(gè)方位的小圖代表立方體的一面：

為了能夠在React VR中使用立方體全景圖，Pano組件的source屬性的uri值必須指定為一個(gè)數(shù)組，數(shù)組中的每一張圖片分別代表[+x, -x, +y, -y, +z, -z]，如下所示：

render() {
  return (
    
      
    
  );
}

在2D布局中，X軸越向右x值越大，Y軸越向下值越大，(0,0)坐標(biāo)為最左上角，右下角代表元素的寬和高(width, height)。

然而，在3D空間中，React VR使用了同OpenGL使用的右手坐標(biāo)系統(tǒng)，正X指向右邊，正Y指向上邊，正Z指向用戶的方向。因?yàn)橛脩舻哪J(rèn)視圖從原點(diǎn)開始，這意味著它們將從負(fù)Z方向開始：

你可以從React VR coordinate system here了解更多React VR坐標(biāo)系統(tǒng).

這樣，我們的立方體（或天空盒）將如下所示：

Skybox在Unity中使用了很多，所以有很多地方可以找到他們并進(jìn)行下載。例如，我從這個(gè)頁(yè)面下載了撒哈拉沙漠。我將圖片拖拽到項(xiàng)目中，并修改代碼如下所示：

render() {
  return (
    
      
    
  );
}

效果如下所示：

你能注意到頂部和底部的圖像不協(xié)調(diào)嗎？我們可以通過將頂部圖像順時(shí)針旋轉(zhuǎn)90度，底部逆時(shí)針旋轉(zhuǎn)90度來校正它們：

現(xiàn)在讓我們?yōu)槲覀兊膽?yīng)用創(chuàng)建一個(gè)空間天空盒。

最好的程序是Spacescape，它一個(gè)免費(fèi)的工具，可在Windows和Mac上創(chuàng)建空間天空盒（包括星星和星云）。

創(chuàng)建一個(gè)sampleSpace.xml文件，將下面的代碼拷貝到sampleSpace.xml文件中:



    
        one
        0 0 0 1
        1
        1
        false
        0.5
        2
        fbm
        1
        1
        1
        1
        1
        0
        Fuzzy Blue Stars
        1 1 1 1
        3000
        3
        4
        one
        points
    
    
        one
        0.03
        1.5
        1
        1
        1 1 1 1
        2
        Fuzzy White Star Overlay
        ridged
        8
        0.94
        0 0 0 1
        1
        1024
        10
        4
        0.81
        one
        noise

并且通過Spacescape軟件打開sampleSpace.xml文件，效果圖如下所示:

我們可以導(dǎo)出天空盒的六張圖像：

如果我們修改代碼如下所示：

將得到如下結(jié)果：

現(xiàn)在讓我們來討論討論3D模型。

聯(lián)系我

3D 模型

React VR 有一個(gè) Model 組件，它支持Wavefront .obj file format 來代表3D建模。

mesh是定義3D對(duì)象形狀的頂點(diǎn)、邊和面的集合。

.obj文件是一個(gè)純文本文件，其中包含幾何頂點(diǎn)，紋理坐標(biāo)，頂點(diǎn)法線和多邊形面元素的坐標(biāo)。

通常，.obj文件引用一個(gè)外部.mtl file文件，其中存儲(chǔ)了描述多邊形視覺方面的材質(zhì)（或紋理）。

您可以使用Blender, 3DS Max,和Maya等程序創(chuàng)建3D模型并將其導(dǎo)出為這些格式。

還有很多網(wǎng)站可以免費(fèi)下載或免費(fèi)下載3D模型。以下是其中三個(gè)很不錯(cuò)的：

TF3DM

TurboSquid

CGTrader

對(duì)于我們的應(yīng)用程序，我們將使用這個(gè)3D地球模型和這個(gè)來自TF3DM的3D月球模型。

當(dāng)我們將地球模型的文件提取到我們應(yīng)用程序的static_assets目錄時(shí)，我們可以看到有一堆圖像（紋理）以及.obj和.mtl文件。如果我們?cè)谖谋揪庉嬈髦写蜷_后者，我們將看到如下所示定義：

# 3ds Max Wavefront OBJ Exporter v0.97b - (c)2007 guruware
# File Created: 25.01.2016 02:22:51

newmtl 01___Default
    Ns 10.0000
    Ni 1.5000
    d 1.0000
    Tr 0.0000
    Tf 1.0000 1.0000 1.0000 
    illum 2
    Ka 0.0000 0.0000 0.0000
    Kd 0.0000 0.0000 0.0000
    Ks 0.0000 0.0000 0.0000
    Ke 0.0000 0.0000 0.0000
    map_Ka 4096_earth.jpg
    map_Kd 4096_earth.jpg
    map_Ke 4096_night_lights.jpg
    map_bump 4096_bump.jpg
    bump 4096_bump.jpg

newmtl 02___Default
    Ns 10.0000
    Ni 1.5000
    d 1.0000
    Tr 0.0000
    Tf 1.0000 1.0000 1.0000 
    illum 2
    Ka 0.5882 0.5882 0.5882
    Kd 0.5882 0.5882 0.5882
    Ks 0.0000 0.0000 0.0000
    Ke 0.0000 0.0000 0.0000
    map_Ka 4096_earth.jpg
    map_Kd 4096_earth.jpg
    map_d 4096_earth.jpg

現(xiàn)在我們將添加Model組件，如下面的代碼所示：

lit屬性指定網(wǎng)格中使用的材料應(yīng)使用Phong shading處理燈。

同時(shí)，也不要忘了從react-vr中導(dǎo)入Model組件：

import {
  ...
  Model,
} from "react-vr";

但是，如果我們只將該組件添加到我們的應(yīng)用程序中，則不會(huì)顯示任何內(nèi)容。我們首先需要添加一個(gè)光源。

React VR 有四種光源類型：

AmbientLight表示全方位，固定強(qiáng)度和固定顏色的光源，可以均勻地影響場(chǎng)景中的所有對(duì)象。

DirectionalLight表示從指定方向平均照亮所有物體的光源。

PointLight 代表光的起源來源于一個(gè)點(diǎn)，并向各個(gè)方向傳播。

SpotLight 代表光的起源來源于一個(gè)點(diǎn)，并以錐形向外擴(kuò)散。

您可以嘗試所有類型的燈光，看看哪一個(gè)可以為您帶來最佳效果。在這種情況下，我們將使用強(qiáng)度值為2.6的AmbientLight：

import React from "react";
import {
  AppRegistry,
  asset,
  StyleSheet,
  Pano,
  Text,
  View,
  Model,
  AmbientLight,
} from "react-vr";

class EarthMoonVR extends React.Component {
  render() {
    return (
      
        ...

        
        
        
      
    );
  }
};

AppRegistry.registerComponent("EarthMoonVR", () => EarthMoonVR);

接下來，我們需要給我們的模型一些用于放置、大小、和旋轉(zhuǎn)的樣式屬性。通過嘗試不同的值，我想出了以下配置：

class EarthMoonVR extends React.Component {
  render() {
    return (
      
        ...

        
      
    );
  }
};

AppRegistry.registerComponent("EarthMoonVR", () => EarthMoonVR);

Transforms被表示為一個(gè)樣式對(duì)象中的對(duì)象數(shù)組，請(qǐng)記住它們最后被應(yīng)用的單位是米。

translate將您的模型的位置轉(zhuǎn)換為x，y，z空間，scale給您的模型一個(gè)大小，并根據(jù)提供的度數(shù)繞軸旋轉(zhuǎn)。

這是效果圖：

這個(gè)地球模型可以應(yīng)用多個(gè)紋理。默認(rèn)情況下它帶 clouds 紋理，但是我們可以通過用4096_earth.jpg替換最后三行中的4096_clouds.jpg來更改.mtl文件中的內(nèi)容：

# 3ds Max Wavefront OBJ Exporter v0.97b - (c)2007 guruware
# File Created: 25.01.2016 02:22:51

newmtl 01___Default
    ...

newmtl 02___Default
    ...
    map_Ka 4096_earth.jpg
    map_Kd 4096_earth.jpg
    map_d 4096_earth.jpg

效果圖如下：

順便說一下，如果您的模型不帶有.mtl文件，React VR允許您通過下面的代碼指定紋理：

我們對(duì)月球模型做同樣的操作，將紋理的路徑修復(fù)到.mtl文件中，并嘗試使用不同的比例和放置值。您不需要添加另一個(gè)光源，AmbientLight將適用于兩種模型。

這是我想出的月球模型的代碼：

render() {
    return (
      

        ...

        
      
    );
  }

效果圖：

如果你想在WebVR上下文中了解更多關(guān)于360度全景圖的信息，你可以查看the developer documentation at Oculus這篇文章。

現(xiàn)在，我們一起來為模型添加動(dòng)畫。

模型動(dòng)畫化

React VR 有一個(gè) 動(dòng)畫庫(kù)來以簡(jiǎn)單的方式組合一些類型的動(dòng)畫。

在這個(gè)時(shí)候，只有幾個(gè)組件可以自己動(dòng)畫(View 使用 Animated.View, Text 使用 Animated.Text, Image 使用 Animated.Image). 這個(gè)文檔提醒你可以通過createAnimatedComponent來創(chuàng)建更多的動(dòng)畫，但是目前為止還找不到更多的相關(guān)信息。

另位一種選擇是使用requestAnimationFrame , 它是基于JavaScript動(dòng)畫API的重要組成部分。

那么我們可以做的就是要有一個(gè)狀態(tài)屬性來表示兩個(gè)模型的Y軸上的旋轉(zhuǎn)值（在月球模型上，為了使它變慢讓旋轉(zhuǎn)是地球旋轉(zhuǎn)的三分之一）：

class EarthMoonVR extends React.Component {
  constructor() {
    super();
    this.state = {
      rotation: 130,
    };
  }

  render() {
    return (
      
        ...

        
        
        
      
    );
  }
};

現(xiàn)在我們來編寫一個(gè)rotate函數(shù)，它將通過requestAnimationFrame函數(shù)調(diào)用每一幀，在一定時(shí)間基礎(chǔ)上更新旋轉(zhuǎn)：

class EarthMoonVR extends React.Component {
  constructor() {
    super();
    this.state = {
      rotation: 130,
    };
    this.lastUpdate = Date.now();

    this.rotate = this.rotate.bind(this);
  }

  rotate() {
    const now = Date.now();
    const delta = now - this.lastUpdate;
    this.lastUpdate = now;

    this.setState({
        rotation: this.state.rotation + delta / 150
    });
    this.frameHandle = requestAnimationFrame(this.rotate);
  }

  ...
}

幻數(shù) 150只是控制旋轉(zhuǎn)速度（這個(gè)數(shù)字越大，旋轉(zhuǎn)速度越慢）。我們保存由requestAnimationFrame返回的處理程序，以便當(dāng)組件卸載并啟動(dòng)componentDidMount上的旋轉(zhuǎn)動(dòng)畫時(shí)，我們可以取消動(dòng)畫：

class EarthMoonVR extends React.Component {
  constructor() {
    super();
    this.state = {
      rotation: 130,
    };
    this.lastUpdate = Date.now();

    this.rotate = this.rotate.bind(this);
  }

  componentDidMount() {
    this.rotate();
  }

  componentWillUnmount() {
    if (this.frameHandle) {
      cancelAnimationFrame(this.frameHandle);
      this.frameHandle = null;
    }
  }

  rotate() {
    const now = Date.now();
    const delta = now - this.lastUpdate;
    this.lastUpdate = now;

    this.setState({
        rotation: this.state.rotation + delta / 150
    });
    this.frameHandle = requestAnimationFrame(this.rotate);
  }

  ...
}

這是效果圖（你可能沒有注意到，但是月亮旋轉(zhuǎn)得很慢）：

現(xiàn)在讓我們來添加一些button來增加一些交互。

添加button并設(shè)置樣式

為我們的button創(chuàng)建一個(gè)新的組件。在實(shí)際開發(fā)中，我們也能使用View 或者VrButton，這倆都能設(shè)置像onEnter一樣的有效的事件來達(dá)到我們的目的。

然而，我們將使用VrButton，因?yàn)樗泻推渌M件不一樣的狀態(tài)機(jī)，并且很方便的添加onClick 和 onLongClick事件。

同時(shí)，我們?yōu)榱俗宐utton外觀更好看一些，我們將使用StyleSheet 來創(chuàng)建一個(gè)樣式對(duì)象，并通過一個(gè)樣式ID來對(duì)button進(jìn)行引用。

下面是button.js的內(nèi)容：

import React from "react";
import {
  StyleSheet,
  Text,
  VrButton,
} from "react-vr";

export default class Button extends React.Component {
  constructor() {
    super();
    this.styles = StyleSheet.create({
      button: {
        margin: 0.05,
        height: 0.4,
        backgroundColor: "red",
      },
      text: {
        fontSize: 0.3,
        textAlign: "center",
      },
    });
  }

  render() {
    return (
       this.props.callback()}>
        
          {this.props.text}
        
      
    );
  }
}

一個(gè)VrButton沒有外觀效果，因此我們必須給它添加樣式。它也可以包裝一個(gè)Image或Text組件。當(dāng)點(diǎn)擊這個(gè)button時(shí)，我們可以給它傳遞一個(gè)事件函數(shù)來接收點(diǎn)擊事件。

現(xiàn)在在我們的根組件中，我們倒入Button 組件并且在render函數(shù)中，如下所示添加兩個(gè)Button。

...
import Button from "./button.js";

class EarthMoonVR extends React.Component {
  ...

  render() {
    return (
      
        ...

這兩個(gè)Button在被觸發(fā)時(shí)將會(huì)改變模型的Z坐標(biāo)值并進(jìn)行相應(yīng)的縮放。因此，我們添加一個(gè)zoom狀態(tài)機(jī)變量值，讓它的初始值為-70（地球的Z軸值），當(dāng)我們點(diǎn)擊+和-時(shí)會(huì)增加和減少 zoom的值。

class EarthMoonVR extends React.Component {
  constructor() {
    super();
    this.state = {
      rotation: 130,
      zoom: -70,
    };
    ...
  }

  render() {
    return (
      

       ...

現(xiàn)在我們通過StyleSheet.create來給包含兩個(gè)Button的View添加flexbox布局樣式。

class EarthMoonVR extends React.Component {
  constructor() {
    super();
    ...
    this.styles = StyleSheet.create({
      menu: {
        flex: 1,
        flexDirection: "column",
        width: 1,
        alignItems: "stretch",
        transform: [{translate: [2, 2, -5]}],
      },
    });
    ...
  }

  render() {
    return (
      
        ...

在flexbox布局中，子組件會(huì)通過flexDirection:"column"屬性值垂直布局，通過flexDirection:"row"屬性值水平布局。在這個(gè)案例中，flex設(shè)置為1代表兩個(gè)button大小一樣，flexDirection設(shè)置為column代表兩個(gè)button從上往下排列。alignItems的值為stretch代表兩個(gè)Button和父視圖寬度一樣。

看看 this page on the React Native documentation 和 this one on the React VR documentation 這兩篇文章來了解更多關(guān)于flexbox布局的相關(guān)知識(shí)。

最后，我們可以從render函數(shù)中將天空盒的圖片移除，以便render中的代碼看起來不至于那么擁擠：

import React from "react";
import {
  AppRegistry,
  asset,
  StyleSheet,
  Pano,
  Text,
  View,
  Model,
  AmbientLight,
} from "react-vr";
import Button from "./button.js";

class EarthMoonVR extends React.Component {
  constructor() {
    super();
    this.state = {
      rotation: 130,
      zoom: -70,
    };
    this.lastUpdate = Date.now();
    this.spaceSkymap = [
      "../static_assets/space_right.png",
      "../static_assets/space_left.png",
      "../static_assets/space_up.png",
      "../static_assets/space_down.png",
      "../static_assets/space_back.png",
      "../static_assets/space_front.png"
    ];
    this.styles = StyleSheet.create({
      menu: {
        flex: 1,
        flexDirection: "column",
        width: 1,
        alignItems: "stretch",
        transform: [{translate: [2, 2, -5]}],
      },
    });

    this.rotate = this.rotate.bind(this);
  }

  componentDidMount() {
    this.rotate();
  }

  componentWillUnmount() {
    if (this.frameHandle) {
      cancelAnimationFrame(this.frameHandle);
      this.frameHandle = null;
    }
  }

  rotate() {
    const now = Date.now();
    const delta = now - this.lastUpdate;
    this.lastUpdate = now;

    this.setState({
        rotation: this.state.rotation + delta / 150
    });
    this.frameHandle = requestAnimationFrame(this.rotate);
  }

  render() {
    return (

如果我們測(cè)試這個(gè)應(yīng)用程序，我們將看到兩個(gè)button均觸發(fā)了相關(guān)事件。

總結(jié)

React Native 是基于React的一個(gè)移動(dòng)端的JavaScrpit庫(kù)，而React VR又是基于React Native的適用于虛擬現(xiàn)實(shí)的JavaScrpit庫(kù)。React VR允許我們快速方便的創(chuàng)建VR體驗(yàn)。

有很多相關(guān)的社區(qū)，如A-Frame和React VR 中文網(wǎng)。如果你想在App中制作360度的VR全景效果，并且如果你了解React／React Native，那么React VR是非常不錯(cuò)的選擇。

記住，你能夠從GitHub下載本篇文章中的源碼。

謝謝閱讀！

社群品牌：從零到壹全棧部落
定位：尋找共好，共同學(xué)習(xí)，持續(xù)輸出全棧技術(shù)社群
業(yè)界榮譽(yù)：IT界的邏輯思維
文化：輸出是最好的學(xué)習(xí)方式
官方公眾號(hào)：全棧部落
社群發(fā)起人：春哥(從零到壹創(chuàng)始人，交流微信：liyc1215)
技術(shù)交流社區(qū)：全棧部落BBS
全棧部落完整系列教程：全棧部落完整電子書學(xué)習(xí)筆記

關(guān)注全棧部落官方公眾號(hào)，每晚十點(diǎn)接收系列原創(chuàng)技術(shù)推送

云服務(wù)器 GPU云服務(wù)器數(shù)據(jù)庫(kù)快速入門教程 RDS 數(shù)據(jù)庫(kù)快速入門教程 python完全新手教程前端快速入門

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/83450.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

andot

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

＜LeetCode天梯＞Day025 刪除鏈表的倒數(shù)第N個(gè)節(jié)點(diǎn)（雙指針） | 初級(jí)算法 | Pyth

閱讀 1972·2021-11-16 11:45
機(jī)器學(xué)習(xí)數(shù)學(xué)基礎(chǔ)之線代篇——線性代數(shù)python手冊(cè)（建議收藏）

閱讀 3690·2021-09-06 15:02
你可能不知道的css騷操作 — 表單驗(yàn)證

閱讀 2033·2019-08-30 15:44
CSS的一些單位

閱讀 2295·2019-08-30 11:21
構(gòu)建靜態(tài)頁(yè)面之 [ 布局 ]

閱讀 1860·2019-08-29 16:31
網(wǎng)站SEO優(yōu)化

閱讀 3436·2019-08-29 13:55
vue

閱讀 1907·2019-08-29 12:15
CSS學(xué)習(xí)筆記(十) 界面組件之表單

閱讀 3259·2019-08-28 18:05

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

React VR 快速入門完全教程

相關(guān)文章

**前端每周清單第 10 期：Firefox53、React VR發(fā)布、Microsoft Edge現(xiàn)代**

**前端每周清單半年盤點(diǎn)之 React 與 ReactNative 篇**

**前端清單第 27 期：React Patent License 回復(fù)，Shopify WebVR 購(gòu)**

***ReactJS新聞 #25 F8開發(fā)者研習(xí)會(huì)與React***

發(fā)表評(píng)論

0條評(píng)論

andot

男|高級(jí)講師

TA的文章

＜LeetCode天梯＞Day025 刪除鏈表的倒數(shù)第N個(gè)節(jié)點(diǎn)（雙指針） | 初級(jí)算法 | Pyth

機(jī)器學(xué)習(xí)數(shù)學(xué)基礎(chǔ)之線代篇——線性代數(shù)python手冊(cè)（建議收藏）

你可能不知道的css騷操作 — 表單驗(yàn)證

CSS的一些單位

構(gòu)建靜態(tài)頁(yè)面之 [ 布局 ]

網(wǎng)站SEO優(yōu)化

vue

CSS學(xué)習(xí)筆記(十) 界面組件之表單

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！

React VR 快速入門完全教程

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購(gòu)！