Three.js碰撞檢測問題

Question

我正在製作一個簡單的遊戲，您可以在點擊大平面（地面）時在raycaster（鼠標）位置添加對象（立方體）。我不希望那些物體（立方體）可以放在彼此之間。我做了一個簡單的碰撞檢測。我知道這不是最好的辦法，但這是我明白我在做什麼的方式。我是一名初學者。

在下面的代碼中，我檢查兩個對象的位置。通過這些位置，我檢查它們之間的距離。如果距離小於4098（最大爲64 * 64），則將該對象添加到場景中。

function onDocumentMouseDown(event) { 
    event.preventDefault(); 
    mouse.x = (event.clientX/renderer.domElement.clientWidth) * 2 - 1; 
    mouse.y = - (event.clientY/renderer.domElement.clientHeight) * 2 + 1; 
    raycaster.setFromCamera(mouse, camera); 
    var intersects = raycaster.intersectObjects(clickObjects); 
    var intersects2 = raycaster.intersectObjects(objects); 
    if (intersects.length > 0) { // Clicking on the ground? 
     if (intersects2.length > 0) { // Clicking on an object? 
     }else{ 
      var geometry = new THREE.BoxGeometry(64, 64, 64); 
      var cube = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: 0xFBF5D7, opacity: 1 })); 
      cube.position.copy(intersects[0].point); 
      cube.position.y = 30; 
      cube.flipSided = true; 
      cube.doubleSided = true; 
      var validposition = true; 
      var i; 
      for (i = 0; i < objects.length; i++) { 
       var dx = cube.position.x - objects[i].position.x; 
       var dy = cube.position.y - objects[i].position.y; 
       var dz = cube.position.z - objects[i].position.z; 
       var distance = dx*dx+dy*dy+dz*dz; 
       if(distance < 4096) { 
        validposition = false; 
       } 
      } 
      if(validposition == true) { 
       objects.push(cube); 
       scene.add(cube); 
      } 
     } 
    } 
} 

問題是，這隻適用於它是一個方形對象。任何人都可以幫助我如何以這種方式來思考像THREE.BoxGeometry(64, 64, 400)這樣的矩形對象嗎？謝謝

Answer 1

我在前段時間提到過從C64開始重製青蛙遊戲。在那裏我必須控制我的青蛙與汽車沒有接觸。

var img1_x1 = parseInt(idImg.style.left); 
var img1_x2 = img1_x1 + idImg.width - 1; 
var img1_y1 = parseInt(idImg.style.top); 
var img1_y2 = img1_y1 + idImg.height - 1; 

img2_x1 = parseInt(idImg2.style.left); 
img2_x2 = img2_x1 + idImg2.width - 1; 
img2_y1 = parseInt(idImg2.style.top); 
img2_y2 = img2_y1 + idImg2.height - 1; 

if (((img2_x1 <= img1_x2 && img1_x2 <= img2_x2) || (img2_x1 <= img1_x1 && img1_x1 <= img2_x2) || (img1_x1 <= img2_x1 && img2_x1 <= img1_x2)) 
    && ((img2_y1 <= img1_y2 && img1_y2 <= img2_y2) || (img2_y1 <= img1_y1 && img1_y1 <= img2_y2) || (img1_y1 <= img2_y1 && img2_y1 <= img1_y2))) 
{ 
    alert('boom'); 
} 

看看我的代碼，也許有一些有用的東西給你。我首先計算我的青蛙（img1）的位置，然後對所有測試對象（這裏不顯示）使用for-loop。在這個循環中，我計算對象的位置（img2），然後我控制重疊。
你必須添加第三維到我不需要的條件。

說明：對於img2我不在我的for循環中使用var我在函數外部聲明它。

我在這裏複製了我的代碼中的幾個部分，並切斷了易混淆的部分。