React-AR

React是一款来自Facebook的开源JavaScript库，它可以轻松创建交互式用户界面。React VR可以在虚拟现实中创建UI和3D场景，它将React提升到一个新的水平。
React VR 可让您使用 JavaScript 构建 VR 应用程序。它使用与 React 相同的设计，让您通过声明式的组件构建丰富的 VR 世界和 UI。
React VR 是为 VR 应用而创建的框架，运行在 Web 浏览器中。它将现代 API（例如 WebGL 和 WebVR）与 React 的声明能力结合起来，通过各种设备提供适用于消费者的体验。

一、创建你的第一个项目

准备：

安装用于构建和管理React VR应用程序的依赖项：Node.js(4.0版本及以上)和React VR CLI

创建项目：

新建一个项目，并切换到新建项目内
安装React VR CLI工具，输入：npm install -g react-vr-cli
使用React VR CLI工具在“WelcomeToVR”文件夹下创建一个新应用程序，并安装所需的依赖关系，输入：react-vr init WelcomeToVR
将路径切换到 WelcomeToVR 项目目录:cd WelcomeToVR
使用start命令初始化本地开发服务器，输入：npm statrt
在浏览器中输入 http://localhost:8081/vr/index.html.将看到一个vr效果。

项目结构

最初运行“react-vr”工具时，它会在项目目录中创建一堆文件。

index.vr.js 是你React VR应用程序的入口。它包含了你的应用程序源码。
static_assets包含了所有的外部资源文件。图片视频等相关资源文件都需要放置在这里。他们可以通过asset(path)方法关联相关资源文件，它将会自动解析正确的路径。
vr包含支持应用程序运行时所必须的代码。这些文件你不需要作任何修改。这个目录下面有一个index.html的文件，它是加载你的应用程序的web 页面。
package.json 是你的项目的配置文件。它会告诉npm如何安装项目的外部依赖。例如：React VR和OVRUI。

项目内容

在第一个初始化的项目的文件夹中可以看到index.vr.js文件。这个文件是React VR应用程序的入口文件。

import React from 'react';

import { AppRegistry, asset, Pano, Text, View } from 'react-vr';

class WelcomeToVR extends React.Component {
  render() {
    // Displays "hello" text on top of a loaded 360 panorama image.
    // Text is 0.8 meters in size and is centered three meters in front of you.
    return (
      <View>
        <Pano source={asset('chess-world.jpg')}/>
        <Text
          style={{
            backgroundColor: '#777879',
            fontSize: 0.8,
            layoutOrigin: [0.5, 0.5],
            paddingLeft: 0.2,
            paddingRight: 0.2,
            textAlign: 'center',
            textAlignVertical: 'center',
            transform: [{translate: [0, 0, -3]}],
          }}>
          hello
        </Text>
      </View>
    );
  }
};

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

React应用程序由一系列组建渲染而成 - 每一个组建都会通过render函数来对自己进行渲染，与此同时也会根据响应刷新自己。 WelcomeToVR代码里面定义了一个顶级的组建，并且决定如何渲染。
代码从导入依赖关系开始。接下来，它声明了WelcomeToVR组件，包括它如何渲染。代码末尾通过AppRegistry来进行注册。() => WelcomeToVR是一个箭头函数，必须返回一个顶级组建，其余的可以放心的忽略。
我们看下组件的结构。我们返回一个View组件，它有两个子节点：'Pano'和'Text'：
1. PANO在渲染了360度图片的空间里创建了一个盒子。它是一个组建，它渲染了你看见的这个案例中的环境。
2. TEXT在3D空间中渲染一个字符串。这个特别的TEXT标签已经被设计放置在整个3D空间的中央。我们将在其他地方更详细的讲解更多的样式的使用。
3. VIEW组建通常会被用作一个容器。它们可以包含很多其他的组建，它们可以提供空间以及设计成你想要的UI样式。我们的组件创建一个PANO和一个TEXT包裹在VIEW中。

发布你的项目

建立生产环境

React VR附带一个可以将所有内容都打包成几个您可以放在网络服务器上文件的脚本。从你的项目根目录，运行如下：npm run bundle
这将在vr中创建一个名为build的新目录。内部是您的应用程序文件的编译版本。这些可以放在Web服务器上，只要它们放在同一个目录中，它们就需要作任何改变。
如果你是用任何的外部资源(asset()),

您还需要将您的static_assets目录与文件一起复制，以便您的应用程序可以引用它们。此时，您的目录结构应类似于以下内容：

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

在现有的网页中集成

如果要将VR体验嵌入到网页中，推荐的方法是使用<iframe>标签。将src属性设置为指向项目的index.html文件，并在iframe上设置适当的大小。

参考：http://react-vr.org/cn/index.html

posted @ 2017-07-01 11:01 这人是胖子阅读(1159) 评论(0) 编辑收藏举报

刷新页面返回顶部