Currently, I am tackling the challenge of detecting 3D AABB collisions between a box and a sphere.
An interesting observation: when a box is directly added to the scene, collisions are detected successfully. However, when the box is added to a group (THREE.Group) and rotated, collisions are not being detected.
Below is the code snippet used to add a box:
function addPlatforms() {
var coreGroup = new THREE.Group(); // this is the group
scene.add(coreGroup);
var box = [];
cube_box1 = new THREE.Box3(new THREE.Vector3(), new THREE.Vector3());
box.push(new THREE.Mesh(new THREE.BoxGeometry(1, 1, 0.2), materials.solid));
box[0].position.set(-1.83, -0.22, 1.11);
box[0].rotation.x += Math.PI / 2;
box[0].rotation.z -= 0.78;
box[0].receiveShadow = true;
cube_box2 = new THREE.Box3(new THREE.Vector3(), new THREE.Vector3());
box.push(new THREE.Mesh(new THREE.BoxGeometry(1, 1, 0.2), materials.solid));
box[1].position.set(-2.15, -0.22, 0.51);
box[1].rotation.x += Math.PI / 2;
box[1].receiveShadow = true;
var platGroup = new THREE.Group();
platGroup.add(box[0]);
platGroup.add(box[1]);
platGroup.rotation.y -= 2;
platGroup.position.y = 1;
coreGroup.add(platGroup);
cube_box1.setFromObject(box[0]);
platformArr.push(cube_box1);
cube_box2.setFromObject(box[1]);
platformArr.push(cube_box2);
}
The code used to check for collision between a box and a sphere:
For detailed information on 3D collision detection with THREE.js, visit https://developer.mozilla.org/en-US/docs/Games/Techniques/3D_collision_detection/Bounding_volume_collision_detection_with_THREE.js
THREE.Sphere.__closest = new THREE.Vector3();
THREE.Sphere.prototype.intersectsBox = function(box) {
// get box closest point to sphere center by clamping
THREE.Sphere.__closest.set(this.center.x, this.center.y, this.center.z);
THREE.Sphere.__closest.clamp(box.min, box.max);
var distance = this.center.distanceToSquared(THREE.Sphere.__closest);
return distance < (this.radius * this.radius);
};
function isCollision() {
for (var i = 0; i < platformArr.length; i++) {
_cubeBox = platformArr[i];
return sphereBox.intersectsBox(_cubeBox);
}
}
Here is how a sphere is added to the scene:
function addBall(){
sphere = new THREE.Mesh(
new THREE.SphereGeometry(0.19, 20, 20), materials.solid);
sphere.position.set(0, 1, -2);
sphere.geometry.computeBoundingSphere();
scene.add(sphere);
sphereBox = new THREE.Sphere(sphere.position, sphere.geometry.boundingSphere.radius);
sphereBox.radius = sphere.geometry.boundingSphere.radius;
cy = sphere.position.y;
}
Logic for rendering and collision detection:
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
if (collision) { // ball is on surface
vy = -vy;
collision = false;
}
cy -= vy * dt;
sphere.position.y = cy;
if (vy <= mvy)
vy += gravity;
collision = isCollision();
}
To test collision between a box and a sphere that is added to the scene:
var _box = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 0.2), materials.solid);
_box.position.set(-1.83, -0.22, 1.11);
_box.rotation.x += Math.PI / 2;
_box.rotation.z -= 0.78;
_box.receiveShadow = true;
Check for collision in the update loop:
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
if (collision) { // ball is on surface
vy = -vy;
collision = false;
}
cy -= vy * dt;
sphere.position.y = cy;
if (vy <= mvy)
vy += gravity;
collision = sphereBox.intersectsBox(_box);
}