Weird Box3 behavior

Hello community :wave:

I’m trying to make a collision system using Box3.
Each player have their meshes in a group (, red on the gif.
In the constructor of the Player class, I create the AABB box using setFromObject which is white on the gif.

this.hitbox = new THREE.Box3().setFromObject(;
this.hitboxHelper = new THREE.Box3Helper(this.hitbox, new THREE.Color('#ffffff'));;

In a setInterval loop (to simulate frame update loop and avoid spamming in case of problems), I make setFromObject again to update positions and then have accurate collisions.

But, when I change the positions or the rotation of the group, the hitbox have a weird behavior :

What I’m doing wrong ?
Thank you

AABB means axis-aligned bounding boxes
dim of your box3helper ( AABB) is calcuted according x,y,z axis at every time . so if use it after rotation of your group , dim change and will be different at every time .

A correct AABB encapsulating a group of objects looks like so:

As you can see, the fiddle uses an instance of BoxHelper.

If you want to achieve the same with Box3Helper, you have to recompute the AABB manually every frame:

As mentioned by @elysium11, Box3 is an AABB so it can never be rotated.

Thank you @elysium11, @Mugen87

As I described, I don’t transform the AABB itself.
Only things I do is playing with the group.

Take a look to the update method called each frame :

public update(delta: number) {
	if (this.actions.move.left || this.actions.move.right) {
		const direction = this.actions.move.right ? 1 : -1;
		const rotationDelta = (this.stats.turnSpeed / 40) * direction * delta; += rotationDelta;
			action: 'move',
			data: {
				rotation: {
	if (this.actions.move.forward || this.actions.move.backward) {
		const direction = this.actions.move.forward ? 1 : -1;
		const translationDelta = (this.stats.moveSpeed / 10) * delta; THREE.Vector3(0, 0, direction), translationDelta);
			action: 'move',
			data: {
				position: {

The result is still unexepected :

What could cause this phenomenon ?

you init once hitbox

this.hitbox = new THREE.Box3().setFromObject(;
this.hitboxHelper = new THREE.Box3Helper(this.hitbox, new THREE.Color(’#ffffff’));;

but after you write ( this is the origin of issue )
public update(delta: number) {

the only thing you have to do is to translate or rotate your group but don t redefine hitbox inside update .

edit : step 1
you define your group and your hitbox .
step 2
you rotate or translate your group
step 3
update hitbox , so dim are bigger than initial
step 4
you rotate or translate group which contain now a hitbox bigger
step 5
update hitbox , so dim bigger than previous step 4

and so on   =   your  hitbox ( see by your helperbox ) increase )
1 Like

Ok so Box3 doesn’t need to be updated ?

I tried this before, I can see with the Box3Helper that the hitbox follows the group but collisions (with intersectsBox) are not accurate or even completely wrong.

If I update with setFromObject, the hitbox grows yes but collisions are accurate.

I probably miss something…
Thank you for your answer :slight_smile:

if you need an aabb hitbox with update , so don’t add at start , your hitbox to your group , like this it will not increase .

1 Like

You are the man, you solved my issue !
Thank you @elysium11.

export default abstract class Collidable {

	public hitbox: THREE.Box3;
	public hitboxHelper: THREE.Box3Helper;

	constructor() {
		this.hitbox = new THREE.Box3();
		this.hitboxHelper = new THREE.Box3Helper(this.hitbox);

	public initHitbox() {

	public updateHitbox(group: THREE.Group) {


And in the player class, at every frame :