threejs-builder
threejs-builder empowers developers to construct full-featured 3D web experiences using Three.js, React Three Fiber, or WebGPU. The skill handles scene setup, geometry creation, material application, and rendering pipelines, letting you focus on application logic rather than boilerplate. Perfect for interactive visualizations, games, and immersive web projects.
threejs-builder enables you to construct complete 3D web applications using Three.js imperative API, React Three Fiber for declarative components, or WebGPU for modern GPU compute. Start by setting up a scene, camera, and renderer, then add geometries, materials, and lights. The skill abstracts boilerplate so you focus on application logic, animations, and user interactions rather than low-level rendering details.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-07-25
threejs-builder enables you to construct complete 3D web applications using Three.js imperative API, React Three Fiber for declarative components, or WebGPU for modern GPU compute. Start by setting up a scene, camera, and renderer, then add geometries, materials, and lights. The skill abstracts boilerplate so you focus on application logic, animations, and user interactions rather than low-level rendering details.
Use it when
- threejs-builder supports both approaches.
- Yes.
Verify before relying
Read SKILL.md below before installing (12 files). Open directory: indexed for reading, not audited.
Similar skills
Install
notque/vexjoy-agent/threejs-builder · repository language: Python
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I build a 3D web app with three.js?
threejs-builder enables you to construct complete 3D web applications using Three.js imperative API, React Three Fiber for declarative components, or WebGPU for modern GPU compute. Start by setting up a scene, camera, and renderer, then add geometries, materials, and lights. The skill abstracts boilerplate so you focus on application logic, animations, and user interactions rather than low-level rendering details.
What's the difference between Three.js and React Three Fiber?
threejs-builder supports both approaches. Three.js is the imperative, lower-level library where you directly instantiate Scene, Mesh, and Renderer objects. React Three Fiber (r3f) wraps Three.js in declarative JSX components, making it easier to manage state and compose 3D scenes within React applications. Choose imperative for fine-grained control or r3f for component-driven development.
Can threejs-builder load and animate 3D models?
Yes. threejs-builder handles loading GLTF/GLB models with skeletal animation and rigging support. Use loaders to import pre-built models, then access their animations through the AnimationMixer. You can blend animations, control playback speed, and layer multiple animations together, making it ideal for character rigs, product viewers, and complex scene assets.
How do I create interactive 3D scenes with animations?
threejs-builder lets you build interactive 3D scenes by combining geometry, materials, lighting, and animation loops. Add user controls via mouse or keyboard events, update object transforms in your render loop, and use AnimationMixer or Tween libraries for smooth motion. The skill supports both frame-based and time-based animation patterns for games and visualizations.
What advanced visual effects can threejs-builder create?
threejs-builder supports advanced effects including custom shaders (GLSL/WGSL), post-processing passes (bloom, depth-of-field, motion blur), and WebGPU compute shaders for particle systems or physics simulation. Combine multiple effects in a EffectComposer pipeline, or write TSL (Three.js Shading Language) for modern, composable shader code.
Does threejs-builder support game development patterns?
Yes. threejs-builder enables game architectures with state management, event systems, and controller patterns. Organize your game loop, handle input events, manage entity state, and coordinate physics or AI logic. While Three.js itself is a rendering engine, the skill helps you structure game logic, animations, and scene management for complete game experiences.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Three.js Builder Skill
Overview
This skill builds complete Three.js web applications using a Phased Construction pattern with four phases: Design, Build, Animate, Polish. It supports three paradigms —
(truncated - see the full file via the links below)
File tree — 12 files
skills/frontend/threejs-builder/SKILL.md
skills/frontend/threejs-builder/references/advanced-animation.md
skills/frontend/threejs-builder/references/advanced-topics.md
skills/frontend/threejs-builder/references/build-recipes.md
skills/frontend/threejs-builder/references/game-architecture.md
skills/frontend/threejs-builder/references/game-patterns.md
skills/frontend/threejs-builder/references/gltf-loading.md
skills/frontend/threejs-builder/references/performance-patterns.md
skills/frontend/threejs-builder/references/react-three-fiber.md
skills/frontend/threejs-builder/references/shader-patterns.md
skills/frontend/threejs-builder/references/visual-polish.md
skills/frontend/threejs-builder/references/webgpu.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Build complete 3D web applications with Three.js imperative, React Three Fiber, or WebGPU”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Master the art of crafting engaging 3D gaming experiences using Three.js, a powerful JavaScript library for real-time graphics. This skill equips you with the techniques to design interactive worlds, manage 3D assets, and deploy polished games ready for players. Perfect for developers eager to break into game development without heavy engine overhead.
r3f-router intelligently directs Three.js React Fiber workloads to the right specialized skill based on task requirements. This dispatcher streamlines skill selection within MCP environments, ensuring Claude accesses the most relevant instruction sets for each request. Perfect for scaling complex R3F projects across multiple specialized knowledge domains.
This skill equips developers with proven architectural patterns for integrating multiple 3D rendering and animation frameworks into cohesive web applications. Learn how to combine Three.js, Babylon.js, React Three Fiber, and GSAP effectively while managing complexity and performance across modern web stacks.
This skill empowers you to construct dynamic, interactive 3D environments directly in the browser. Leverage modern web technologies to craft immersive visual experiences that engage users with spatial design and real-time interactivity.
This skill provides a browser-based management layer for routing sophisticated 3D and visual projects to their appropriate specialized handlers within an MCP server environment. It integrates with Claude Code CLI to enable on-demand skill loading, letting you organize markdown-based instruction sets that extend Claude's capabilities for domain-specific visual work.
react-three-fiber bridges React and Three.js, letting you compose 3D scenes declaratively using familiar component patterns. Define complex 3D environments through JSON specifications and React's component model, then render them efficiently in the browser. Perfect for building interactive visualizations, games, and immersive web experiences.
More skills threejs-webgl (MIT) · Threejs Loaders (AGPL-3.0) · r3f-fundamentals (MIT) · r3f-animation (MIT)