Web3D編程總結——3D碰撞檢測初探

来源:http://www.cnblogs.com/ljzc002/archive/2016/02/05/5182709.html
-Advertisement-
Play Games

自己動手寫一個方法比分析他人的寫的方法困難很多，由此而來的對程式的進一步理解也是分析別人的代碼很難得到的。 一、先來幾張效果圖： 1、場景中有兩個半徑為1的球體，藍色線段從球心出髮指向球體的“正向” 2、物體被選中後改變紋理圖片和透明度，可以使用“w、s、a、d、空格、ctrl”控制物體相對於物體的


自己動手寫一個方法比分析他人的寫的方法困難很多，由此而來的對程式的進一步理解也是分析別人的代碼很難得到的。

一、先來幾張效果圖：

1、場景中有兩個半徑為1的球體，藍色線段從球心出髮指向球體的“正向”

2、物體被選中後改變紋理圖片和透明度，可以使用“w、s、a、d、空格、ctrl”控制物體相對於物體的正向“前、後、左、右、上、下”移動，按住按鍵時間越長移動速度越快，綠色線段由球心指向物體運動方向，速度越快露出物體錶面的部分越長，按“g”停止所有移動，再次點擊物體取消選中狀態。

3、可以選取多個物體同時移動。

4、兩物體發生碰撞後停止移動，紅色線段由物體球心指向運動方向上遇到的第一個其他物體

 二、碰撞檢測原理：

借用THREE.Raycaster來進行碰撞檢測，因為Raycaster不能檢測到物體的“內錶面”，所以使用反射法。

三、程式實現：

完整程式代碼可以在http://files.cnblogs.com/files/ljzc002/App2.zip下載查看，其中包括詳細註釋，這裡解釋一下幾個比較重要的段落。

1、繪製示意物體運動情況的線段

1 this.line1;//自有方向線
2 this.line2;//運動方向線
3 this.line3;//碰撞檢測線
4 var vector2=this.v0.clone().multiplyScalar(2).add(this.object3D.position);//通過向量算出線段的結束點
5 this.line1=this.createLine2(this.object3D.position,vector2,0x0000ff,this.planetGroup,"line1");//物體在水平方向的朝向線
6 this.line2=this.createLine2(this.object3D.position,this.object3D.position,0x00ff00,this.planetGroup,"line2");
7 this.line3=this.createLine2(this.object3D.position,this.object3D.position,0xff0000,this.planetGroup,"line3");

 其中點vector2由向量v0乘以2加上this.object3D.position得到，作為直線line1的結束點。註意v0後的“.clone()”如果去掉則v0本身也會應用這些變化，最終變得與vector2相同。

line2和line3被初始化為一個點。

這裡建立的“line”對象並沒有碰撞檢測功能，純粹是用來看的。 

 1 if (this.speedw != 0 || this.speeda != 0||this.speedc!=0)
 2 {//如果物體在某個方向有速度
 3     var vector4=new THREE.Vector3(0,this.speedc*1000,0);
 4     var vector3=(this.v1.clone().multiplyScalar(this.speeda*1000)).add(this.v0.clone().multiplyScalar(this.speedw*1000)).add(vector4);
 5     var vector5=vector3.clone().normalize().multiplyScalar(this.size);
 6     this.vector3=vector3.clone().add(vector5);
 7     this.updateLine2(this.line2.uuid,new THREE.Vector3(0,0,0),this.vector3,0x00ff00);//從物體質心向物體運動方向，做一條長度和速度成正比的線段
 8     //line2是planetGroup的子元素，它本身就會和this.object3D.position一起移動，如果再加上一個this.object3D.position就重覆了，
 9     //這個也是某種意義上的“相對運動”
10     this.testCollision();//碰撞檢測
11     //檢測無誤後，最終確定下一幀位置
12     if(this.flag_coll==0) //沒有發生碰撞
13     {
14         this.object3D.position.add(this.v0.clone().multiplyScalar(this.speedw));
15         this.object3D.position.add(this.v1.clone().multiplyScalar(this.speeda));
16         this.object3D.position.y += this.speedc;//直接使用等號會設置失敗！！
17     }
18     else
19     {
20         this.speeda=0;
21         this.speedc=0;
22         this.speedw=0;
23         this.flag_coll=0;//重置為沒有發生碰撞的狀態
24         currentlyPressedKeys[65]=false;
25         currentlyPressedKeys[68]=false;
26         currentlyPressedKeys[87]=false;
27         currentlyPressedKeys[83]=false;
28         currentlyPressedKeys[32]=false;
29         currentlyPressedKeys[17]=false;
30     }
31 }

 根據物體的運動情況更新line2的方向和長度。在這裡vector3由物體在各個方向上的速度分量組合而成，vector5負責把vector3調整為適合顯示的長度，this.vector3和vector3是不同的對象，表示line2一個端點的位移。

