webgl-page

What problem does it solve?

This Skill provides a structured approach to creating new WebGL pages within a Three.js application, ensuring proper integration with the existing canvas system and lifecycle management.

Core Features & Use Cases

• Page Lifecycle Management: Implements a robust load() → create() → onEnter() → update() → onLeave() → destroy() lifecycle for each WebGL page.
• Scene Integration: Manages Three.js objects within a dedicated this.elements group, ensuring clean scene management.
• Use Case: When developing a new interactive 3D visualization for a specific section of a website, use this Skill to scaffold the new page, define its Three.js components, and hook it into the application's navigation and rendering loop.

Quick Start

Create a new WebGL page subclass in src/canvas/YourPage/index.js and register it in src/main.js.