How do I install the Threejs Guide skill?

Run npx skillmds@latest add wenerme/threejs-guide in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is Threejs Guide safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Threejs Guide?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Threejs Guide free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Threejs Guide?

wenerme (@wenerme) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Threejs Guide by wenerme — Agent Skill

Name: Threejs Guide
Author: wenerme

Threejs Guide

Comprehensive Three.js development guide covering scene setup, cameras, renderer, geometry, materials, PBR, shaders, GLSL, textures, UV mapping, lighting, shadows, animation, skeletal animation, morph targets, post-processing, bloom, DOF, loaders, GLTF, interaction, raycasting, OrbitControls, 3D, WebGL. USE THIS SKILL WHEN the user asks about Three.js, 3D web development, WebGL rendering, or any Three.js API topic.

wenerme aabfc0b 11 files · 133.7 KB Updated Sep 17, 2026

File contents

Three.js Guide

Comprehensive reference for Three.js 3D web development. Covers 10 core topics with detailed code examples and best practices.

Source: CloudAI-X/threejs-skills

Core Concepts

Three.js is a JavaScript library for creating 3D graphics in the browser using WebGL. The fundamental pipeline: Scene (container) + Camera (viewpoint)

Renderer (draws to canvas). Objects are built from Geometry (shape) + Material (appearance) = Mesh.

Reference Index

File	Topic	Description
`references/fundamentals.md`	Fundamentals	Scene, cameras, renderer, Object3D, coordinate system, math utilities, cleanup patterns
`references/geometry.md`	Geometry	Built-in shapes, BufferGeometry, custom vertices, InstancedMesh, points, lines
`references/materials.md`	Materials	MeshBasicMaterial through MeshPhysicalMaterial, PBR, ShaderMaterial, material properties
`references/textures.md`	Textures	Texture loading, color space, wrapping, filtering, UV mapping, cube/HDR textures, render targets
`references/lighting.md`	Lighting	Light types (ambient, directional, point, spot, area), shadows, IBL, environment maps
`references/shaders.md`	Shaders	GLSL, ShaderMaterial, uniforms, varyings, vertex displacement, fresnel, noise, extending built-in materials
`references/animation.md`	Animation	Keyframe animation, AnimationMixer, skeletal animation, morph targets, blending, procedural motion
`references/postprocessing.md`	Post-Processing	EffectComposer, bloom, DOF, SSAO, FXAA/SMAA, custom ShaderPass, multi-pass rendering
`references/loaders.md`	Loaders	GLTF/GLB, Draco, KTX2, OBJ, FBX, texture loading, async patterns, caching
`references/interaction.md`	Interaction	Raycasting, OrbitControls, FlyControls, PointerLockControls, drag, selection, coordinate conversion

Usage

CRITICAL RULE: Before answering any Three.js question, MUST grep references/ for relevant keywords to find the most specific guidance. Do not rely on general knowledge when detailed reference material is available.

# Example: user asks about bloom effect
grep -l "bloom" references/
# -> references/postprocessing.md

NEVER guess at Three.js API details. Always check the reference files for exact constructor signatures, property names, and import paths.

---name: threejs-guidedescription: Comprehensive Three.js development guide covering scene setup, cameras, renderer, geometry, materials, PBR, shaders, GLSL, textures, UV mapping, lighting, shadows, animation, skeletal animation, morph targets, post-processing, bloom, DOF, loaders, GLTF, interaction, raycasting, OrbitControls, 3D, WebGL. USE THIS SKILL WHEN the user asks about Three.js, 3D web development, WebGL rendering, or any Three.js API topic.---# Three.js GuideComprehensive reference for Three.js 3D web development. Covers 10 core topicswith detailed code examples and best practices.Source: [CloudAI-X/threejs-skills](https://github.com/CloudAI-X/threejs-skills)## Core ConceptsThree.js is a JavaScript library for creating 3D graphics in the browser usingWebGL. The fundamental pipeline: **Scene** (container) + **Camera** (viewpoint)+ **Renderer** (draws to canvas). Objects are built from **Geometry** (shape) +**Material** (appearance) = **Mesh**.## Reference Index| File | Topic | Description ||------|-------|-------------|| `references/fundamentals.md` | Fundamentals | Scene, cameras, renderer, Object3D, coordinate system, math utilities, cleanup patterns || `references/geometry.md` | Geometry | Built-in shapes, BufferGeometry, custom vertices, InstancedMesh, points, lines || `references/materials.md` | Materials | MeshBasicMaterial through MeshPhysicalMaterial, PBR, ShaderMaterial, material properties || `references/textures.md` | Textures | Texture loading, color space, wrapping, filtering, UV mapping, cube/HDR textures, render targets || `references/lighting.md` | Lighting | Light types (ambient, directional, point, spot, area), shadows, IBL, environment maps || `references/shaders.md` | Shaders | GLSL, ShaderMaterial, uniforms, varyings, vertex displacement, fresnel, noise, extending built-in materials || `references/animation.md` | Animation | Keyframe animation, AnimationMixer, skeletal animation, morph targets, blending, procedural motion || `references/postprocessing.md` | Post-Processing | EffectComposer, bloom, DOF, SSAO, FXAA/SMAA, custom ShaderPass, multi-pass rendering || `references/loaders.md` | Loaders | GLTF/GLB, Draco, KTX2, OBJ, FBX, texture loading, async patterns, caching || `references/interaction.md` | Interaction | Raycasting, OrbitControls, FlyControls, PointerLockControls, drag, selection, coordinate conversion |## UsageCRITICAL RULE: Before answering any Three.js question, MUST grep `references/`for relevant keywords to find the most specific guidance. Do not rely on generalknowledge when detailed reference material is available.```# Example: user asks about bloom effectgrep -l "bloom" references/# -> references/postprocessing.md```NEVER guess at Three.js API details. Always check the reference files for exactconstructor signatures, property names, and import paths.## Quick Links by Task- **Setting up a scene** -> fundamentals.md- **Creating 3D shapes** -> geometry.md- **Styling meshes / PBR** -> materials.md- **Adding images to surfaces** -> textures.md- **Adding lights / shadows** -> lighting.md- **Custom visual effects** -> shaders.md- **Moving things / playing animations** -> animation.md- **Bloom, blur, screen effects** -> postprocessing.md- **Loading models / assets** -> loaders.md- **Click detection / camera controls** -> interaction.md

Frequently asked questions