THREEjs BufferGeometry網格擴散

網格擴散可以做什麼？

網格擴散可以想剪紙一樣，把紙上想要的部分剪下來。

許多3D的算法，如裁切、干涉深度偵測等都會用到。

網格擴散的本質是什麼？

本質是通過模型的一個點，找到周圍相鄰的點；其他點又能找到周圍相鄰的點，就像水波一樣擴散出去。

通常會框定一個封閉邊界來找出邊界內所有點；或者只擴散一點點來加大選定的範圍。

如何做到網格擴散？

• 轉換positionAttribute結構，bufferGeometry的positionAttribute資訊無法直接得知任意一點周圍的點，我們需要事先手動轉換：

const buildPointMap = (geometry) => {
  const index = geometry.getIndex();
  const posAttr = geometry.getAttribute("position");

  const tempPoint = new THREE.Vector3();
  const points = {};
  for (let i = 0; i < index.count; i++) { //按順序遍歷所有的三角形的所有點
    const triIndex = Math.floor(i / 3); //獲得該點所在的三角形的索引
    const posIndex = index.getX(i);//獲得該點的索引

    const point = tempPoint.fromBufferAttribute(posAttr, posIndex);//獲得點坐標
    const key = vec2PosKey(point);//把點坐標轉成字串，後續作為key來對應資訊

		//每個坐標的key，對應用到這個坐標的點索引和三角形索引
    if (points[key]) {
      points[key].triIndices.push(triIndex);
      points[key].posIndices.push(posIndex);
      continue;
    }

    points[key] = { triIndices: [triIndex], posIndices: [posIndex] };
  }

  return points;
};

• 視需求擬定擴散邊界
• 擬定種子點

demo鏈接：

BufferGeometry網格擴散 - StackBlitz

參考資料：

javascript - ThreeJS: Find neighbor faces in PlaneBufferGeometry - Stack Overflow