🎯

threejs-fundamentals

🎯Skill

from cloudai-x/threejs-skills

What it does

Three.js agent skills covering scene setup, cameras, renderer configuration, Object3D hierarchy, coordinate systems, and 3D rendering fundamentals.

Overview

Three.js Fundamentals is a Claude Code skill that provides comprehensive guidance for setting up 3D scenes, configuring cameras, managing renderers, and working with the Object3D hierarchy in Three.js. It covers the core building blocks needed to create 3D web applications, including scene setup, multiple camera types, coordinate systems, and responsive rendering.

Key Features

Scene Configuration - Set up scenes with backgrounds (solid color, textures, cubemaps), environment maps for PBR materials, and fog effects (linear and exponential)
Multiple Camera Types - Guidance for PerspectiveCamera (human eye simulation), OrthographicCamera (2D/isometric views), and ArrayCamera (multi-viewport rendering)
Renderer Setup - Configure WebGLRenderer with antialiasing, pixel ratio management, and responsive resizing to handle different screen densities
Animation Loop - Implement requestAnimationFrame-based render loops with object rotation, transformation, and dynamic updates
Lighting Fundamentals - Add ambient and directional lights with proper positioning for illuminating 3D scenes

Who is this for?

This skill is designed for web developers getting started with Three.js who need guidance on scene setup, camera configuration, and basic 3D rendering patterns. It is also useful for experienced Three.js developers who want AI agents to generate properly structured 3D scene initialization code following best practices.

📦

Same repository

cloudai-x/threejs-skills(10 items)

threejs-fundamentals

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code

npx vibeindex add cloudai-x/threejs-skills --skill threejs-fundamentals

skills.sh Install⚠ Installs to .agents/skills/ - may not be auto-recognized by Claude Code

npx skills add cloudai-x/threejs-skills --skill threejs-fundamentals

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/threejs-fundamentals/SKILL.md

SKILL.md

3,940Installs

1,817

Last UpdatedJan 19, 2026

View on GitHub Back to Skills

More from this repository9

🎯

threejs-animation🎯Skill

Provides Three.js animation API references, patterns, and best practices for creating 3D animations and interactive experiences.

🎯

threejs-shaders🎯Skill

Provides Three.js shader development patterns including custom WebGL shaders, GLSL code examples, and advanced rendering effects

🎯

threejs-geometry🎯Skill

Three.js agent skills covering scene setup, cameras, renderer configuration, Object3D hierarchy, coordinate systems, and 3D rendering fundamentals.

🎯

threejs-interaction🎯Skill

Three.js agent skills covering scene setup, cameras, renderer configuration, Object3D hierarchy, coordinate systems, and 3D rendering fundamentals.

🎯

threejs-materials🎯Skill

Provides Three.js material system patterns including PBR materials, textures, normal maps, environment mapping, and advanced rendering techniques

🎯

threejs-postprocessing🎯Skill

Three.js agent skills covering scene setup, cameras, renderer configuration, Object3D hierarchy, coordinate systems, and 3D rendering fundamentals.

🎯

threejs-lighting🎯Skill

Provides Three.js lighting patterns including light types, shadows, intensity controls, and techniques for realistic 3D scene illumination

🎯

threejs-loaders🎯Skill

Provides Three.js asset loading patterns for 3D models, textures, and animations using GLTF, OBJ, FBX, and other format loaders

🎯

threejs-textures🎯Skill

Provides Three.js texture patterns including texture loading, UV mapping, mipmaps, filtering, and texture animation techniques