iT邦幫忙

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

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

Day 5 : 更多的三角網格

前言

Three.js內建了許多基礎幾何模型,直接使用語法即可建立,可以省下許多建立時間。

基本的幾何

在Three.js中,要建立幾何模型會使用geometry這個方法,除了上一回介紹如何建立單一片網格以外,我們也可以利用Three.js的內建語法建立基本的幾何模型。在CAD中透過基本的幾何模型可以做為設計模型的基礎,也可以做為組件裝配在基礎的模型使用,還能夠做為布林的聯集、交集和差集的對象物件,以下介紹幾個Three.js常用及酷炫的模型:

●方盒子

https://i.imgur.com/V9K57nd.gif

語法

var geometry = new THREE.BoxBufferGeometry(1, 1, 1);

說明

BoxBufferGeometry的參數為(寬、高、深度)

●圓柱體

https://i.imgur.com/2Cyksnx.gif

語法

var geometry = new THREE.CylinderBufferGeometry(1, 1, 1, 16);

說明

CylinderBufferGeometry的參數為(上面半徑, 下面半徑, 高, 分段數量)

●球體

https://i.imgur.com/x34xnVh.gif

語法

var geometry = new THREE.SphereBufferGeometry(1, 16, 16);

說明

SphereBufferGeometry的參數為(半徑, 寬的分段數, 高的分段數)

●甜甜圈

https://i.imgur.com/bJWKfpG.gif

語法

var geometry = new THREE.TorusBufferGeometry(0.5, 0.2, 16, 50);

說明

TorusBufferGeometry的參數為(半徑, 管狀直徑, 徑向分段數, 管狀分段數)

●環面紐結

https://i.imgur.com/uNxzmy8.gif

語法

var geometry = new THREE.TorusKnotBufferGeometry(0.5, 0.2, 50, 16);

說明

TorusKnotBufferGeometry的參數為(半徑, 管狀直徑, 管狀分段數, 徑向分段數)

範例原始碼

https://github.com/QQBoxy/threecad/blob/master/client/example2/index.js

後記

本次我們已經開始能夠在Web上建立一些基礎的3D元素了,大家是不是對於Web上做CAD設計越來越覺得是非常可行的呢? 讓我們繼續在Three.js探索CAD的各種可能性吧!


上一篇
Day 4 : 畫出一片三角網格
下一篇
Day 6 : 讀取三角網格檔案
系列文
在Three.js探索CAD的奧秘30

尚未有邦友留言

立即登入留言