iT邦幫忙

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

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

Day 12 : Three.js建立三角網格拓樸

前言

topology.js函式庫,在Three.js建立三角網格拓樸關係可以使用topology.js來建立,但是目前作者 Lee Stemkoski 沒有繼續更新為Module,函數本身也有些許小問題,因此筆者稍微將原本的函式庫修正在這邊提供給大家。

Three.js三角網格拓樸

topology.js函式庫使用起來非常簡單,首先要由筆者的github下載topology.js函式庫,接著建議將topology.js放到threecad/client/common目錄下,因為topology.js也可能被其他程式重用:
https://github.com/QQBoxy/threecad/blob/master/client/common/topology.js

由於STLLoader回傳的是BufferGeometry,要先將幾何轉為可供編輯的Geometry型態,因此我們在Viewer的add函數加入轉換函數。

var geometry = new THREE.Geometry().fromBufferGeometry(bufferGeometry);

最後就可以使用TOPOLOGY中的createFromGeometry函數建立拓樸關係,如下圖:

var topology = new TOPOLOGY.createFromGeometry(geometry);
console.log(topology);

https://ithelp.ithome.com.tw/upload/images/20171231/20107175rHM5V3Da1v.png

從圖片上可以看到,topology.js 函式庫所提供的拓樸關係有三種 vertexedgeface ,分別就是 點拓樸邊拓樸面拓樸,其內建的拓樸資訊已經非常實用。

範例原始碼

https://github.com/QQBoxy/threecad/blob/master/client/example8/Viewer.js

附註

稍微說明一下筆者對於 topology.js 修正的部分:

  1. remove - 函數最尾數的計算問題,此問題為筆者過去實驗室的友人所發現並修正。
  2. var - 函數未進行宣告問題,部分的變數沒有設定好會導致Webpack包裝失敗。
  3. THREE - 過去建立 three.js 的方式是直接在html原始碼透過script標籤進行引入,而現在採用 module 的方式後並不會被引用進來,因此需要添加對 three 的依賴。
import * as THREE from 'three';
  1. module - 模組化拓樸函式庫,在現代的前端程式設計中,模組化已經是相當重要的一環,常見的 three.js 相關函式庫也都有做模組化的設計。
module.exports = TOPOLOGY;

後記

透過topology.js函式庫可以很簡單的創建拓樸結構,不過topology.js也並不是非常完整,如果還需要更完整的拓樸關係,可以再自行修改函式庫唷。


上一篇
Day 11 : 三角網格拓樸關係
下一篇
Day 13 : 射線法結合拓樸使用
系列文
在Three.js探索CAD的奧秘30

尚未有邦友留言

立即登入留言