react-vr 教程

🌙
手机阅读
本文目录结构

什么是 React

React 是一个开放源代码的 JavaScript 库,为 HTML 呈现的数据提供了视图渲染。React 视图通常使用指定的像 HTML 标签一样的组件来进行 UI 渲染。它目前是最流行的 JavaScript 库之一,它拥有强大的基础和庞大的社区。

创建一个 React App

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

$ cd my-app
$ npm start

React VR

React VR 旨在允许 Web 开发人员使用 React 的声明方法(特别是 React Native) 来创作虚拟现实(VR)应用程序。

React VR 使用 Three.js 来支持较低级别的 WebVR 和 WebGL API. WebVR 是用于访问 Web 上 VR 设备的 API。 WebGL(Web 图形库)是一种无需使用插件即可用于在任何兼容的 Web 浏览器中渲染 3D 图形的 API。

React VR 类似于 React Native,因为它使用 View,Image 和 Text 作为核心组件,并且支持 Flexbox 布局。 此外,React VR 还将 Pano,Mesh 和 PointLight 等 VR 组件添加相关库中。

在本篇文章中,我将带领大家创建一个简单的 VR 应用程序来学习如何创建一个全景图片,3D 对象模型,按钮和 flexbox 布局的使用场景。我们的模拟应用程序基于 React VR 的两个网格和布局的官方示例。

该应用程序将渲染一个能够放大和缩小的地球和月球的 3D 模型,

这些模型中,它们的尺度和旋转不是地球 - 月球系统的真实复制品。 这种关系只是为了展示 React VR 的工作原理。 与此同时,我们将解释一些关键的 3D 建模概念。 一旦掌握了 ReactVR,就可以随意创造更多的作品。

你能够从 https://github.com/liyuechun/EarthMoonVR 找到最后的项目源代码。

要求

到目前为止,虚拟现实是一项相当新的技术,开发或测试我们的 VR 应用程序的方法很少。

WebVR 和 Is WebVR Ready? 可以帮助您了解哪些浏览器和设备支持最新的 VR 规范。

但是你也不必过于担心, 你现在不需要任何特殊的设备,例如: Oculus Rift, HTC Vive, 或者 Samsung Gear VR 来测试一个 WebVR APP。

下面是你现在 所需要 准备的:

  • 一台 Windows/Mac 电脑。

  • Google 浏览器。

  • 最新版本的 Node.js

  • 如果您也有 Android 设备和 Gear VR 耳机,您可以安装 Carmel Developer Preview 浏览器来探索您的 React VR 应用程序。

创建项目

首先,我们需要使用 NPM 来安装 React VR CLI 工具:

$ npm install -g react-vr-cli

使用 React VR CLI 来创建一个名字叫做 EarthMoonVR 的新项目:

$ react-vr init EarthMoonVR

在创建过程中您需要等一会儿,这将创建一个 EarthMoonVR 目录,目录里面就是相关项目文件,如果希望创建速度快一些,您可以安装 Yarn 来提高速度。

一旦项目创建完毕,可以通过 cd 切换到 EarthMoonVR 文件路径下面:

$ cd EarthMoonVR

在终端通过 npm start 来启动程序以便查看效果:

$ npm start

在浏览器中输入 http://localhost:8081/vr。稍微等一会儿,即可查看到 VR 效果:

https://image-static.segmentfault.com/309/325/3093254027-59422a637038a_articlex

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang