Three.js Kollisionserkennungsproblem

Question

Ich mache ein einfaches Spiel, wo Sie Objekte (Würfel) an der Raster (Maus) Position hinzufügen können, wenn Sie auf eine große Ebene (Boden) klicken. Ich möchte nicht, dass Objekte (Würfel) ineinander gelegt werden können. Ich machte eine einfache Kollisionserkennung. Ich weiß, dass dies nicht der beste Weg ist, aber so verstehe ich, was ich tue. Ich bin ein Anfänger.

Im folgenden Code überprüfe ich die Positionen beider Objekte. Mit diesen Positionen überprüfe ich den Abstand zwischen ihnen. Wenn die Entfernung kleiner als 4098 ist (also 64 * 64), fügen Sie das Objekt zur Szene hinzu.

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); 
      } 
     } 
    } 
} 

Das Problem ist, dass dies nur funktioniert, wenn es ein quadratisches Objekt ist. Kann mir jemand helfen, wie ich in welcher Weise für ein Rechteck-Objekt wie THREE.BoxGeometry(64, 64, 400) denken kann? Danke

Answer 1

Ich schrieb vor einiger Zeit ein Remake des Frogger-Spiels von C64. Dort musste ich kontrollieren, dass mein Frosch keinen Kontakt zu den Autos hat.

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'); 
} 

Schauen Sie sich meinen Code an, vielleicht gibt es etwas Nützliches für Sie. Ich berechne zuerst die Position meines Frosches (img1) und verwende dann eine For-Schleife über alle meine Testobjekte (hier nicht angezeigt). In dieser Schleife berechne ich die Position für das Objekt (img2) und hinterher steuere ich die Überlappung.
Sie mussten den Bedingungen, die ich nicht benötigte, die dritte Dimension hinzufügen.

Hinweis: Für img2 benutze ich nicht die var in meiner for-Schleife Ich erklärte es draußen in der Funktion.

Ich habe hier nur ein paar Abschnitte aus meinem Code kopiert und verwirrende Teile abgeschnitten.