基於React和A-Frame開發虛擬現實
虛擬現實概念現在很火,有人說2016是虛擬現實年,現在我們能夠基於A-Frame, React和Redux開發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這兩個特點將會為同樣資料載入不同的渲染展示提供了可能。
參考:
相關文章
- 從零開始實現React(一):JSX和虛擬DOMReactJS
- 基於虛擬DOM(Snabbdom)的迷你ReactReact
- [譯] 基於虛擬DOM(Snabbdom)的迷你ReactReact
- React 虛擬Dom 轉成 真實Dom 實現原理React
- 虛擬化的發展歷程和實現方式
- 將VR用於汽車開發,寶馬推出一套虛擬現實系統VR
- REACT——虛擬DOMReact
- 使用 React + Rxjs 實現一個虛擬滾動元件ReactJS元件
- 全面理解虛擬DOM,實現虛擬DOM
- 基於React+Redux的SSR實現ReactRedux
- React虛擬dom和diff演算法React演算法
- React 虛擬 Dom 和 diff 演算法React演算法
- 基於Webpack搭建React開發環境WebReact開發環境
- 基於 React.js 和 Node.js 的 SSR 實現方案ReactNode.js
- React 的虛擬 DOM 和 Vue 的虛擬 DOM 有什麼區別?ReactVue
- 基於React和SpringBoot的快速開發模板QuickAdminReactSpring BootUI
- 基於vite多頁面實現多端同構開發和部署Vite
- 虛擬現實技術
- 基於React Hook實現圖片的裁剪ReactHook
- 基於react的hash路由簡易實現React路由
- React服務端渲染實現(基於Dva)React服務端
- 基於 LNMP 的 Nginx 百萬併發之路 (三)基於域名的虛擬主機LNMPNginx
- 基於虛擬化技術的軟體開發構成雲應用根本
- 如何建立起基於Vagrant的Open EDX的虛擬開發環境(二)開發環境
- 虛擬現實產業聯盟:2020虛擬現實產業發展研究報告(附下載)產業
- Unity標準開發例項——虛擬現實技術應用14Unity
- 實現主機、虛擬機器、開發板的相互ping通虛擬機
- 基於Vert.x和SpringBoot實現響應式開發Spring Boot
- 虛擬現實能做什麼?虛擬現實玩遊戲以外還能做很多事遊戲
- 虛擬蜜罐:從資訊模擬到實現虛擬蜜罐技術
- 實現基於React的全域性提示元件ToastReact元件AST
- 實現基於React的移動端Swiper元件React元件
- Unity基於NGUI的簡單並可直接使用的虛擬搖桿實現(一)UnityNGUI
- 基於React的表單開發的分析(上)React
- 基於React的表單開發的分析(下)React
- 使用DiskGenius工具來實現物理機遷移虛擬機器,實現虛擬化虛擬機
- labview入門到出家11(補充)——基於微控制器和labview開發的虛擬示波器View
- 基於虛擬機器的黑群暉NAS+基於虛擬區域網的遠端訪問虛擬機