threejs

Implement interactive Three.js WebGL scenes with lifecycle management.

4.5k|536|Updated Feb 3, 2026

Search Tags:#performance #webgl #threejs #3d scenes #gltf loading #spa cleanup #orbit controls

Ready to run

npx skills add https://github.com/MengTo/Skills --skill threejs-mengto

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: threejs
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/threejs
Command: npx skills add https://github.com/MengTo/Skills --skill threejs-mengto

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you implement and debug interactive Three.js 3D scenes on the web without getting lost in scene setup, rendering loops, loading pipelines, or performance pitfalls.

Core Features & Use Cases

Three.js mental model: Aligns Scene, Camera, Renderer, meshes, and lighting around how WebGL actually renders.
Asset loading & controls: Covers GLTF/texture loading (including DRACO compression) and common control patterns like OrbitControls for product/debug views.
Production-ready cleanup: Guides correct disposal of geometries/materials/textures, event listeners, and animation loops to prevent SPA route-change memory leaks.

Quick Start

Use the threejs skill to design a simple GLTF product viewer with OrbitControls, correct resizing, and proper cleanup after navigation.

Frequently Asked Questions about threejs

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

FAQPage Schema

How do I set up a basic Three.js scene with a camera and renderer?▼

Setting up a Three.js scene requires establishing the Scene, Camera, and Renderer as core objects, then adding meshes and lighting. This architecture aligns with how WebGL actually renders interactive 3D content.

What is the best way to load glTF models with DRACO compression in WebGL?▼

Loading glTF models with DRACO compression involves using appropriate Three.js loaders for the format. This ensures compressed 3D assets are correctly loaded and integrated into your interactive WebGL scenes.

Why does my Three.js SPA leak memory after route changes?▼

Your Three.js SPA leaks memory because WebGL resources are not properly disposed. You must dispose of geometries, materials, textures, event listeners, and animation loops during cleanup to prevent leaks after route changes.

How do I add OrbitControls for a product viewer in Three.js?▼

Adding OrbitControls for a product viewer involves applying common control patterns provided by Three.js. This allows users to interactively rotate and inspect 3D objects within the WebGL scene for debug or product views.

Does Three.js handle window resizing and reduced-motion behavior automatically?▼

Three.js requires manual handling of window resizing and reduced-motion behavior. You must explicitly implement event listeners to adjust camera and renderer dimensions and respect user accessibility preferences.