AI Plugin Index3D
Three.js MCP servers and skills
There are 50 ways to connect Three.js to Claude, ChatGPT, Cursor and other AI assistants: 4 MCP servers and 46 skills. The most used is Server Threejs (3.0k GitHub stars).
Most used
Server Threejs
modelcontextprotocol
83Three.js 3D visualization MCP App Server
AFB
threejs-loaderssickn33
82Three.js asset loading - GLTF, textures, images, models, async patterns. Use when loading 3D models, textures, HDR environments, or managing loading progress.
AAA
threejs-fundamentalssickn33
82Three.js scene setup, cameras, renderer, Object3D hierarchy, coordinate systems. Use when setting up 3D scenes, creating cameras, configuring renderers, managing object hierarchies, or working with transforms.
AAA
threejsasgeirtj
82Three.js 3D reference hub. Use when working with Three.js: pick the topic below and read its file for patterns and API guidance.
AAA
Three.js DevTools MCPDmitriyGolub
79Inspect and edit Three.js scenes, materials, shaders, lights in real time from any AI agent
AAB
threejs-materialslingxling
67Three.js materials - PBR, basic, phong, shader materials, material properties. Use when styling meshes, working with textures, creating custom shaders, or optimizing material performance.
AAB
MCP servers (4)
- 1Server Threejs modelcontextprotocol · DesignThree.js 3D visualization MCP App Server83
- 2Three.js DevTools MCP DmitriyGolub · AI and LLM toolsInspect and edit Three.js scenes, materials, shaders, lights in real time from any AI agent79
- 3paprika3D (the three.js toolset for coding agents) paprika3d · Browser automationLets coding agents see, play, inspect and speed up three.js, R3F and WebGL pages in headless Chrome30
- 4ThreeJS Weaver Evozim · Design3D graphic mesh generator and WebGL scene builder.11
Skills (46)
- 1threejs-loaders sickn33 · DesignThree.js asset loading - GLTF, textures, images, models, async patterns. Use when loading 3D models, textures, HDR environments, or managing loading progress.82
- 2threejs-fundamentals sickn33 · DesignThree.js scene setup, cameras, renderer, Object3D hierarchy, coordinate systems. Use when setting up 3D scenes, creating cameras, configuring renderers, managing object hierarchies, or working with transforms.82
- 3threejs asgeirtj · DesignThree.js 3D reference hub. Use when working with Three.js: pick the topic below and read its file for patterns and API guidance.82
- 4threejs-materials lingxlingThree.js materials - PBR, basic, phong, shader materials, material properties. Use when styling meshes, working with textures, creating custom shaders, or optimizing material performance.67
- 5threejs-postprocessing lingxlingThree.js post-processing - EffectComposer, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders.67
- 6threejs-skills agent-skills-hub · DesignThree.js skills for creating 3D elements and interactive experiences60
- 7threejs-interaction-systems mintdotggBuild Three.js app interaction systems including cameras, controls, picking, selection, manipulation, annotations, configuration UI, loading states, responsive input, and accessibility.58
- 8threejs-debug-profiler mintdotgg · Developer toolsDiagnose Three.js rendering, loading, animation, resize, audio, physics, input, mobile, and performance problems using reproduction and measured evidence.58
- 9threejs-shaders FrancoStinoThree.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.52
- 10cloudai-threejs podo · DesignThree.js skills for creating interactive 3D elements and experiences on the web. Covers scene setup, geometries, materials, lighting, cameras, animations, and WebGL rendering best practices.49
- 11threejs-temporal-surfaces jorgeasaurusBuild screen-space temporal surface effects in Three.js. Use for full-resolution touch-history ping-pong, frost and thaw masks, reduced-resolution separable blur, static crystalline structure targets, and two-scale normal-map refraction.47
- 12threejs-textures boisenoiseThree.js textures - texture types, UV mapping, environment maps, texture settings. Use when working with images, UV coordinates, cubemaps, HDR environments, or texture optimization.39
- 13threejs jhy0285 · Browser automationThree.js skills for creating 3D elements and interactive experiences in the browser — scenes, materials, controls, and post-processing.37
- 14optimize-threejs-games nuroctane · Browser automationProfile, diagnose, and improve Three.js or WebGL game performance without regressing gameplay. Use for frame-time drops, CPU/GPU pressure, draw calls, texture and geometry budgets, animation loops, adaptive quality, mobile performance, and browser performance verification.35
- 15threejs LinXueyuanStdio · Browser automationThree.js skills for creating 3D elements and interactive experiences in the browser — scenes, materials, controls, and post-processing.32
- 16threejs feimacode · Browser automationThree.js skills for creating 3D elements and interactive experiences in the browser — scenes, materials, controls, and post-processing.32
- 17build-mobile-threejs-games gabrielmoreira · Browser automationBuild, tune, or test a Three.js game for mobile web. Use for touch movement, action controls, target selection, touch inventory, safe areas, portrait/landscape layouts, responsive HUD, battery/performance budgets, and real mobile browser QA.32
- 18threejs-geometry gabrielmoreira · DesignThree.js geometry creation - built-in shapes, BufferGeometry, custom geometry, instancing. Use when creating 3D shapes, working with vertices, building custom meshes, or optimizing with instanced rendering.32
- 19improve-threejs bitsocialnetReview or improve a requested Three.js or React Three Fiber rendering flow.31
- 20improve-threejs bitsocialnetReview or improve a requested Three.js or React Three Fiber rendering flow.31
- 21genex-threejs-procedural-geometry yonidavidsonBuild procedural mesh systems for Genex Three.js games. Use for mesh writers, profile sweeps, rails, branches, frames, collision-aware shapes, UV density, custom normals, material groups, instancing decisions, and geometry that must hold up to close gameplay inspection.30
- 22threejs-loaders nexuslinkproductions · DesignThree.js asset loading - GLTF, textures, images, models, async patterns. Use when loading 3D models, textures, HDR environments, or managing loading progress.29
- 23threejs-procedural-vfx AnthonEAuthor production real-time VFX in Three.js. Use for ship-conforming reentry plasma, generated capsule wakes, instanced analytic sparks, timed dissolving debris, dense-swap effect pools, and explicit scene-relative HDR emission hierarchy.27
- 24threejs-instruction-viewer lumensparkxyRender reviewed assembly snapshots and nested build steps using Three.js and real part geometry.26
- 25threejs-webgl naKarthikSurya · DesignDesigns, implements, debugs, and optimizes Three.js and WebGL scenes, shaders, cameras, lighting, materials, animation loops, asset loading, interaction, memory disposal, and GPU performance. Use for 3D web rendering or canvas graphics.24
- 26threejs-exposure-color-grading unpseudocomplique · Cloud and DevOpsBuild a measured exposure and grading path in Three.js. Use for a 64x36 encoded luminance meter, asynchronous readback, weighted log-average exposure, asymmetric adaptation, single tone-map ownership, and a generated 32-cube post-tone-map LUT.24
- 27threejs-memory-lifecycle thaiGO2003 · Knowledge and memoryPrevent Three.js memory, GPU, listener, timer, and render-loop leaks. Use for scene teardown, modal/model viewer disposal, renderer/composer/loaders cleanup, shared-resource ownership, or regressions that continue rendering after navigation.24
- 28threejs-instancing-performance thaiGO2003Optimize Three.js rendering and CPU/GPU allocations with InstancedMesh, BatchedMesh, geometry/material reuse, culling, draw-call reduction, object pools, and frame-budget measurement. Use for mobile FPS, large boards, repeated props/voxels, or rendering bottlenecks.24
- 29threejs-materials-textures thaiGO2003 · Developer toolsDesign or debug Three.js materials, textures, color spaces, alpha/transparency, depth behavior, low-poly shading, texture filtering, and shared material ownership. Use for visual styling, skins, invisible backgrounds, texture assets, or material-related rendering bugs.24
- 30threejs-interaction Maratello2 · DesignThree.js interaction - raycasting, controls, mouse/touch input, object selection. Use when handling user input, implementing click detection, adding camera controls, or creating interactive 3D experiences.23
- 31threejs-animation duc-duy-1612Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.23
- 32threejs-r3f acosta-dev-pro · Design3D opcional para YoguraSo con Three.js y React Three Fiber. Úsala solo si se aprueba un caso concreto de 3D.23
- 33threejs-fundamentals ai4brands-design · DesignCore principles for building 3D experiences with Three.js. Optimized for AI Code Generation.22
- 34threejs-lite davidFCDev · Browser automationBuild lightweight mobile-friendly 3D browser games with Three.js22
- 35threejs-r3f-expert sameerreddy789 · MediaGuidelines and code patterns for Three.js, React Three Fiber, Drei helpers, lighting, camera controls, GLTF models, and WebGL performance optimization.22
- 36threejs-loaders oimiragieo · DesignThree.js asset loading - GLTF, textures, images, models, async patterns. Use when loading 3D models, textures, HDR environments, or managing loading progress.21
- 37threejs-shaders oimiragieoThree.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.21
- 38threejs-textures oimiragieoThree.js textures - texture types, UV mapping, environment maps, texture settings. Use when working with images, UV coordinates, cubemaps, HDR environments, or texture optimization.21
- 39threejs-materials oimiragieoThree.js materials - PBR, basic, phong, shader materials, material properties. Use when styling meshes, working with textures, creating custom shaders, or optimizing material performance.21
- 40threejs-geometry oimiragieo · DesignThree.js geometry creation - built-in shapes, BufferGeometry, custom geometry, instancing. Use when creating 3D shapes, working with vertices, building custom meshes, or optimizing with instanced rendering.21
- 41mengto-optimize-threejs-games oimiragieo · Browser automationUse when profiling, diagnosing, or improving Three.js or WebGL game performance without regressing gameplay\u2014frame-time drops, CPU/GPU pressure, draw calls, texture/geometry budgets, animation loops, adaptive quality, mobile performance, and browser performance verification.21
- 42mengto-build-threejs-enemy-systems oimiragieo · Developer toolsUse when building or refactoring reusable, data-driven enemy archetype and moveset systems for Three.js action games\u2014content schemas, model/rig conventions, combat timing and contact contracts, runtime state boundaries, placeholders, fixtures, or playthrough validation.21
- 43threejs-game-proof zbeyens · Developer toolsProve playable or polished readiness with fast deterministic tests and bounded target-relative runtime checks; never run a build by default.21
- 44threejs David-Li0406 · DesignUse this skill when building immersive 3D web experiences with Three.js, a powerful WebGL/WebGPU library for creating interactive graphics, visualizations, and applications.19
- 45suresh-threejs-interaction sureshnilupulw94 · Developer toolsRemote GitHub skill entry for suresh-threejs-interaction. Category: Three.js Spatial & Visual Systems.18
- 46threejs-lite meghal86 · Browser automationBuild lightweight mobile-friendly 3D browser games with Three.js, optimized for Remix/Farcade constraints and single-file delivery.18
Questions
Is there an official Three.js MCP server?
Check the publisher on each listing: servers published by Three.js itself are the official ones. The most used Three.js server here is Server Threejs by modelcontextprotocol.
How do I connect Three.js to Claude?
Pick a server below, open its page and copy the install command for Claude Code, or the config block for Claude Desktop. Most Three.js servers need an API key or token from your Three.js account.