Feature: Create a three.js skill for 3D scene development #74

New issue

Closed

opened 2026-07-08 11:59:49 -04:00 by jasper · 0 comments

jasper commented

2026-07-08 11:59:49 -04:00

Contributor

Create a skill for Three.js / WebGL 3D scene development, suitable for agent-assisted creation of 3D visualizations, animations, and interactive scenes.

What the skill should cover

Three.js fundamentals — scene, camera, renderer setup for different contexts (web, headless)
Common geometry and material patterns — primitives, custom geometry, PBR materials, shaders
Animation loop patterns — requestAnimationFrame, clock-based animation, tweening
Lighting setups — ambient, directional, point, spot, hemisphere — and when each is appropriate
Camera types — PerspectiveCamera vs OrthographicCamera, orbit controls, camera rigs
Loading external assets — GLTF/GLB models, textures, environment maps
Performance considerations — geometry merging, LOD, instancing, frustum culling
Integration patterns — React Three Fiber / @react-three/fiber if relevant, or vanilla JS for standalone

Reference material

Three.js documentation: https://threejs.org/docs/
Three.js fundamentals: https://threejs.org/manual/
The existing agent-skills repo already has a three.js sample/reference pattern in some skill descriptions

Delivered in the skill

SKILL.md with common patterns and code snippets
Reference files covering specific areas (geometry, materials, animation, assets)
At least one working example template
Progressive disclosure — start simple, reference deeper material on demand

Why this belongs in agent-skills

3D visualization is a recurring need for data visualization, prototyping, and interactive demonstrations. A dedicated skill would let an agent produce working Three.js scenes without rediscovering the API patterns each time.

Create a skill for Three.js / WebGL 3D scene development, suitable for agent-assisted creation of 3D visualizations, animations, and interactive scenes. ## What the skill should cover 1. Three.js fundamentals — scene, camera, renderer setup for different contexts (web, headless) 2. Common geometry and material patterns — primitives, custom geometry, PBR materials, shaders 3. Animation loop patterns — requestAnimationFrame, clock-based animation, tweening 4. Lighting setups — ambient, directional, point, spot, hemisphere — and when each is appropriate 5. Camera types — PerspectiveCamera vs OrthographicCamera, orbit controls, camera rigs 6. Loading external assets — GLTF/GLB models, textures, environment maps 7. Performance considerations — geometry merging, LOD, instancing, frustum culling 8. Integration patterns — React Three Fiber / @react-three/fiber if relevant, or vanilla JS for standalone ## Reference material - Three.js documentation: https://threejs.org/docs/ - Three.js fundamentals: https://threejs.org/manual/ - The existing agent-skills repo already has a three.js sample/reference pattern in some skill descriptions ## Delivered in the skill - SKILL.md with common patterns and code snippets - Reference files covering specific areas (geometry, materials, animation, assets) - At least one working example template - Progressive disclosure — start simple, reference deeper material on demand ## Why this belongs in agent-skills 3D visualization is a recurring need for data visualization, prototyping, and interactive demonstrations. A dedicated skill would let an agent produce working Three.js scenes without rediscovering the API patterns each time.

jasper referenced this issue from a pull request that will close it,

2026-07-11 17:03:09 -04:00

feat(three): add browser 3D scene skill #110