iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 1
2
Modern Web

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

Day 1 : 為什麼是CAD?

作者簡介

作者Boxy現正就讀中正大學機械系,本身研究主題就是網際結合CAD/CAM,有幸在這跟大家分享一些跨領域的知識,希望大家會喜歡。

前言

電腦輔助設計(Computer-aided Design, CAD)
已經存在超過半個世紀,因為電腦技術的成熟帶動了CAD軟體的發展,設計師們學會使用CAD設計出各式各樣的新產品,從2D的色彩美術設計到3D的外型結構設計,它並不局限於特定領域,而是被應用在不同的各行各業。

電腦輔助設計軟體

創造是人天生擁有與生俱來的能力,人們會把靈感或想法畫在紙張上,於是就有了設計圖的概念,但是當這些創意需要轉化為真正的產品時,感覺設計不滿意或是無法輕易製作等問題就會需要進行設計變更,這時候畫在紙張上就變得不是那麼方便。為了解決這個問題人們創造了各式各樣的CAD軟體,這些軟體有著豐富的編修功能、優秀的模擬計算的能力,使得設計圖變得更方便容易繪製。而現在CAD所設計出來各種形形色色的產品已充斥在大家的日常生活中,從你用的器具、住的房子、坐的汽車無不是直接或間接由CAD軟體所設計出來,可見CAD帶給人類在設計領域有很大的貢獻。

https://ithelp.ithome.com.tw/upload/images/20171220/201071756TC8z8bH0d.jpg
汽油遙控車引擎

有哪些3D模型設計?

三維設計領域中常見的模型表示方式有兩種,第一種是B-rep模型,這類模型經常在工程繪圖軟體被採用,像是上面的遙控車引擎模型,就是透過知名的3D工程繪圖軟體所繪製出來的,這類模型主要是由一些邊界線所包圍而組成的,特別適合設計一些看起來較規矩的立體模型,但是要繪製這類模型往往需要較長時間的專業製圖訓練,通常會是所謂的製圖工程師在使用。另一種是CSG模型,它採可以使用網格的方式去定義模型,通常是在需要複雜曲線曲面的時機被採用,這種方式也深受3D繪師或動畫師喜愛,它的操作方法就像是在捏黏土一般,還能透過各式各樣不同的筆刷工具去雕刻,使用者可以很容易的經由手感創造出自己想要的形狀,也可以先匯入一些掃描的3D模型,即可輕易的再對其進行二次編修設計,如下圖就是一個常見的曲面網格模型。

https://ithelp.ithome.com.tw/upload/images/20171220/201071752qQaOy2ubw.png
Bunny rabbit

文章目錄

一、前導說明
Day 1 : 為什麼是CAD?
Day 2 : 從B-rep、CSG到三角網格模型

二、三維程式基礎
Day 3 : 準備Three.js
Day 4 : 畫出一片三角網格
Day 5 : 更多的三角網格
Day 6 : 讀取三角網格檔案
Day 7 : 渲染讀取的三角網格
Day 8 : 模組化CAD平台
Day 9 : 基本相機控制

三、三角網格拓樸基礎
Day 10 : 射線法點選網格
Day 11 : 三角網格拓樸關係
Day 12 : Three.js建立三角網格拓樸
Day 13 : 射線法結合拓樸使用
Day 14 : 提升設計環境

四、三角網格向量應用
Day 15 : 即時高亮網格
Day 16 : 簡單網格變形
Day 17 : 修正面的法向量
Day 18 : 模型所見即得的設計
Day 19 : 點選網格頂點
Day 20 : 網格頂點的平均法向量
Day 21 : 模型塗抹效果

五、三角網格處理
Day 22 : 三角網格細分
Day 23 : 網格細分實作
Day 24 : 封閉網格與非封閉網格
Day 25 : 球範圍選擇
Day 26 : 三角網格平滑變形
Day 27 : 三角網格邊翻轉
Day 28 : 網格邊翻轉實作
Day 29 : 三角網格布林

六、結尾展望
Day 30 : CAD的未來

範例原始碼

Github: https://github.com/QQBoxy/threecad

後記

今天就先介紹到這裡,大家有沒有對CAD設計領域有一點概念了呢? 讓我們明天再繼續深入瞭解這些不同性質的模型吧。


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

2 則留言

0
微中子
iT邦新手 4 級 ‧ 2017-12-20 22:39:12

我也唸機械的。很好奇你怎樣結合 three 哈哈哈

0
彭偉鎧
iT邦新手 2 級 ‧ 2017-12-27 11:44:24

CAD的3D圖不夠平滑,要進入CSG,可能要使用3D MAX或MAYA才能在進一步做到。

QQBoxy iT邦新手 4 級 ‧ 2017-12-27 15:59:33 檢舉

您說的沒錯,一般關於網格不夠平滑的問題,需要使用網格細分演算法處理,其實演算法也能夠搬到Web-based透過Three.js搭配Tree去處理。

我要留言

立即登入留言