# Three.js Resources — AI × Three.js Hub

## Site Overview
Three.js Resources (threejsresources.com) is the leading directory and learning platform for Three.js, WebGL, and WebGPU developers.
The AI Hub benchmarks AI coding models on Three.js tasks, provides a prompt library, and curates reusable AI skills for Three.js development.

## MCP Server
Endpoint: https://threejsresources.com/api/mcp (streamable HTTP, read-only, no API key)
Docs: https://threejsresources.com/mcp
Install (Claude Code): claude mcp add --transport http threejsresources https://threejsresources.com/api/mcp
Exposes version-verified Three.js guides, an official GLSL-to-TSL converter, the tools directory, showcase, marketplace, blog and course catalogue as MCP tools.

## AI Hub
URL: https://threejsresources.com/ai

## Benchmark
URL: https://threejsresources.com/ai/benchmark
No published benchmark runs yet.

### Benchmark Tests

## Prompt Library
URL: https://threejsresources.com/ai/prompts

## AI Skills
URL: https://threejsresources.com/ai/skills

## Tools Directory
URL: https://threejsresources.com/tools

## Courses
URL: https://threejsresources.com/courses

## Showcase
URL: https://threejsresources.com/showcase

## Reference Guides
### WebGPU
- WebGPU vs WebGL: Which Should You Use in Three.js?: https://threejsresources.com/webgpu/vs-webgl
- Three.js WebGPU: WebGPURenderer, TSL & What Works Today: https://threejsresources.com/webgpu/three-js
### Three.js Guides
- Three.js Grass: How to Render a Grass Field: https://threejsresources.com/guides/grass
- Three.js Water: How to Render Realistic Water: https://threejsresources.com/guides/water
- Three.js Lighting: A Practical Guide: https://threejsresources.com/guides/lighting
- Three.js Materials: Which One Should You Use?: https://threejsresources.com/guides/materials
- Three.js OrbitControls: Setup, Options & Alternatives: https://threejsresources.com/guides/orbitcontrols
- Three.js GLTFLoader: Loading 3D Models the Right Way: https://threejsresources.com/guides/gltf-loader
- Three.js Raycaster: Click and Hover Detection: https://threejsresources.com/guides/raycaster
- Three.js Shadows: Setup and Fixing Common Problems: https://threejsresources.com/guides/shadows
- Three.js Camera: PerspectiveCamera vs OrthographicCamera: https://threejsresources.com/guides/camera
- Three.js Physics: Cannon.js vs Rapier vs Ammo.js: https://threejsresources.com/guides/physics
- Three.js Animation: AnimationMixer, Tweening & GSAP: https://threejsresources.com/guides/animation
- Three.js Particles: Points, Sprites & GPU Compute: https://threejsresources.com/guides/particles
- Three.js Sky, Clouds and Fog: https://threejsresources.com/guides/sky-and-clouds
- Three.js Globe: Building an Interactive 3D Earth: https://threejsresources.com/guides/globe
- Three.js Text: 3D Text, SDF Text & troika-three-text: https://threejsresources.com/guides/text
- Three.js Textures: Loading, Compression & Performance: https://threejsresources.com/guides/textures
- Three.js with TypeScript: Setup and Common Gotchas: https://threejsresources.com/guides/typescript
- Three.js Scene and Renderer: The Setup Every Project Starts With: https://threejsresources.com/guides/scene-renderer
- Three.js UI and HUD: In-Scene vs HTML Overlay: https://threejsresources.com/guides/ui-hud
- Three.js Maps: 3D Terrain and Map Visualization: https://threejsresources.com/guides/maps
- Three.js Image Gallery: 3D Photo Walls and Scroll Galleries: https://threejsresources.com/guides/image-gallery
### Comparisons
- Three.js vs Babylon.js: Which 3D Library Should You Use?: https://threejsresources.com/compare/three-js-vs-babylon-js
- Three.js Alternatives: 6 Other Ways to Build 3D on the Web: https://threejsresources.com/compare/three-js-alternatives
- Three.js vs Raw WebGL: Do You Need the Library?: https://threejsresources.com/compare/three-js-vs-webgl
- React Three Fiber vs Vanilla Three.js: https://threejsresources.com/compare/react-three-fiber-vs-three-js
### Three.js Games
- Three.js Games: Play the Best WebGL Games & Build Your Own: https://threejsresources.com/games
- Three.js Game Engines: Rogue Engine, Hology, Needle & When to Assemble Your Own: https://threejsresources.com/games/engines
### React Three Fiber
- React Three Fiber: Three.js as a React Renderer: https://threejsresources.com/react-three-fiber
### Three.js Jobs
- Three.js Jobs: Where to Find Work and How to Get Hired: https://threejsresources.com/jobs
### WebXR, VR & AR
- WebXR Games: VR and AR Games You Can Play in a Browser: https://threejsresources.com/webxr/games
- WebXR Compatible Browsers: What Works Where: https://threejsresources.com/webxr/browsers
- WebXR: VR and AR in the Browser: https://threejsresources.com/webxr
- Three.js Augmented Reality: WebXR AR vs. Zappar, model-viewer & the Rest: https://threejsresources.com/ar
### AI for Three.js
- Best AI 3D Model Generators for Three.js: https://threejsresources.com/ai/3d-model-generators
- Image to 3D Model: AI Tools That Convert a Photo to a Mesh: https://threejsresources.com/ai/image-to-3d
- Text to 3D: Generating a 3D Model From a Prompt: https://threejsresources.com/ai/text-to-3d
- Claude Skills for Three.js and WebGPU: https://threejsresources.com/ai/claude-skills
- AI Game Makers Compared, and Vibe-Coding a Game With Three.js: https://threejsresources.com/ai/game-generators
### What is Three.js
- What Is Three.js?: https://threejsresources.com/what-is-three-js
### Three.js Examples
- Three.js Examples: https://threejsresources.com/examples
### Three.js Templates
- Three.js Templates and Starter Kits: https://threejsresources.com/templates

## Blog & Marketplace
- Blog: https://threejsresources.com/blog — News, tutorials and articles about Three.js, WebGL and WebGPU.
- Marketplace: https://threejsresources.com/marketplace — Boilerplates, templates and components for Three.js projects.
- Learn: https://threejsresources.com/learn — A structured roadmap for learning Three.js from first scene to production.

## Reference Hubs
- Framework Integrations: https://threejsresources.com/frameworks — Three.js integration guides for Next.js, Nuxt, Svelte, Astro and Vite.
- Three.js for E-commerce: https://threejsresources.com/industries/ecommerce — 3D product visualization and configurators built with Three.js.

## AI Guides
- AI Workflows for Three.js: https://threejsresources.com/ai/workflows — Tool choice, opening prompts, agent skills and the verify loop.
- Vibe Coding a Three.js Scene: https://threejsresources.com/ai/vibe-coding — Building a Three.js scene end-to-end with an AI coding assistant.

## For Businesses
- For Agencies: https://threejsresources.com/for-agencies — Hire a senior Three.js / React Three Fiber developer for agency projects.
- Sponsor: https://threejsresources.com/sponsor — Monthly sponsorship placements across the Three.js Resources network.
- Support the Site: https://threejsresources.com/support — Ways to support Three.js Resources, with or without paying.