Three-mesh-bvh shapecast函式

更新於 發佈於 閱讀時間約 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
大家好,我是woody,是一名料理創作者,非常努力地在嘗試將複雜的料理簡單化,讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程,今天想跟大家聊聊,除了料理本身,料理創作背後的成本。
Thumbnail
哈囉~很久沒跟各位自我介紹一下了~ 大家好~我是爺恩 我是一名圖文插畫家,有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快!隨著時間過去,創作這件事好像變得更忙碌了,也很開心跟很多厲害的創作者以及廠商互相合作幫忙,還有最重要的是大家的支持與陪伴🥹。  
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
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
大家好,我是woody,是一名料理創作者,非常努力地在嘗試將複雜的料理簡單化,讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程,今天想跟大家聊聊,除了料理本身,料理創作背後的成本。
Thumbnail
哈囉~很久沒跟各位自我介紹一下了~ 大家好~我是爺恩 我是一名圖文插畫家,有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快!隨著時間過去,創作這件事好像變得更忙碌了,也很開心跟很多厲害的創作者以及廠商互相合作幫忙,還有最重要的是大家的支持與陪伴🥹。  
Thumbnail
嘿,大家新年快樂~ 新年大家都在做什麼呢? 跨年夜的我趕工製作某個外包設計案,在工作告一段落時趕上倒數。 然後和兩個小孩過了一個忙亂的元旦。在深夜時刻,看到朋友傳來的解籤網站,興致勃勃熬夜體驗了一下,覺得非常好玩,或許有人玩過了,但還是想寫上來分享紀錄一下~
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) { //這些資訊是輸出到伺服器端的列印訊息