threejs-webgl — Skills — getagentictools

What it does

FOV: 45-75° for most applications

Near plane: As far as possible (avoid z-fighting)

Far plane: As close as possible (precision)

Aspect ratio: Always match canvas dimensions

MeshBasicMaterial: Unlit, flat colors (debugging, UI)

MeshLambertMaterial: Cheap diffuse lighting (mobile)

MeshPhongMaterial: Specular highlights (older standard)

threejs webgl

Source

Repository: https://github.com/freshtechbro/claudedesignskills

threejs-webgl FAQ

What does the threejs-webgl skill do?

Comprehensive skill for Three.js 3D web development. Use this skill when building interactive 3D scenes, WebGL/WebGPU applications, product configurators, 3D visualizations, or immersive web experiences. Triggers on tasks involving Three.js, 3D rendering, scenes, cameras, meshes, materials, lights, animations, textures, or WebGL/WebGPU rendering. FOV: 45-75° for most applications Near plane: As far as possible (avoid z-fighting)

What does threejs-webgl require?

Every Three.js application requires these core elements:

How do I install threejs-webgl?

Run: npx -y skills add https://github.com/freshtechbro/claudedesignskills --skill threejs-webgl --agent claude-code — the source lives at github.com/freshtechbro/claudedesignskills.

Maintain threejs-webgl?

Let people know it's listed here — add the badge (live metrics, light/dark aware) or a plain link to your README or docs.

[threejs-webgl on getagentictools](https://getagentictools.com/skills/freshtechbro-claudedesignskills-threejs-webgl?ref=badge)

npx agentictools info skills/freshtechbro-claudedesignskills-threejs-webgl

The second line is the CLI lookup for this page — handy in READMEs and docs.