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
Install
notque/vexjoy-agent/threejs-builder · repository language: Python
git clone https://github.com/notque/vexjoy-agent
cp -r vexjoy-agent/skills/frontend/threejs-builder ~/.claude/skills/threejs-builderFrequently 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)
Read as markdown · JSON record · Browse the source repository
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