skills.rest
BamoJ
BamoJCOMMUNITY
Explore all skills by this author →
Website𝕏@bamojkGitHub

webgl-page

Create Three.js WebGL pages with lifecycle and scene management.

Updated Feb 13, 2026
Search Tags:#frontend#javascript#webgl#three.js#3d graphics#page development
One-click install
npx skills add https://github.com/BamoJ/playfight-2k26 --skill webgl-page
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webgl-page
Source: https://github.com/BamoJ/playfight-2k26/tree/main/.claude/skills/webgl-page
Command: npx skills add https://github.com/BamoJ/playfight-2k26 --skill webgl-page

SYSTEM DOCUMENTATION & REQUIREMENTS

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.

Frequently Asked Questions about webgl-page

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I manage the Three.js page lifecycle in a WebGL application?▼

To manage the WebGL page lifecycle, this Skill implements a structured sequence: load() → create() → onEnter() → update() → onLeave() → destroy(). This ensures proper asset loading, scene setup, transitions, and per-frame updates for each 3D page.

What's the best way to structure a new 3D page using Three.js?▼

The best way to structure a new 3D page is to create a subclass in your canvas directory and register it. The Skill manages Three.js objects within a dedicated group, ensuring clean scene graph management and viewport calculations for responsive elements.

How do I add enter and leave transitions to a WebGL page?▼

You add enter and leave transitions to a WebGL page by utilizing the built-in onEnter() and onLeave() lifecycle methods. These hooks allow you to define custom transition logic as part of the page management framework.

Does this WebGL page Skill handle responsive 3D graphics and viewport calculations?▼

Yes, this Skill handles responsive 3D graphics by supporting viewport calculations for responsive elements. It integrates the 3D visualization with the existing canvas system to ensure proper rendering across different screen sizes.

How do I clean up Three.js scene objects when navigating away from a page?▼

You clean up Three.js scene objects using the onLeave() and destroy() lifecycle methods. The Skill manages objects within a dedicated elements group, ensuring that all 3D components are properly removed from the scene graph upon page exit.

Related Skills

Explore More Software Engineering Skills→
MCERQUAMCERQUA
1

threejs-canvas-integration

Set up Three.js canvas pages with asset loading and state persistence.

Community
Intermediate
hii-saikrishnahii-saikrishna

babylonjs-engine

Create 3D scenes and browser-based games with Babylon.js.

Community
Advanced
StonelukasStonelukas

threejs

Create interactive 3D web apps with Three.js for WebGL/WebGPU rendering.

Community
Advanced
alanzoppaalanzoppa
1

threejs

Create and optimize three.js scenes with materials, lighting, and animations.

Community
Intermediate