I'm making a simple game where you can add objects(cubes) at the raycaster(mouse) position when you click on a big plane(ground). I don't want that objects(cubes) can placed in each other. I made a simple collision detection. I know this isn't the best way to do this, but this is the way I understand what I'm doing.. I am a beginner.
In the following code I check the positions of both objects. With these positions I check the distance between it. If the distance is smaller than 4098(which is 64*64) it add the object to the scene.
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);
}
}
}
}
The problem is that this only works when it is a square object. Can anyone help me how I can think in which way for a rectangle object like THREE.BoxGeometry( 64, 64, 400)
?
I wrrote some time ago a remake of the frogger game from C64. There I had to control that my frog has no contact to the cars.
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');
}
Look at my code perhaps there is something usefull for you. I first calculate the position of my frog (img1) and than use a for-loop over all my test-objects (here not displayed). In this loop I calculate the position for the object (img2) and afterwards I make the control of overlapping.
You had to add the third dimension to the conditions which I didn'tz needed.
Note: For img2 I don't use the var in my for-loop I declared it outside in the function.
I copied here only a few sections from my code and cut off confusing parts.