three.js是一款webGL框架,由於其易用性被廣泛應用。以下腳本之家小編透過案例給大家闡述three.js的基本配置方法,具體內容詳情大家參考下本文吧
![](https://img.php.cn/upload/article/000/000/007/e0085907af9dd91721d2107b2d48d6ad-0.png)
##開場白
webGL可以讓我們在canvas上實現3D效果。而three.js是一款webGL框架,由於其易用性被廣泛應用。如果你要學習webGL,拋棄那些複雜的原生介面從這款框架入手是一個不錯的選擇。
部落客目前也在學習three.js,發現相關資料非常稀少,甚至官方的api文檔也非常粗糙,很多效果需要自己慢慢敲程式碼摸索。所以我寫這個教學的目的一是自己總結,二是跟大家分享。
本篇是系列教學的第一篇:入門篇。在這篇文章中,我將以一個簡單的demo為例,闡述three.js的基本配置方法。學完這篇文章,你將學會如何在瀏覽器中繪製一個立體圖形!
準備工作
在寫程式碼之前,你首先要去下最新的three.js框架包,在你的頁面中引入three.js,當然文件包裡面也有不少的demo便於大家學習;
chrome是目前支援webGL最好的瀏覽器,Firefow居其次,國內的遨遊、獵豹經測試也可以運作。
從實例開始入門!
首先我們建立html,如下:
lesson1-by-shawn.xie
登入後複製
準備和畫布框大小一致的領域用於WebGL繪製。 具體來說:
(1) body 標籤中新增 id 為「canvas3d」的 p 元素。
(2) style 標籤中指定 在「canvas3d」的CSS樣式。
要注意的是,我們不需要寫一個