iT邦幫忙

鐵人檔案

2018 iT 邦幫忙鐵人賽
回列表
Modern Web

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

CAD的英文全名是Computer Aided Design,中文名稱是『電腦輔助設計』,正如其名它是個能夠幫助我們透過電腦輔助進行數位化的設計。過去我們在工業設計、美術設計都學會了各種設計軟體的操作方法,但是否曾經想過這些軟體到底是怎麼做出來的呢? 如果你也擁有了這份好奇心,就讓我們一起透過Three.js這套JavaScript繪圖函數庫,逐步從簡單的二維的曲線曲面開始,一步步的走進三維網格曲面模型的世界,建立一套屬於自己的Web-based繪圖平台吧!

鐵人鍊成 | 共 30 篇文章 | 23 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day 1 : 為什麼是CAD?

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

2017-12-20 ‧ 由 QQBoxy 分享
DAY 2

Day 2 : 從B-rep、CSG到三角網格模型

前言 邊界表示 (Boundary Representation, B-rap) 的模型在設計領域已被廣泛使用,繪圖設計軟體會利用基本的點、線、面等表示一個三維...

2017-12-21 ‧ 由 QQBoxy 分享
DAY 3

Day 3 : 準備Three.js

前言 Three.js是一套使用JavaScript撰寫的三維繪圖函式庫,它採用了WebGL作為繪圖API,它也內建了跨瀏覽器的能力,可以在常見的各大瀏覽器中呈...

2017-12-22 ‧ 由 QQBoxy 分享
DAY 4

Day 4 : 畫出一片三角網格

前言 三角網格模型是指利用三個點所連成的三角形以網格狀的方式去建構出三維空間中的幾何模型,將空間中的模型轉換為三角網格模型的行為又稱為三角網格化,此方法被廣泛應...

2017-12-23 ‧ 由 QQBoxy 分享
DAY 5

Day 5 : 更多的三角網格

前言 Three.js內建了許多基礎幾何模型,直接使用語法即可建立,可以省下許多建立時間。 基本的幾何 在Three.js中,要建立幾何模型會使用geometr...

2017-12-24 ‧ 由 QQBoxy 分享
DAY 6

Day 6 : 讀取三角網格檔案

前言 前端讀檔,單純透過前端讀取檔案的方法,檔案只要經過選擇檔案後,可以直接利用JavaScript內建的FileReader語法來讀取檔案內容,並且可以使用B...

2017-12-25 ‧ 由 QQBoxy 分享
DAY 7

Day 7 : 渲染讀取的三角網格

前言 匯入網格模型,在CAD領域中這件事情是非常重要的,除了完全原創性的設計以外,經常會看到所謂的二次創作,或者是由原創者再稍微編修後的新型創作,因此如何將過去...

2017-12-26 ‧ 由 QQBoxy 分享
DAY 8

Day 8 : 模組化CAD平台

前言 模組化,也就是Module化,是將我們所需要的功能建立成一個模組增加重用性。在我們的應用是為了建立一個CAD平台,將Three.js模組化可以更方便的擴充...

2017-12-27 ‧ 由 QQBoxy 分享
DAY 9

Day 9 : 基本相機控制

前言 相機控制,在空間中控制相機的平移、旋轉,可以自由的從不同的角度去觀察網格模型,在桌面版CAD軟體內是基本的功能,同樣的在Web-based的環境中也有相同...

2017-12-28 ‧ 由 QQBoxy 分享
DAY 10

Day 10 : 射線法點選網格

前言 Raycaster射線法,是指在場景中打出一條射線,紀錄打出去的射線所有經過的網格,並且計算出與三角網格的交點,若沒有經過任何網格則不進行網格的紀錄。 射...

2017-12-29 ‧ 由 QQBoxy 分享