claude-skills-threejs-ecs-ts

# Three.js ECS Architecture Guidance

## Recommended ECS Framework
Based on your requirements, I recommend using the `ecsy` framework for your Three.js project. It's lightweight, TypeScript-friendly, and integrates well with Three.js.

```typescript
import { World, System, Component } from 'ecsy'

// Example component
class PositionComponent extends Component {
  x = 0
  y = 0
  z = 0
}

// Example system
class MovementSystem extends System {
  execute(delta, world) {
    const entities = world.queryEntities(PositionComponent)
    // Movement logic here
  }
}
```

## Three.js Integration
To integrate with Three.js, create a system that updates your Three.js objects based on ECS components:

```typescript
class RenderSystem extends System {
  execute() {
    const entities = world.queryEntities(PositionComponent, RenderComponent)
    entities.forEach(entity => {
      const position = entity.getComponent(PositionComponent)
      const render = entity.getComponent(RenderComponent)
      render.object3D.position.set(position.x, position.y, position.z)
    })
  }
}
```

## Performance Optimization
1. **Entity Pooling**: Implement an object pool for frequently created/destroyed entities
2. **Component Caching**: Cache frequently accessed components
3. **System Optimization**: Process only active entities in each system
4. **Three.js Optimization**: Use instanced meshes for similar objects