前言

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

如何找邊?

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

取得faceID方法一

首先得到點選到的面 faceID 值，特別注意到的是當前採用的是 BufferGeometry ，在 three.js 的資料結構中，faceIndex 是直接取用 face 中 a 的 id 值作為 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://github.com/QQBoxy/threecad/blob/master/client/example9/Viewer.js

後記

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