MCPInstall

threejs-textures

three.js textures: Texture, DataTexture, CubeTexture, CompressedTexture variants, DepthTexture, VideoTexture, CanvasTexture, 3D/array textures, Source; sampling parameters, mipmaps, anisotropy, wrap/mag/min filters; PMREMGenerator in Extras for environment map prefiltering. Use when configuring GPU texture objects and PMREM; for Draco/KTX2 transcoder file paths use threejs-loaders; for material map slots use threejs-materials; for output color pipeline use threejs-renderers.

Installs
395
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-textures
  1. 01

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads threejs-textures automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

When to use this skill

ALWAYS use this skill when the user mentions:

  • texture.wrapS / wrapT, minFilter, magFilter, generateMipmaps, anisotropy
  • colorSpace / correct handling of sRGB vs linear data maps
  • Creating DataTexture, CubeTexture, compressed GPU formats, video/canvas driven textures
  • PMREMGenerator from environment maps for IBL

IMPORTANT: textures vs loaders

StepSkill
Decode file / HTTPthreejs-loaders
Configure GPU Texturethreejs-textures

Trigger phrases include:

  • "Texture", "CubeTexture", "PMREM", "colorSpace", "mipmap", "各向异性"
  • "环境贴图", "数据纹理", "压缩纹理"

How to use this skill

  1. Classify texture dimensionality and format (2D, cube, depth, compressed, data).
  2. Color pipeline: set colorSpace appropriately; normal/roughness maps are non-color data.
  3. Sampling: choose filters; enable mipmaps when minification occurs; consider max anisotropy.
  4. PMREM: feed env map through PMREMGenerator per docs; assign result to scene/env/intensity paths as required.
  5. Video/canvas: understand update needs each frame for VideoTexture / CanvasTexture.
  6. Disposal: dispose() textures when replacing to free GPU memory.
  7. KTX2/Basis: transcoder wiring belongs in threejs-loaders before this step.

See examples/workflow-pmrem-env.md.

Doc map (official)

Scope

  • In scope: Core Textures + PMREMGenerator; sampling and color pipeline at texture level.
  • Out of scope: Loader configuration; post-processing passes that sample buffers (threejs-postprocessing).

Common pitfalls and best practices

  • sRGB albedo in linear workflow without proper colorSpace looks wrong next to renderer output.
  • Non-power-of-two textures have mip/wrap limitations unless padded.
  • Forgetting texture disposal on hot reload leaks VRAM.

Documentation and version

Texture classes and PMREMGenerator are documented under Textures and PMREMGenerator in three.js docs. Compressed and KTX2 paths often depend on threejs-loaders for transcoder setup before this skill applies.

Agent response checklist

When answering under this skill, prefer responses that:

  1. Link Texture, DataTexture, CubeTexture, or PMREMGenerator as appropriate.
  2. Tie colorSpace / filtering to threejs-renderers output and threejs-materials maps.
  3. Send Draco/KTX2 decoder wiring questions to threejs-loaders first.
  4. Emphasize dispose() when replacing env maps or large atlases.
  5. Mention Global constants only when wrapping/filter enums matter.

References

Keywords

English: texture, cubemap, pmrem, mipmap, colorspace, compressed texture, data texture, three.js

中文: 纹理、立方体贴图、PMREM、mipmap、色彩空间、压缩纹理、three.js

FAQ

What does the threejs-textures skill do?

three.js textures: Texture, DataTexture, CubeTexture, CompressedTexture variants, DepthTexture, VideoTexture, CanvasTexture, 3D/array textures, Source; sampling parameters, mipmaps, anisotropy, wrap/mag/min filters; PMREMGenerator in Extras for environment map prefiltering. Use when configuring GPU texture objects and PMREM; for Draco/KTX2 transcoder file paths use threejs-loaders; for material map slots use threejs-materials; for output color pipeline use threejs-renderers.

How do I install threejs-textures?

Run npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-textures in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/threejs-textures/ (personal) or .claude/skills/threejs-textures/ (project).

Which AI agents can use threejs-textures?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is threejs-textures safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains threejs-textures?

It is published by full-stack-skills in full-stack-skills/threejs-skills. It has 395 recorded installs.

More from full-stack-skills/threejs-skills

View all →

threejs-materials

full-stack-skills/threejs-skills

Classic three.js materials (non-Node): MeshStandardMaterial, MeshPhysicalMaterial, Phong/Lambert/Toon/Basic, Line/Points/Sprite materials, MeshMatcapMaterial, MeshNormalMaterial, depth/distance materials, ShaderMaterial and RawShaderMaterial. Use when tuning PBR maps, transparency, depth write, skinning flags, or writing GLSL in ShaderMaterial; for TSL/NodeMaterial/WebGPU shader graphs use threejs-node-tsl instead—not both for the same authoring path unless migrating.

Docs & Writing418 installs

threejs-animation

full-stack-skills/threejs-skills

three.js keyframe animation system: AnimationMixer, AnimationClip, AnimationAction, KeyframeTrack variants, PropertyBinding, PropertyMixer, AnimationObjectGroup, AnimationUtils; mixing and crossfading clips, loop modes, timeScale, weight; addon AnimationClipCreator and CCDIKSolver for procedural rigs. Use when playing glTF clips, blending actions, or authoring procedural tracks; for skin deformation rigging on meshes see threejs-objects; for math interpolants without clips see threejs-math only when not tied to AnimationMixer.

