skills.rest
pedropenha
pedropenhaCOMMUNITY
Explore all skills by this author →
GitHub

threejs

Builds and debugs interactive Three.js WebGL scenes with cameras, lights, and GLTF assets.

Updated Sep 8, 2026
Search Tags:#performance#web design#animation#webgl#three.js#gltf#3d scenes
One-click install
npx skills add https://github.com/pedropenha/project-skills --skill threejs-pedropenha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs
Source: https://github.com/pedropenha/project-skills/tree/main/.agents/skills/threejs
Command: npx skills add https://github.com/pedropenha/project-skills --skill threejs-pedropenha

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three, and includes references (resource) components.

What problem does it solve? Building interactive 3D scenes on the web requires coordinating scenes, cameras, renderers, materials, and asset loaders while avoiding common pitfalls like memory leaks, resize distortion, and mobile GPU overload. ## Core Features & Use Cases - Scene Setup Patterns: Guidance for Scene, Camera, WebGLRenderer, Mesh, lights, and the requestAnimationFrame render loop. - Asset Loading & Controls: Covers GLTFLoader, TextureLoader, DRACOLoader, OrbitControls, and PointerLockControls. - Performance & Cleanup: Enforces pixel-ratio caps, geometry/material/texture disposal, resize handling, and reduced-motion support. - Use Case: A designer shipping a product-spin hero section can follow the minimal spinning cube recipe, add GLTF loading for the product model, and apply the cleanup checklist so the scene survives SPA route changes. ## Quick Start Use the threejs skill to create a responsive rotating 3D product viewer with proper resize handling and reduced-motion support.

Frequently Asked Questions about threejs

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

FAQPage Schema
How do I create a basic Three.js scene with a rotating object?▼

Create a Scene, PerspectiveCamera, and WebGLRenderer, then add a Mesh combining Geometry and Material with lights. Drive rotation inside a requestAnimationFrame loop and call renderer.render(scene, camera) each frame.

How to load GLTF models in Three.js?▼

Use GLTFLoader for standard models and pair it with DRACOLoader for compressed glTF files. TextureLoader handles image textures, and KTX2 compressed textures reduce load times for large assets.

Why does my Three.js scene look stretched after window resize?▼

Stretched rendering happens when the camera aspect ratio is not updated on resize. Set camera.aspect to width divided by height, call camera.updateProjectionMatrix(), and resize the renderer with setSize.

Does Three.js cause memory leaks in single-page applications?▼

Yes, undisposed WebGL resources leak after route changes. Call geometry.dispose(), material.dispose(), texture.dispose(), and renderer.dispose(), remove event listeners, and cancel the animation frame on unmount.

How do I improve Three.js performance on mobile devices?▼

Cap pixel ratio with Math.min(window.devicePixelRatio, 2), limit lights and shadows, and use compressed textures with Draco or KTX2. Fake lighting with baked textures when possible to reduce GPU load.

How to respect prefers-reduced-motion in Three.js animations?▼

Check the prefers-reduced-motion media query and render a single still frame instead of running the RAF loop, or slow updates significantly. This keeps 3D content accessible for motion-sensitive users.

Related Skills

Explore More Design & Creative Skills→
adryanmoldokkr32-pixeladryanmoldokkr32-pixel
2

threejs-syntax-loaders

Load 3D models and textures in Three.js with glTF, FBX, OBJ, Draco, KTX2, and HDR support.

Community
Intermediate
davila7davila7
30.5k

3d-web-experience

Implements interactive 3D web experiences using Three.js, React Three Fiber, and Spline.

Community
Intermediate
getcrew44getcrew44
358

design-handoff

Generate implementation-ready design specifications with tokens, states, and accessibility details.

Official
Intermediate
EnztunEnztun

web-shader-extractor

Extract WebGL, CSS, and Canvas effects from web pages.

Community
Advanced