collision-system

Collision System

When to Use

Use this skill when:

• Implementing collision detection in ECS games
• Detecting entity interactions
• Implementing hit detection
• Building spatial partitioning
• Optimizing collision performance

Core Principles

1. Broadphase First: Quick rejection using simple bounds
2. Spatial Partitioning: Grid or octree for large scenes
3. Component-Based: Collision data in components
4. Event-Driven: Emit collision events
5. Performance: Only check nearby entities
6. Type Filtering: Collision layers/masks

Implementation

1. Collision Components

// components/Collider.ts
import { Component } from '../core/Component';
import * as THREE from 'three';

export type ColliderShape = 'box' | 'sphere' | 'capsule';

export class Collider implements Component {
  shape: ColliderShape;
  size: THREE.Vector3; // For box: width, height, depth; For sphere: radius in x
  offset: THREE.Vector3;
  isTrigger: boolean;
  layer: number;
  mask: number; // Which layers to collide with

  constructor(
    shape: ColliderShape,
    size: THREE.Vector3,
    options?: {
      offset?: THREE.Vector3;
      isTrigger?: boolean;
      layer?: number;
      mask?: number;
    }
  ) {
    this.shape = shape;
    this.size = size;
    this.offset = options?.offset || new THREE.Vector3();
    this.isTrigger = options?.isTrigger || false;
    this.layer = options?.layer || 0;
    this.mask = options?.mask || 0xFFFFFFFF; // Collide with all by default
  }

  getBounds(position: THREE.Vector3): AABB | Sphere {
    const center = position.clone().add(this.offset);

    if (this.shape === 'sphere') {
      return new Sphere(center, this.size.x);
    } else {
      return new AABB(
        center.clone().sub(this.size.clone().multiplyScalar(0.5)),
        center.clone().add(this.size.clone().multiplyScalar(0.5))
      );
    }
  }
}

export class AABB {
  constructor(
    public min: THREE.Vector3,
    public max: THREE.Vector3
  ) {}

  intersects(other: AABB): boolean {
    return (
      this.min.x <= other.max.x && this.max.x >= other.min.x &&
      this.min.y <= other.max.y && this.max.y >= other.min.y &&
      this.min.z <= other.max.z && this.max.z >= other.min.z
    );
  }

  contains(point: THREE.Vector3): boolean {
    return (
      point.x >= this.min.x && point.x <= this.max.x &&
      point.y >= this.min.y && point.y <= this.max.y &&
      point.z >= this.min.z && point.z <= this.max.z
    );
  }

  getCenter(): THREE.Vector3 {
    return new THREE.Vector3().addVectors(this.min, this.max).multiplyScalar(0.5);
  }

  getSize(): THREE.Vector3 {
    return new THREE.Vector3().subVectors(this.max, this.min);
  }
}

export class Sphere {
  constructor(
    public center: THREE.Vector3,
    public radius: number
  ) {}

  intersects(other: Sphere): boolean {
    const distSq = this.center.distanceToSquared(other.center);
    const radSum = this.radius + other.radius;
    return distSq <= radSum * radSum;
  }

  intersectsAABB(aabb: AABB): boolean {
    const closestPoint = new THREE.Vector3(
      Math.max(aabb.min.x, Math.min(this.center.x, aabb.max.x)),
      Math.max(aabb.min.y, Math.min(this.center.y, aabb.max.y)),
      Math.max(aabb.min.z, Math.min(this.center.z, aabb.max.z))
    );

    const distSq = this.center.distanceToSquared(closestPoint);
    return distSq <= this.radius * this.radius;
  }

  contains(point: THREE.Vector3): boolean {
    return this.center.distanceToSquared(point) <= this.radius * this.radius;
  }
}