Three-mesh-bvh shapecast函式

更新於 2024/10/15閱讀時間約 6 分鐘

前情提要

Three-mesh-bvh套件加速搜尋原理簡介這篇文章介紹Three-mesh-bvh套件加速搜尋的原理,且該文提到判斷兩個模型是否相交的功能,只需簡單呼叫Three-mesh-bvh套件提供的函式即可實現。

利用shapecast函式參與過濾的過程

raw-image


shapecast讓我們能參與加速搜尋的過程,如果有更進階的需求,例如想找出所有相交的點,可以通過shapecast函式實作。

附上Demo鏈接:Three-mesh-bvh shapecast demo




// 一些參數、函式資訊資訊不完整,完整版可參考上方Demo鏈接

// 準備參數
const tempPoint = new THREE.Vector3();
const { frogMesh, staticMesh } = Editor;
const frogGeometry = frogMesh.geometry;
const frogIndexAttr = frogGeometry.index;
const staticGeometry = staticMesh.geometry;
const staticGeometryRelativeMatrix = staticMesh.matrix.clone().multiply(frogMesh.matrix.clone().invert());
const staticMeshRelativeBox = staticGeometry.boundingBox.clone().applyMatrix4(staticGeometryRelativeMatrix);

// 利用shapecast,找出frogMesh與staticMesh所有相交的點
const intersectPointSet = new Set();
frogGeometry.boundsTree.shapecast({
  // 持續細分有相交的包圍框
  intersectsBounds: (box) => {
    if (!box.intersectsBox(staticMeshRelativeBox)) return NOT_INTERSECTED;
    return INTERSECTED;
  },
  // 分別判斷三角形三個點是否在staticMesh內,是就收集到intersectPointSet內
  intersectsTriangle: (triangle, triIndex) => {
    if (!triangle.intersectsBox(staticMeshRelativeBox)) return false;
    if (checkIfMeshIncludePoint(staticMesh, tempPoint.copy(triangle.a).applyMatrix4(frogMesh.matrix)))
      intersectPointSet.add(frogIndexAttr.getX(triIndex * 3));
    if (checkIfMeshIncludePoint(staticMesh, tempPoint.copy(triangle.b).applyMatrix4(frogMesh.matrix)))
      intersectPointSet.add(frogIndexAttr.getX(triIndex * 3 + 1));
    if (checkIfMeshIncludePoint(staticMesh, tempPoint.copy(triangle.c).applyMatrix4(frogMesh.matrix)))
      intersectPointSet.add(frogIndexAttr.getX(triIndex * 3 + 2));
  },
});

intersectsBounds方法可以遍歷bvh逐漸細分的包圍框

  1. 回傳NOT_INTERSECTED,則不會繼續細分這個包圍框。
  2. 回傳INTERSECTED,則繼續細分該包圍框。
  3. 回傳CONTAINED,則只細分該包圍框,其他的就不管了。
    1. 如果只想簡單判斷某個點與模型是否相交,可以使用CONTAINED繼續細分這個包圍框。
    2. 如果你想收集兩個模型相交的所有三角形,這個就不適合,因為可能其他包圍框也有相交。

intersectsRange方法,在遍歷到最小包圍框後,會遍歷裡面的一組三角形

  1. 回傳true代表這組三角形符合條件,結束shapecast函式。
  2. 如果想收集三角形,可以不傳入該函式,直接到下一步intersectsTriangle遍歷所有三角形。

intersectsTriangle方法遍歷子包圍框內所有三角形

  1. 回傳true代表這個三角形符合條件,結束shapecast函式。
  2. 如果想收集三角形就回傳false,在此收集符合條件的三角形
