基於React和A-Frame開發虛擬現實

banq發表於2016-01-06
虛擬現實概念現在很火,有人說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基礎教程


相關文章