前言

Three.js是一套使用JavaScript撰寫的三維繪圖函式庫，它採用了WebGL作為繪圖API，它也內建了跨瀏覽器的能力，可以在常見的各大瀏覽器中呈現不錯的3D效果。WebGL是一個瀏覽器內建的3D繪圖API，可以讓我們在瀏覽器中直接撰寫JavaScript去控制畫布以顯示3D圖形。

Three.js怎麼學?

首先你必須具備撰寫JavaScript的基礎程式語言能力，以及一些些的HTML標準模板基本概念，本文章不針對這兩個部分進行介紹，你可以到像是w3school這樣完整的教學網站，跟著章節逐步學習蹲完馬步後再回來看我們的文章。至於Three.js的部分，我們也不做太多的說明，iT邦也已經有許多的優良文章在介紹Three.js，也有從WebGL開始談起的細部介紹，除了這些資源以外，也建議大家可以試著看看官方網站的資料，筆者認為從小範例去學習去也是一個不錯的方法唷。

Three.js的範例網址
https://threejs.org/examples/

Three.js可以怎麼樣應用?

Three.js的應用非常的廣泛，其中CAD是一個具有相當潛力的領域，我們透過Three.js可以在網頁上呈現3D的STL模型，並且可以加入選擇檔案的功能做成一個可以讀取各種STL模型的工具，也可以利用一些CAD圖學的原理將模型自由縮放。例如下圖是一個作者過去撰寫的自適應讀檔工具，可以自動的判斷3D模型的形狀大小，自動調整縮放到可以看到整個模型的完整樣貌，在開始Coding之前不妨先玩玩看小應用，去動手並感受在Web操作3D模型的便利性。

STL模型讀檔工具
https://qqboxy.blogspot.com/p/3dviewer.html

範例STL模型檔案

小齒輪 (FileName: GearBinary.STL, Facet Normal: 792, Vertex: 2376, Diameter: 10mm)
https://sites.google.com/site/ccuboxy/home/GearBinary.STL?attredirects=0&d=1

大齒輪 (FileName: LargeGearBinary.STL, Facet Normal: 792, Vertex: 2376, Diameter: 100mm)
https://sites.google.com/site/ccuboxy/home/LargeGearBinary.STL?attredirects=0&d=1

風扇 (FileName: FanBinary.STL, Facet Normal: 2928, Vertex: 8784, Diameter: 80mm)
https://sites.google.com/site/ccuboxy/home/FanBinary.STL?attredirects=0&d=1

後記

跟不上的同學請可以趁現在先複習一下HTML+JavaScript，下一回將會開始說明如何建置Three.js的環境，教導大家如何去建立屬於自己的CAD軟體唷。在此補充一下，原本筆者報名時設定將由二維空間開始講，但是後來覺得三維空間門檻並不高，因此後續都會直接進到三維空間進行CAD的探索之旅。