avatar-img
4會員
9內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
s_SoNg的沙龍 的其他內容
bvh是一種樹狀結構,會為模型建立很多層由大到小的包圍框 常用來加速尋找符合條件的網格,可快速判斷是否與另一個模型相交、快速找最近點等 本文會簡單介紹用Three-mesh-bvh套件快速判斷兩個模型是否相交的原理
在網路速度有限的情況下,依序記錄不斷產生的資訊,能統計使用者在頁面上操作了哪些功能。
ThreeJS ArcballControl呼叫update方法後,視角被翻轉問題的解決記錄
setter和getter能把狀態改變時需做的事情包裝起來,讓外部只需簡單修改參數就能達到預想的效果
在程式任何地方都能修改各種react組件狀態的做法分享
網格擴散可以就像剪紙一樣,把紙上想要的部分剪下來。 通過模型的一個點,找到周圍相鄰的點;其他點又能找到周圍相鄰的點,就像水波一樣擴散出去。 許多3D的算法,如裁切、干涉深度偵測等都會用到。
bvh是一種樹狀結構,會為模型建立很多層由大到小的包圍框 常用來加速尋找符合條件的網格,可快速判斷是否與另一個模型相交、快速找最近點等 本文會簡單介紹用Three-mesh-bvh套件快速判斷兩個模型是否相交的原理
在網路速度有限的情況下,依序記錄不斷產生的資訊,能統計使用者在頁面上操作了哪些功能。
ThreeJS ArcballControl呼叫update方法後,視角被翻轉問題的解決記錄
setter和getter能把狀態改變時需做的事情包裝起來,讓外部只需簡單修改參數就能達到預想的效果
在程式任何地方都能修改各種react組件狀態的做法分享
網格擴散可以就像剪紙一樣,把紙上想要的部分剪下來。 通過模型的一個點,找到周圍相鄰的點;其他點又能找到周圍相鄰的點,就像水波一樣擴散出去。 許多3D的算法,如裁切、干涉深度偵測等都會用到。
你可能也想看
Google News 追蹤
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
CSS 盒模型是理解和設計網頁佈局的核心概念。它包括元素的內容、填充、邊框和外邊距。
Thumbnail
各位使用 Vue.js 開發的小夥伴們,你們都怎麼實作父子層組件資料的雙向綁定呢?如果你還在寫 prop + emit 的話,不妨進來看看吧。
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
※ 視圖模板 視圖模板(View Templates) 是在 MVC 架構中負責展示數據的 HTML 文件,包含模板語法,用於在渲染時插入實際數據。它們的主要目的是分離數據與展示邏輯,讓代碼更加模塊化和易於維護。 視圖模板設計和使用的核心理念,就是「重複的事情不要重複做、效益最大化、有效利用資源
Thumbnail
在網路速度有限的情況下,依序記錄不斷產生的資訊,能統計使用者在頁面上操作了哪些功能。
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
我們在實作中,難免會遇到在不同組件中,卻有需求相同的資料格式,因此 mixins 可以達到我們的需求,除了 data 以外也包含了 methods 可以共用,舉例來說,學生資料可能會在,班級跟社團內被使用,當我們要撰寫元件時,就可以省略多餘的 data 定義。
Thumbnail
Request內容 package main import ( "fmt" "log" "net/http" "strings" ) func request(w http.ResponseWriter, r *http.Request) { //這些資訊是輸出到伺服器端的列印訊息
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
CSS 盒模型是理解和設計網頁佈局的核心概念。它包括元素的內容、填充、邊框和外邊距。
Thumbnail
各位使用 Vue.js 開發的小夥伴們,你們都怎麼實作父子層組件資料的雙向綁定呢?如果你還在寫 prop + emit 的話,不妨進來看看吧。
Thumbnail
※ 原本狀態:伺服器渲染 這是 MVC 架構下的 request / response 示意圖,在這張圖呈現的架構裡,畫面和資料都由同一個架構處理。 伺服器渲染流程: 瀏覽器針對特定網址送出請求。 路由器解析請求後,轉接給對應的 controller。 controller 按照要求,透過
Thumbnail
※ 視圖模板 視圖模板(View Templates) 是在 MVC 架構中負責展示數據的 HTML 文件,包含模板語法,用於在渲染時插入實際數據。它們的主要目的是分離數據與展示邏輯,讓代碼更加模塊化和易於維護。 視圖模板設計和使用的核心理念,就是「重複的事情不要重複做、效益最大化、有效利用資源
Thumbnail
在網路速度有限的情況下,依序記錄不斷產生的資訊,能統計使用者在頁面上操作了哪些功能。
Thumbnail
平常我們在 html 上常看到的例如 v-for、v-model 等等... 也是VUE已經幫我們定義好的指令,而這次我們可以依這自己的需求來建立。 此功能屬於較進階的功能,因此實戰中會比較少見,市面上還是有不少完善的套件能達到同樣效果,建議可以先往這方面察找
Thumbnail
我們在實作中,難免會遇到在不同組件中,卻有需求相同的資料格式,因此 mixins 可以達到我們的需求,除了 data 以外也包含了 methods 可以共用,舉例來說,學生資料可能會在,班級跟社團內被使用,當我們要撰寫元件時,就可以省略多餘的 data 定義。
Thumbnail
Request內容 package main import ( "fmt" "log" "net/http" "strings" ) func request(w http.ResponseWriter, r *http.Request) { //這些資訊是輸出到伺服器端的列印訊息