updateLine2更新line2的端點，表現出速度的變化。我們可以看到它的兩個端點位置參數是（0,0,0）和一個向量而不是前面圖中的球心位置和“球心位置加向量得到的點”，這體現出了Three.js父子物體間的相對性。（簡單的碰撞示例原本不需要使用子物體，我是不是自討苦吃？）

該示例延續自上一篇中的太陽系模型，物體間的關係如下圖：

planetOrbitGroup和planetGroup是“Object3D”對象，這種“物體”沒有大小、顏色屬性只有位置和姿態屬性（預設位於父物體的原點），“Mesh”和“Line”多重繼承於Object3D具有頂點（geometry）、紋理（material）屬性。

planetOrbitGroup是Scene的子物體位於世界坐標系原點，planetGroup是planetOrbitGroup的子物體強制定位於世界坐標系x=3處，globeMesh和line2是planetGroup的子物體預設位於planetGroup的原點。

當planetOrbitGroup移動時（改變this.object3D.position），這個移動效果會被它所有的後代對象繼承，所以我們把line2的一個頂點設為（0,0,0）後會自動繼承它所有祖先元素的移動效果（this.object3D.position+（3,0,0））。

2、基於射線的碰撞測試

1 var raycaster= new THREE.Raycaster(this.planetGroup.position.clone().add(this.object3D.position),this.vector3.clone().normalize());//從物體中心向實際移動方向發出一條射線
2 raycaster.far=this.object3D.inter_length;//射線“長度”
3 var intersects = raycaster.intersectObjects(scene.children,true);

建立第一條射線，與前面的線段不同，這裡的射線是數學意義上的射線，它不是一個物體也無法被渲染出來。因為它不是任何物體的子物體，所以raycaster的端點位置取世界坐標而非相對坐標，註意和前面同樣位置的線段端點的不同。

