基于React和A-Frame开发虚拟现实

16-01-06 banq
              

虚拟现实概念现在很火,有人说2016是虚拟现实年,现在我们能够基于A-Frame, ReactRedux开发Web的虚拟现实WebVR,WebVR相比于原生VR应用的优点是可以使用同样的状态数据在html/CSS渲染和3D渲染之间无缝切换。

这里GitHub的MeetupVR案例是基于A-Frame React boilerplate project模板项目建立的。其在线DEMO效果可见:MeetupVR演示

这里使用了很多库包,其中aframe-react是连接A-Framw和React之间的桥梁,而react-redux可以干净地用状态连接组件。

MeetupVR安装运行很简单:
npm install
npm run serve-js &
npm run serve

浏览器打开 localhost:5555

当点按页面中按钮,用户将切换到一个3d渲染模式,如果用户佩戴一个VR兼容的设备,用户将会置身于这些物体之间,然后通过凝视控制的光标来点按这些物体。

具体技术细节见:
Hands-on with virtual reality using A-Frame, React

使用A-Frame,Web开发人员能够轻松地建立3D和VR虚拟化,可以将这些效果应用于现在基于React的应用(banq注:就凭这点Angular2又如何能够和Reat.js血拼争高低呢?),如果你的架构使用Flux架构,采取共享的单向状态和事件流,Flux这两个特点将会为同样数据加载不同的渲染展示提供了可能。

参考:
前端Flux架构介绍
Reat.JS基础教程


              

1