iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 3
0
Modern Web

在Three.js探索CAD的奧秘系列 第 3

Day 3 : 準備Three.js

前言

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模型的便利性。

https://ithelp.ithome.com.tw/upload/images/20171222/20107175uwemtTEuRc.png

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的探索之旅。


上一篇
Day 2 : 從B-rep、CSG到三角網格模型
下一篇
Day 4 : 畫出一片三角網格
系列文
在Three.js探索CAD的奧秘30

尚未有邦友留言

立即登入留言