Three.js衝突検出の問題

Question

大きなプレーン（地面）をクリックしたときに、レイキャスター（マウス）の位置にオブジェクト（立方体）を追加できる簡単なゲームを作っています。私はそのオブジェクト（立方体）をお互いに置くことはできません。私は単純な衝突検出を行った。これを行うにはこれが最善の方法ではないことは分かっていますが、これは私がやっていることを理解する方法です。私は初心者です。

次のコードでは、両方のオブジェクトの位置を確認します。これらの位置で私はそれの間の距離をチェックする。距離が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からfroggerゲームのリメイクをしばらく前に書きました。私はカエルが車に接触していないことをコントロールしなければなりませんでした。

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ループを使用します。このループでは、オブジェクト（img2）の位置を計算し、その後、重なりを制御します。
私が必要としなかった条件に第3の次元を加えなければなりませんでした。

注：私はforループでvarを使用しませんが、関数内で宣言しました。

ここで私のコードからいくつかのセクションだけをコピーし、混乱する部分をカットしました。