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