
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- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads threejs-textures automatically when relevant.
- 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,anisotropycolorSpace/ correct handling of sRGB vs linear data maps- Creating
DataTexture,CubeTexture, compressed GPU formats, video/canvas driven textures PMREMGeneratorfrom environment maps for IBL
IMPORTANT: textures vs loaders
| Step | Skill |
|---|---|
| Decode file / HTTP | threejs-loaders |
Configure GPU Texture | threejs-textures |
Trigger phrases include:
- "Texture", "CubeTexture", "PMREM", "colorSpace", "mipmap", "各向异性"
- "环境贴图", "数据纹理", "压缩纹理"
How to use this skill
- Classify texture dimensionality and format (2D, cube, depth, compressed, data).
- Color pipeline: set
colorSpaceappropriately; normal/roughness maps are non-color data. - Sampling: choose filters; enable mipmaps when minification occurs; consider max anisotropy.
- PMREM: feed env map through
PMREMGeneratorper docs; assign result to scene/env/intensity paths as required. - Video/canvas: understand update needs each frame for
VideoTexture/CanvasTexture. - Disposal:
dispose()textures when replacing to free GPU memory. - KTX2/Basis: transcoder wiring belongs in threejs-loaders before this step.
See examples/workflow-pmrem-env.md.
Doc map (official)
| Docs section | Representative links |
|---|---|
| Textures | https://threejs.org/docs/Texture.html |
| Cube | https://threejs.org/docs/CubeTexture.html |
| Data | https://threejs.org/docs/DataTexture.html |
| PMREM | https://threejs.org/docs/PMREMGenerator.html |
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:
- Link
Texture,DataTexture,CubeTexture, orPMREMGeneratoras appropriate. - Tie
colorSpace/ filtering to threejs-renderers output and threejs-materials maps. - Send Draco/KTX2 decoder wiring questions to threejs-loaders first.
- Emphasize
dispose()when replacing env maps or large atlases. - Mention Global constants only when wrapping/filter enums matter.
References
- https://threejs.org/docs/#Textures
- https://threejs.org/docs/Texture.html
- https://threejs.org/docs/PMREMGenerator.html
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
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.
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.
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.
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).
Popular media & creative skills
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-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.
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.
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.
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
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