threejs-best-practices

What problem does it solve?

This Skill enforces consistent, modern Three.js best practices across Black Trigram projects to prevent memory leaks, ensure 60fps performance, and maintain a clear separation between UI overlays and 3D content.

Core Features & Use Cases

• Canvas setup and scene configuration: Encourages a standard Canvas integration using Scene3DWrapper with Korean-themed visuals and performance defaults.
• Korean-themed lighting and aesthetics: Applies a cohesive lighting palette and materials that align with the Black Trigram identity.
• Resource management and batching: Promotes proper cleanup of geometries, materials, textures, and batched useFrame updates to optimize performance.
• Html overlays vs 3D meshes decision guide: Provides guidance on when to use Html overlays for UI versus 3D meshes for game content.
• Testing and profiling patterns: Includes basic testing patterns to verify rendering stability and 60fps targets.

Quick Start

Audit a Three.js scene for best practices and apply the standard Canvas setup, Korean lighting, cleanup patterns, and useFrame batching.