粗大的内捧猛烈进出小视频,日本成人精品视频一区,在线播放亚洲成人av,精品人妻少妇嫩草av专区,亚洲AV永久久久久久久浪潮,性导航app精品视频,九九热精品免费视频,一本一本大道香蕉久在线播放 

  
      
    

        

	
        
		
        
			
        
				
        WebVR大潮來襲 ---前端開發(fā)能做些什么？
        
				
        
					
         2018-5-28      高勁      
        
					
					
        
						
					
        
				
        
				
			
        
			
        
				
        
            去年谷歌和火狐針對WebVR提出了WebVR API的標準，顧名思義，WebVR即web + VR的體驗方式，我們可以戴著頭顯享受沉浸式的網(wǎng)頁，新的API標準讓我們可以使用js語言來開發(fā)。今天，約克先森將介紹如何開發(fā)一個WebVR網(wǎng)頁，在此之前，我們有必要了解WebVR的體驗方式。

        

        WebVR體驗模式
        

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

        

        一、VR模式
        

        
    ?滑配式HMD + 移動端瀏覽器

        

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

        

        
    ?分離式HMD + PC端瀏覽器

        

        
            通過佩戴Oculus Rift的分離式頭顯瀏覽連接在PC主機端的網(wǎng)頁，現(xiàn)支持WebVR API的瀏覽器主要是火狐的 Firefox Nightly和設置VR enabled的谷歌chrome beta。

        

        
    二、裸眼模式

        

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

        

        
            WebVR的概念大概就如此，這次我們將采用cardboard + mobile的方式來測試我們的WebVR場景，現(xiàn)在踏上我們的開發(fā)之旅。

        

        準備工作
        

        
    
        
                技術和框架：three.js for WebGL
    
        

        

        
             Three.js是構建3d場景的框架，它封裝了WebGL函數(shù)，簡化了創(chuàng)建場景的代碼成本，利用three.js我們可以更優(yōu)雅地創(chuàng)建出三維場景和三維動畫。

        

        
    
        
                測試工具：智能手機 + 滑配式頭顯
    
        

        

        
            推薦使用cardboard或者某寶上三十塊錢的高仿貨。當然，如果你練就了裸眼就能將手機雙屏畫面看成單屏的能力也可以忽略。

        

        
    

        

        
           需要引入的js插件：

        

          
    
        • 
        
          
            three.min.js
        
          
    
          • 
    
        • 
        
          
            webvr-polyfill.js
        
          
    
          • 
    
        • 
        
          
            VRcontrols.js
        
          
    
          • 
    
        • 
        
          
            VReffect.js
        
          
    
          • 
    
        • 
        
          
            webvr-manager.js
        
          
    
          • 

        

        
    webvr-polyfill.js

        

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

        

        
    VRControls.js

        

        
            VR控制器，是three.js的一個相機控制器對象，引入VRcontrols.js可以根據(jù)用戶在空間的朝向渲染場景，它通過調(diào)用WebVR API的orientation值控制camera的rotation屬性。

        

        
    VREffect.js

        

        
            VR分屏器，這是three.js的一個場景分屏的渲染器，提供戴上VR頭顯的顯示方式，VREffect.js重新創(chuàng)建了左右兩個相機，對場景做二次渲染，產(chǎn)生雙屏效果。

        

        
    webvr-manager.js

        

        
             這是WebVR的方案適配插件，它提供PC端和移動端的兩種適配方式，通過new WebVRManager()可以生成一個VR圖標，提供VR模式和裸眼模式的不同體驗，當用戶在移動端點擊按鈕進入VR模式時，WebVRManager便會調(diào)用VREffect分屏器進行分屏，而退出VR模式時，WebVRManager便用回renderer渲染器進行單屏渲染。

        

        
            具體使用方法我們將在下文說明。

        

                3D場景構建
        

        
            首先我們創(chuàng)建一個HTML文件

        

        
           <!DOCTYPE html>

        

        
           <html lang="en">

        

        
           <head> 

        

        
                  <meta charset="UTF-8">

        

        
                      <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">

        

        
                  <title>webVR-helloworld</title>

        

        
                       <style type="text/css">

        

        
                             * { 

        

        
                               margin: 0;

        

        
                               padding: 0;

        

        
                                }

        

        
                         html,body {

        

        
                                     height: 100%;

        

        
                                    overflow: hidden;

        

        
                         }

        

        
                   </style>

        

        
             </head>

        

        
             <body>

        

        
             </body>

        

        
            <script src="./vendor/three.min.js"></script>

        

        
              <script src="./vendor/webvr-polyfill.js"></script>

        

        
              <script src="./vendor/VRControls.js"></script>

        

        
           <script src="./vendor/VREffect.js"></script>

        

        
           <script src="./vendor/webvr-manager.js"></script>

        

        
           <script src="./main.js"></script>

        

        
           </html>

        

        
             接下來編寫js腳本，開始創(chuàng)建我們的3d場景。

        

        
    1、創(chuàng)建場景

        

        
            Three.js中的scene場景是繪制我們3d對象的整個容

        

        
           1.var scene = new THREE.Scene();

        

        
    2、添加相機
        
        

        

        
    Three.js的相機

        

        
    Three.js中的camera相機代表用戶的眼睛，我們通過設置FOV確定視野范圍，

        

          
    
        • 
        
          
            //定義一個60°的視角，視線范圍在1到1000的透視相機
        
          
    
          • 
    
        • 
        
          
            var camera = new THREE. new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,1,1000);
        
          
    
          • 
    
        • 
        
          
            scene.add(camera);
          
        
          
    
          • 

        

        
    3、添加渲染器

        

          
    
        • 
        
          
            Three.js的渲染器用來渲染camera所看到的畫面
        
          

          
    
          • 

        

          
    
        • 
        
          
            //初始化渲染器 antialias參數(shù)為ture表示開啟抗鋸齒策略
        
          
    
          • 
    
        • 
        
          
            var renderer = new THREE.WebGLRenderer({ antialias: true } );
        
          
    
          • 
    
        • 
        
          
            //設置渲染器渲染尺寸
        
          
    
          • 
    
        • 
        
          
            renderer.setSize(window.innerWidth,window.innerHeight);
        
          
    
          • 
    
        • 
        
          
            //設置渲染背景為白色
        
          
    
          • 
    
        • 
        
          
            renderer.setClearColor(0xeeeeee);
        
          
    
          • 
    
        • 
        
          
            //將渲染場景的canvas放入body標簽里
        
          
    
          • 
    
        • 
        
          
            document.body.appendChild(renderer.domElement);
        
          

          
    
          • 

        

          
    
        • 
        
          
            添加一個立方體網(wǎng)格
        
          

          
    
          • 

        

          
    
        • 
        
          
            // 創(chuàng)建立方體
        
          
    
          • 
    
        • 
        
          
            var geometry = new THREE.CubeGeometry( 10,10,10);
        
          
    
          • 
    
        • 
        
          
            var cubematerial = new THREE.MeshLambertMaterial( { color: 0xef6500,needsUpdate: true,opacity:1,transparent:true} );
        
          
    
          • 
    
        • 
        
          
            var cube = new THREE.Mesh( geometry, Cubematerial );
        
          
    
          • 
    
        • 
        
          
            cube.position.set(0,100,-50);
        
          
    
          • 
    
        • 
        
          
            cube.rotation.set(Math.PI/6,Math.PI/4,0);
        
          
    
          • 
    
        • 
        
          
            scene.add(cube);
        
          

          
    
          • 

        

        
    4、啟動動畫

        

          
    
        • 
        
          
            產(chǎn)生動畫的原理就是讓camera持續(xù)連拍，同時每一次改變物體的屬性，通過requestAnimationFrame()方法遞歸的方式來持續(xù)更新場景對象屬性，你可以將它理解為setTimeout的優(yōu)化版。相比setTimeout函數(shù)，requestAnimationFrame可以保證動畫渲染不會因為主線程的阻塞而造成跳幀。
        
          

          
    
          • 

        

          
    
        • 
        
          
            function animate() {
        
          
    
          • 
    
        • 
        
          
                //讓立方體旋轉
        
          
    
          • 
    
        • 
        
          
                cube.rotation.y += 0.01;
        
          
    
          • 
    
        • 
        
          
                //渲染器渲染場景，等同于給相機按下快門
        
          
    
          • 
    
        • 
        
          
                renderer.render(scene, camera);
        
          
    
          • 
    
        • 
        
          
                //遞歸運行該函數(shù)
        
          
    
          • 
    
        • 
        
          
                requestAnimationFrame( animate );
        
          
    
          • 
    
        • 
        
          
            }
        
          
    
          • 
    
        • 
        
          
            animate();//啟動動畫
        
          

          
    
          • 

        

        
          至此，我們已經(jīng)繪制了一個簡單的3d場景并且讓它動了起來，接下來，我們需要讓我們的場景可以支持WebVR模式。

        

        WebVR場景開發(fā)
        

        
           WebVR網(wǎng)頁的基本原理其實是通過瀏覽器的WebVR API獲取用戶輸入，進而控制相機的視角，在VR模式下通過VR控制器和VR分屏器以二分屏+gyroscope(使用水平陀螺儀)的方式顯示畫面，裸眼情況下提供全屏+touchmove/gyroscope。

        

        
           現(xiàn)在我們開始分別創(chuàng)建上文所說的VR控制器和VR分屏器

        

          
    
        • 
        
          
            //初始化VR控制器需要傳入場景相機
        
          
    
          • 
    
        • 
        
          
            var vrControls = new THREE.VRControls(camera);
        
          
    
          • 
    
        • 
        
          
            //初始化VR渲染器需要傳入場景渲染器
        
          
    
          • 
    
        • 
        
          
            var vrEffect = new THREE.VREffect(renderer);
        
          
    
          • 
    
        • 
        
          
            //初始化VR適配器，傳入渲染器和分屏器
        
          
    
          • 
    
        • 
        
          
            var vrManager = new WebVRManager(renderer, vrEffect);
        
          

          
    
          • 

        

        
          然后在前面創(chuàng)建的場景渲染函數(shù)里調(diào)用

        

          
    
        • 
        
          
            function animate() {
        
          
    
          • 
    
        • 
        
          
                cube.rotation.y += 0.01;
        
          
    
          • 
    
        • 
        
          
                //實時更新相機的位置和轉角
        
          
    
          • 
    
        • 
        
          
                vrControls.update();
        
          
    
          • 
    
        • 
        
          
                vrManager.render(scene, camera);
        
          
    
          • 
    
        • 
        
          
                //遞歸運行該函數(shù)
        
          
    
          • 
    
        • 
        
          
                requestAnimationFrame( animate );
        
          
    
          • 
    
        • 
        
          
            }
        
          

          
    
          • 

        

        
           至此，我們已經(jīng)完成了一個基本的webVR網(wǎng)頁，不過少了點交互效果好像，敬請期待Web開發(fā)的新世界---WebVR之交互事件。

        

        
    
          
        
        • 
            
          
                完整代碼：在文章基礎上添加了天空和地面相關代碼，以及下篇文章將講到VR凝視交互事件。
            
          
        
          • 
        
        • 
            
          
                demo演示地址 ：手機瀏覽需設置允許橫屏。
            
          

          
        
          • 
    
        

        

        結語
        

        
            目前，國外的谷歌、火狐、Facebook和國內(nèi)百度已推出支持WebVR瀏覽器的版本，微軟也宣布將推出自己的VR瀏覽器，隨著后期5g網(wǎng)絡極速時代的到來以及HMD頭顯的價格和平臺的成熟，WebVR的體驗方式將是革命性的，用戶通過WebVR瀏覽網(wǎng)上商店，線上教學可進行“面對面”師生交流等，基于這種種應用場景，我們可以找到一個更好的動力去學習WebVR。

        


        

        
    
        

        


        

        
    
        

        


        				
        
								
			
        
		
        
		
		
	
        


        
    
  
        
    
        日歷
        
    
        
        
        
        
    
        
  
        
    
    
        
      
        鏈接
        
      
          
                
        
    
        
    
        
      
        個人資料
        
      
        
          
        
                    
        
          
        藍藍設計的小編
          http://www.xintaizi.com
        
      
        
    
        
    
        
      
        存檔