Javascript Three.js碰撞检测问题

Javascript Three.js碰撞检测问题,javascript,three.js,collision-detection,Javascript,Three.js,Collision Detection,我正在做一个简单的游戏,当你点击一个大平面(地面)时,你可以在光线投射器(鼠标)位置添加对象(立方体)。我不希望对象(立方体)可以相互放置。我做了一个简单的碰撞检测。我知道这不是最好的方式,但这是我理解我在做什么的方式。。我是初学者 在下面的代码中,我检查两个对象的位置。通过这些位置,我检查它之间的距离。如果距离小于4098(即64*64),则会将对象添加到场景中 function onDocumentMouseDown( event ) { event.preventDefault()

我正在做一个简单的游戏,当你点击一个大平面(地面)时,你可以在光线投射器(鼠标)位置添加对象(立方体)。我不希望对象(立方体)可以相互放置。我做了一个简单的碰撞检测。我知道这不是最好的方式,但这是我理解我在做什么的方式。。我是初学者

在下面的代码中,我检查两个对象的位置。通过这些位置,我检查它之间的距离。如果距离小于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);
            }
        }
    }
}
函数onDocumentMouseDown(事件){
event.preventDefault();
mouse.x=(event.clientX/renderer.domElement.clientWidth)*2-1;
mouse.y=-(event.clientY/renderer.domElement.clientHeight)*2+1;
raycaster.setFromCamera(鼠标、相机);
var intersects=raycaster.intersectObjects(单击对象);
var intersects2=光线投射器。intersectObjects(对象);
如果(intersects.length>0){//在地面上单击?
如果(intersects2.length>0){//单击对象?
}否则{
var geometry=新的三个.BoxGeometry(64,64,64);
var cube=new THREE.Mesh(几何体,new THREE.MeshBasicMaterial({颜色:0xFBF5D7,不透明度:1}));
cube.position.copy(与[0]点相交);
立方体位置y=30;
cube.flipside=true;
cube.doubleside=true;
var validposition=真;
var i;
对于(i=0;i

问题是,这仅在它是方形对象时有效。有谁能帮我想一想,对于像THREE.BoxGeometry(64,64,400)
这样的矩形对象,我是如何思考的?

我不久前写了一个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');
}
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.高度-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;

如果((img2_-x1我不久前写了一部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');
}
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.高度-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)谢谢。这个例子真的很有帮助。我了解你做了什么。我尝试使用这段代码。现在我想知道如何使用parseInt(cube.style.left);用于我的对象谢谢。这个例子真的很有帮助。我了解你做了什么。我尝试使用这段代码。现在我想知道如何使用parseInt(cube.style.left);用于我的对象