Frontend & Design415 installs

threejs-renderers

full-stack-skills/threejs-skills

Core rendering pipeline for three.js using WebGLRenderer and WebGPURenderer, canvas sizing, device pixel ratio, color space and tone mapping, output encoding, WebGL/WebGPU render targets, Info statistics, and addon overlay renderers (CSS2D/CSS3D/SVG). Use when tuning the draw loop, performance, or switching WebGPU vs WebGL; for EffectComposer passes use threejs-postprocessing; for XR session lifecycle use threejs-webxr; for shader graphs use threejs-node-tsl.

threejs-lights

full-stack-skills/threejs-skills

three.js lighting: AmbientLight, HemisphereLight, DirectionalLight, PointLight, SpotLight, RectAreaLight, LightProbe, IESSpotLight, ProjectorLight, shadow subtypes, and addon helpers such as RectAreaLightUniformsLib, RectAreaLightTexturesLib, LightProbeGenerator, TiledLighting. Use when configuring direct/indirect light, shadows, probes, or area lights; for IES file loading use threejs-loaders; for node-based light graphs use threejs-node-tsl; for debug helpers use threejs-helpers.

threejs-camera

full-stack-skills/threejs-skills

three.js cameras: Camera base, PerspectiveCamera, OrthographicCamera, CubeCamera, ArrayCamera, StereoCamera; projection matrices, aspect, FOV, orthographic frustum sizes, near/far planes, and dynamic environment maps with CubeCamera. Use when placing views, rendering reflections, or multi-view splits; for XR projections and eye matrices use threejs-webxr; for post pass camera tricks use threejs-postprocessing alongside threejs-renderers.

410 installs

threejs-postprocessing

full-stack-skills/threejs-skills

Addon screen-space post-processing for three.js using EffectComposer, Pass base class, RenderPass, and stock passes such as UnrealBloomPass, SSAOPass, SSRPass, BokehPass, OutlinePass, FXAAPass/SMAAPass, TAARenderPass, and ShaderPass; references the Shaders addon group for underlying shader modules; contrasts with core PostProcessing class used in node/WebGPU stacks (see threejs-node-tsl and threejs-renderers). Use when building composer chains—not for basic renderer tone mapping alone (threejs-renderers).

Business & Finance404 installs

Popular media & creative skills

View category →

hyperframes

heygen-com/hyperframes

Read first to make, edit, animate or render any video with HyperFrames (HTML rendered to video), including launch films, explainers, music videos, charts, maps, vertical clips, title cards, captions and overlays. Holds the render contract, the work loop and what each kind of video needs.

Media & Creative1.2M installs

media-use

heygen-com/hyperframes

Get or make any media for a HyperFrames video - music, sound effects, images, icons, logos, voiceover, avatar and generated video, transcripts, cutouts, colour grades and looks - with HeyGen or free local tools, and mix placed audio. Also for footage that looks dark, flat or dull, or should be stylized or hidden.

Media & Creative1.1M installs

hyperframes-registry

heygen-com/hyperframes

About 450 ready-made HyperFrames blocks and components installed as editable source - transitions, overlays, titles, kinetic type, captions, charts, map overlays, 3D, camera moves. Use it before hand-building any named visual (CRT scanlines, glitch, film grain, a chart); also for hyperframes add and catalog.

Media & Creative1M installs

hyperframes-creative

heygen-com/hyperframes

Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, composition patterns, and brand / style decisions. For atomic motion patterns and scene blueprints, use hyperframes-animation.

Media & Creative916.5K installs

ai-video-generation

101-skills/superpowers

Generate AI videos with Google Veo, Seedance 2.0, HappyHorse, Wan, Grok and 40+ models via inference.sh CLI. Models: Veo 3.1, Veo 3, Seedance 2.0, HappyHorse 1.0, Wan 2.5, Grok Imagine Video, OmniHuman, Fabric, HunyuanVideo. Capabilities: text-to-video, image-to-video, reference-to-video, video editing, lipsync, avatar animation, video upscaling, foley sound. Use for: social media videos, marketing content, explainer videos, product demos, AI avatars. Triggers: video generation, ai video, text to video, image to video, veo, animate image, video from image, ai animation, video generator, generate video, t2v, i2v, ai video maker, create video with ai, runway alternative, pika alternative, sora alternative, kling alternative, seedance, happyhorse

Media & Creative881.5K installs

ai-image-generation

101-skills/superpowers

Generate AI images with GPT-Image-2, FLUX, Gemini, Grok, Seedream, Reve and 50+ models via inference.sh CLI. Models: GPT-Image-2, FLUX Dev LoRA, FLUX.2 Klein LoRA, Gemini 3 Pro Image, Grok Imagine, Seedream 4.5, Reve, ImagineArt. Capabilities: text-to-image, image-to-image, inpainting, LoRA, image editing, upscaling, text rendering. Use for: AI art, product mockups, concept art, social media graphics, marketing visuals, illustrations. Triggers: flux, image generation, ai image, text to image, stable diffusion, generate image, ai art, midjourney alternative, dall-e alternative, text2img, t2i, image generator, ai picture, create image with ai, generative ai, ai illustration, grok image, gemini image, gpt image, openai image, chatgpt image

Media & Creative880.3K installs