關燈
開啟左側

WebVR標準入門開發教程在這里

[復制鏈接]
655 1
admin 發表于 2019-4-1 16:58:22 | 只看該作者 |只看大圖 |閱讀模式 打印 上一主題 下一主題
 
  WebVR標準入門開發教程在這里。WebVR即web+VR的體驗方式,本文介紹如何開發一個WebVR網頁,在此之前,我們有必要了解WebVR的體驗方式。

  WebVR體驗模式

  體驗WebVR的方式

  WebVR的體驗方式可以分為VR模式和裸眼模式

  VR模式

  1.MobileVR

  如使用cardboard眼鏡來體驗手機瀏覽器的webVR網頁,瀏覽器將根據水平陀螺儀的參數來獲取用戶的頭部傾斜和轉動的朝向,并告知頁面需要渲染哪一個朝向的場景。

  2.PCVR

  通過佩戴OculusRift的分離式頭顯瀏覽連接在PC主機端的網頁,現支持WebVRAPI的瀏覽器主要是火狐的 FirefoxNightly和設置VRenabled的谷歌chromebeta。

  裸眼模式

  除了VR模式下的體驗方式,這里還考慮了裸眼下的體驗瀏覽網頁的方式,在PC端如果探測的用戶選擇進入VR模式,應讓用戶可以使用鼠標拖拽場景,而在智能手機上則應讓用戶可以使用touchmove或旋轉傾斜手機的方式來改變場景視角。

  WebVR的概念大概就如此,這次我們將采用cardboard+mobile的方式來測試我們的WebVR場景,現在踏上我們的開發之旅。

  準備工作

  測試工具:智能手機+cardboard式頭顯+chromebeta60+(需開啟WebVR選項)

  如果你練就了裸眼就能將手機雙屏畫面看成單屏的能力也可以省下頭顯。

  技術和框架:three.jsforWebGL

  Three.js是構建3d場景的框架,它封裝了WebGL函數,簡化了創建場景的代碼成本,利用three.js我們可以更優雅地創建出三維場景和三維動畫,這里我使用的是0.86版本。如果想了解純WebGL開發WebVR應用以及WebVR具體環境配置,可以參考 webvr教程--深度剖析。

  需要引入的js插件:1.three.min.js 2.webvr-polyfill.js

  webvr-polyfill.js

  由于WebVRAPI還沒被各大主流瀏覽器支持,因此需要引入webvr-polyfill.js來支持WebVR網頁,它提供了大量VR相關的API,比如Navigator.getVRDisplay()獲取VR頭顯信息的方法。

  3D場景構建

  首先我們創建一個HTML文件
WebVR標準入門開發教程在這里(1)
  接下來編寫js腳本,開始創建我們的3d場景。

  1.創建場景

  Three.js中的scene場景是繪制我們3d對象的整個容器
WebVR標準入門開發教程在這里(2)
  2.添加相機

  Three.js中的camera相機代表用戶的眼睛,我們通過設置FOV確定視野范圍,
WebVR標準入門開發教程在這里(3)
  3.添加渲染器

  Three.js的渲染器用來渲染camera所看到的畫面
WebVR標準入門開發教程在這里(4)
  4.添加一個立方體網格
WebVR標準入門開發教程在這里(5)
  5.啟動動畫

  動畫渲染的原理:渲染器的持續調用繪制方法,方法里動態改變物體的屬性。舊版的three.js需要手動調用requestAnimationFrame()方法遞歸的方式來渲染動畫,新版three.js已經封裝了該屬性,因此只需要通過渲染器renderer.animate(callback)。
WebVR標準入門開發教程在這里(6)
  至此,我們已經繪制了一個簡單的3d場景并且讓它動了起來,接下來,我們需要讓我們的場景可以支持WebVR模式。

  WebVR場景開發

  使用navigator.getVRDisplays獲取vr設備實例vrdisplay,我們需要將它傳給當前運行的renderer渲染器,當點擊按鈕時可以進入VR模式,再次點擊退出VR模式。
WebVR標準入門開發教程在這里(7)
  這里需要通過按鈕控制當前的渲染模式邏輯如下:

  當點擊按鈕時,根據display.isPresenting判斷當前是否是使用vr設備下進行渲染,如果false,進入2,否則true進入3

  當前非VR模式,點擊按鈕進入VR模式,此時調用display.requestPresent(),display.isPresenting被設置為true,觸發window的vrdisplaypresentchange事件

  當前為VR模式,點擊按鈕退出模式,此時調用display.exitPresent(),display.isPresenting被設置為false,觸發window的vrdisplaypresentchange事件
WebVR標準入門開發教程在這里(8)
  我們可以在vrdisplaypresentchange事件中根據isPresenting的值來改變按鈕的UI,而three.js將根據isPresenting的值來決定是常規渲染還是vr模式渲染,在vr模式下,three.js將創建兩個camera進行渲染。

  最后,將WebVR應用寫成ES6class,按照下圖進行代碼規范:

  第一步,構造函數先初始化VR場景、相機和渲染器;第二步,在渲染之前調用start方法,在start方法里我們為場景創建3d物體;最后,調起renderer.animate(this.update)開啟動畫渲染,update方法里我們可動態操作物體屬性,具體代碼如下:
WebVR標準入門開發教程在這里(9)
WebVR標準入門開發教程在這里(10)
  結語:目前,國外的谷歌、火狐、Facebook和國內百度已推出支持WebVR瀏覽器的版本,微軟也宣布將推出自己的VR瀏覽器,隨著后期5g網絡極速時代的到來以及HMD頭顯的價格和平臺的成熟,WebVR的體驗方式將是革命性的,用戶通過WebVR瀏覽網上商店,線上教學可進行“面對面”師生交流等,基于這種種應用場景,我們可以找到一個更好的動力去學習WebVR。



收藏0
分享

VR社區 - 論壇版權1、本主題所有言論和圖片純屬會員個人意見,與本論壇立場無關
2、本站所有主題由該帖子作者發表,該帖子作者與VR社區享有帖子相關版權
3、其他單位或個人使用、轉載或引用本文時必須同時征得該帖子作者和VR社區的同意
4、帖子作者須承擔一切因本文發表而直接或間接導致的民事或刑事法律責任
5、本帖部分內容轉載自其它媒體,但并不代表本站贊同其觀點和對其真實性負責
6、如本帖侵犯到任何版權問題,請立即告知本站,本站將及時予與刪除并致以最深的歉意
7、VR社區管理員和版主有權不事先通知發貼者而刪除本文

 

精彩評論1

正序瀏覽
跳轉到指定樓層
沙發
nssb 發表于 2019-4-30 20:09:29 | 只看該作者
 
66666666666666666
回復 支持 反對

使用道具 舉報

 
您需要登錄后才可以回帖 登錄 | 立即注冊

本版積分規則

  • 最新帖子
  • 最熱帖子
  • 精華帖子

關注我們:微信訂閱號

客服QQ:

1973808489

上班時間:9:00 -- 21:00

Email:1973808489#qq.com (請把#換成@)

Copyright VR社區 | 網站地圖
广东36选7综合走势图百度