Three.js入門篇之1 - WebGL on HTML

allenjiao發表於2018-03-14
JSWebHTML

一. 何為WebGL？

      WebGL 是基於Web的 三維渲染介面，與OpenGL的不同之處在於，新增了對 JavaScript 的支援，能夠為 HTML5 提供硬體加速的三維圖形渲染（通過Canvas來和DOM打交道）。

      WebGL 是基於 OpenGL ES 2.0 的 Javascript API。通過 HTML5 的 Canvas 來和 DOM 打交道。

      講到這裡，總結一下：

1. 如果你是OpenGL程式設計師，學習WebGL對你來講會是非常簡單的；

     你只需要熟悉 JS 語法 和WebGL對應的API就好了，大多數人兩個月能夠入門。

2. 如果你只是熟悉 Web，那麼GL對你來講也許是個挑戰；

     你要熟悉3D座標系、World-View-Proj 成像、三維渲染流程、Shader等等，也許需要更多的時間。

       幸運的是，Three.js 引擎已經為我們提供了底層的封裝，你需要提前熟悉三維渲染流程，然後 run demo，這是最好的也是最快的入門流程。

       Three.js 已在主流瀏覽器下得到支援，除錯建議用 FireFox 或者 Chrome，下載地址：https://threejs.org/  ，下圖是第一個例子效果：

        


二. Canvas

      Canvas是 HTML5 新定義的標籤，可以看成是一個矩形繪圖容器，支援事件響應 與 JavaScript 繪圖。

      Canvas和GDI繪圖介面比較類似，來看下如何採用Canvas繪製一個矩形：

[html] view plain copy
  1. <html>  
  2. <head/>  
  3. <body>  
  4.     <canvas id="Canvas2D"/>  
  5.     <script type="text/javascript">  
  6.         var canv=document.getElementById('Canvas2D');  
  7.         var context=canv.getContext('2d');  
  8.         context.fillStyle='#0000FF';  
  9.         context.fillRect(10,10,120,80);  
  10.     </script>  
  11. </body>  
  12. </html>  

三. 載入 Three.js引擎

      通過 Three.js 進行渲染，需要呼叫 three.js 介面，這是一個 JavaScript庫，簡要使用方式如下：

[html] view plain copy
  1. <html>  
  2. <head>  
  3.     <script type="text/javascript" src="three.js"></script>  
  4. </head>  
  5. <body>  
  6.     <canvas id="Canvas3D" width="352px" height="288px"/>  
  7.     <script type="text/javascript">  
  8.         // render  
  9.         var renderer = new THREE.WebGLRenderer();  
  10.           
  11.         // scene  
  12.         var scene = new THREE.Scene();  
  13.   
  14.         // camera  
  15.         var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);  
  16.   
  17.         renderer.render(scene, camera);  
  18.     </script>  
  19. </body>  
  20. </html>  

       熟悉基本知識和環境之後，下一節介紹 Hello World 入門！

相關文章