因為我們使用了子物體，所以intersectObjects的第二個參數必須設為true以強制檢查每一個子物體，否則raycaster只會檢查第一個參數這一層的物體而忽略掉globeMesh。

 1      if ( intersects.length > 0 ) {
 2         var flag_safe=0;//應該可以省掉這個變數
 3         //安然走完下麵的迴圈說明，在碰撞區內沒有任何其他物體
 4         for(var i=0;i<intersects.length;i++)
 5         {
 6             //規定碰撞的物體必須是可見的，必須是有面的，必須不是原物體，必須在碰撞檢測範圍以內（其實是因為射線穿過子物體結果的不確定性）
 7             if (intersects[i].object.visible && intersects[i].face&&(this.object3D.inter_group!=intersects[i].object.inter_group)&&intersects[i].distance<this.object3D.inter_length) {
 8 
 9                 var intersected = intersects[i];
10                 this.updateLine2(this.line3.uuid,new THREE.Vector3(0,0,0),intersected.point.clone().sub(this.planetGroup.position.clone().add(this.object3D.position)),0xff0000);//碰撞檢測線

前面提到raycaster無法檢測到物體的內錶面，但在涉及到子物體檢測時，這一命題變得不確定了，所以要加上更多的判斷條件（這是不是自己坑自己。。。）

 1                 var raycaster2= new THREE.Raycaster(intersected.point,this.vector3.clone().negate().normalize());//射線與物體相交後反射回來
 2                 raycaster2.far=this.object3D.inter_length;
 3                 var intersects2 = raycaster2.intersectObjects(scene.children,true);
 4                 //既然已經碰到了別的物體，就必須反射回原物體，才能保證不碰撞（反射回原物體另一面的情況由碰撞邊界值剔除）
 5                 if ( intersects2.length > 0 )
 6                 {
 7                     flag_safe=1;
 8                     for(var j=0;j<intersects2.length;j++)
 9                     {
10                         if (intersects2[j].object.visible && intersects2[j].face&&(intersected.object.inter_group!=intersects2[j].object.inter_group)&&intersects2[j].distance<this.object3D.inter_length)
11                         {
12                             if(intersects2[j].object.inter_group==this.object3D.inter_group)//inter_group屬性相同，返回了原物體
13                             {
14                                 flag_safe=0;//沒有發生碰撞
15                             }
16                             break;
17                         }
18                     }
19                     if(flag_safe==1)
20                     {
21                         this.flag_coll = 1;
22                     }
23                 }

這裡的邏輯還不夠優雅，下次再調整吧

四、優化方向：

1、現在的“3D碰撞檢測”實現了最簡單情況下的碰撞檢測，但演算法仍具有很大的局限性，比如這種情況下，碰撞檢測射線永遠無法穿過其他物體：

對此我想到的解決方法是：

將raycaster擴充為檢測方向上的多條平行射線來檢測物體邊緣碰撞的情況，而這需要用到線性代數的相關知識，需再複習一下。

2、在沒有設置半透明的情況下運行，可能會發生物體重疊但沒有判斷碰撞的情況，懷疑是因為我採用的是“先碰撞後檢測”的方法，Three.js認為重疊部分的圖元不需要繪製將其自動捨棄，導致射線檢測不到重疊部分。

 五、擴展：

昨天發現美國前輩Lee Stemkoski的Three.js示例展示了另一種碰撞檢測方法，和我的方法相比各有優缺點

演示地址：http://stemkoski.github.io/Three.js/Collision-Detection.html

核心代碼：

 1     for (var vertexIndex = 0; vertexIndex < MovingCube.geometry.vertices.length; vertexIndex++)
 2     {        
 3         var localVertex = MovingCube.geometry.vertices[vertexIndex].clone();
 4         var globalVertex = localVertex.applyMatrix4( MovingCube.matrix );
 5         var directionVector = globalVertex.sub( MovingCube.position );
 6         
 7         var ray = new THREE.Raycaster( originPoint, directionVector.clone().normalize() );
 8         var collisionResults = ray.intersectObjects( collidableMeshList );
 9         if ( collisionResults.length > 0 && collisionResults[0].distance < directionVector.length() ) 
10             appendText(" Hit ");
11     }

該方法從物體的中心向物體的每一個頂點做一條碰撞檢測射線，如果碰到第一個物體的碰撞點到物體中心的距離小於物體中心到該頂點的距離，則認為發生碰撞。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 原型模式★★★☆☆
    一、什麼是原型模式 通過複製一個已存在對象來生成一個新對象，被覆制的對象稱為原型； 二、補充說明 1、JAVA中Object的clone方法已經為什麼提供了複製對象的實現，且該方法為本地方法，性能好，在需要大量複製對象的情況，使用clone創建對象比new效率高； 補充下深拷貝和淺拷貝，深拷貝是通過
  • 單例模式★★★★☆
    一、什麼是單例模式 一個類只有一個全局實例 二、補充說明 一般把其構造方法設為私有，另外提供一個可以獲取該實例的靜態方法； 由於java存在反射機制，即使是私有構造方法，也能被外部創建，所以一般的寫法嚴格來講不屬於單例模式；（ps：可以在構造方法內加個靜態flag標誌判斷，保證其只能創建一次） 違背
  • HTML 多媒體
    1、多媒體簡介 Web 上的多媒體指的是音效、音樂、視頻和動畫，多媒體有多種不同的格式，它可以是聽到或看到的任何內容，文字、圖片、音樂、音效、錄音、電影、動畫等等。在互聯網上，幾乎在所有網站都能發現嵌入網頁中的多媒體元素，現代瀏覽器已支持多種多媒體格式。 第一代瀏覽器只支持文本，而且即使是對文本的支
  • 【jQuery基礎學習】12 jQuery學習感想
    學習完《鋒利的jQuery》，用時13天。 這期間，私底下又用了一點時間去W3C上把HTML和CSS重新過了一遍。 總的來說，收穫還是蠻多的。 其實在本書裡面真正重要的也就前幾章，後面的都是一些插件什麼的。這些W3C上面都有。 當然我自己感覺第11章，也就是jQuery的簡單性能優化，雖然少了點，但
  • JQuery里的原型prototype分析
    在 JavaScript 中，每個函數對象都有一個預設的屬性 prototype，稱為函數對象的原型成員，這個屬性指向一個對象，稱為函數的原型對象，當我們每定義了一個函數的時候，JavaScript 就創建了一個對應的原型對象，也就是說，當我們定義一個函數的時候，實際上得到了兩個對象，一個函數對象，
  • Javascript的匿名函數與自執行
    函數是JavaScript中最靈活的一種對象，這裡只是講解其匿名函數的用途。匿名函數：就是沒有函數名的函數。 函數的定義，大致可分為三種方式： 第一種：這也是最常規的一種 1 2 3 function double(x){ return 2 * x; } 第二種：這種方法使用了Function構造函
  • 【jQuery基礎學習】11 jQuery性能簡單優化
    關於性能優化 合適的選擇器 $("#id")會直接調用底層方法，所以這是最快的。如果這樣不能直接找到，也可以用find方法繼續查找 $("p")標簽選擇器也是直接調用底層方法，所以是第二選擇 $(".class")也是直接調用底層方法，不過IE8及更早版本不支持getElementByClassNa
  • 文本換行word-wrap、word-break與white-space
    本文同步至微信公眾號：http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401671055&idx=1&sn=b88c986e61708da0027fac035ad36f0f#rd 對於後續文章感興趣的可以添加關註： 文中有些地方沒顯示全，查看
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類