iT邦幫忙

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

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

Day 13 : 射線法結合拓樸使用

前言

學了這麼多方法,到底該怎麼用呢? 本次提供一個簡單的例子,點選完網格後除了在網格上畫上一個小球,還會再透過拓樸關係找到相鄰的邊,並在邊上畫上一個小球。

如何找邊?

本文先假設只有一個物體,需要從點選的面拓樸資料結構,逐步去找到週邊的點與邊線資料。

取得faceID方法一

首先得到點選到的面 faceID 值,特別注意到的是當前採用的是 BufferGeometry ,在 three.js 的資料結構中,faceIndex 是直接取用 faceaid 值作為 faceIndex 的,因此會有3倍數的跳號,所以這裡我們要記得除以 3

var faceID = self.intersects[0].faceIndex / 3;

取得faceID方法二

既然知道 faceIndex 是直接取用 a 值的,當然也可以直接找到 a 點的 vertex 資訊,其 faceIDs 根據排列恰好就是第 0 筆資料,不過這個方法遇到拓樸資料結構改變時,就要特別注意到是否有排序被調換的問題。

var faceIndex = self.intersects[0].faceIndex;
var faceID = self.topologys[0].vertex[faceIndex].faceIDs[0];

取得edges資料

得到 faceID 之後就可以直接由面拓樸資料直接取得 face 的所有資訊,

var face = self.topologys[0].face[faceID];
var edges = face.edgeIDs;

畫三個小球

在找到邊以後,可以從邊拓樸中內建的邊中心資訊找到球心座標,再使用先前所教的畫小球方法,就能簡單的在邊上畫上三顆球囉,如下圖:

for (var i=0;i<edges.length;i++) {
    var center = self.topologys[0].edge[edges[i]].center;
    var geometry = new THREE.SphereBufferGeometry(0.2, 16, 16);
    var material = new THREE.MeshPhongMaterial({
        color: 0x00ff00
    });
    var mesh = new THREE.Mesh(geometry, material);
    
    mesh.position.copy(center);
    self.scene.add(mesh);
    self.meshs.push(mesh);
}

https://ithelp.ithome.com.tw/upload/images/20180101/20107175jwD4V2T1fk.png
在網格上點選畫紅球並在邊上產生綠色小球

範例原始碼

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

後記

這週恰逢連假寫得比較匆促,但我們還是透過這一個簡單的範例,學會如何使用拓樸關係來完成我們想要做的事情,接下來會再繼續依賴拓樸關係建立一些有趣的應用,一起加油吧!


上一篇
Day 12 : Three.js建立三角網格拓樸
下一篇
Day 14 : 提升設計環境
系列文
在Three.js探索CAD的奧秘30

尚未有邦友留言

立即登入留言