{"id":"d9907c6a-c9b4-48c7-8b71-a8a29bec5ec6","shortId":"zU9BfS","kind":"skill","title":"threejs-textures","tagline":"Three.js textures - texture types, UV mapping, environment maps, texture settings. Use when working with images, UV coordinates, cubemaps, HDR environments, or texture optimization.","description":"# Three.js Textures\n\n## When to Use\n- You need to load, configure, or optimize textures in Three.js.\n- The task involves UV mapping, texture settings, cubemaps, environment maps, or HDR texture workflows.\n- You are working on surface detail and material inputs rather than geometry or animation.\n\n## Quick Start\n\n```javascript\nimport * as THREE from \"three\";\n\n// Load texture\nconst loader = new THREE.TextureLoader();\nconst texture = loader.load(\"texture.jpg\");\n\n// Apply to material\nconst material = new THREE.MeshStandardMaterial({\n  map: texture,\n});\n```\n\n## Texture Loading\n\n### Basic Loading\n\n```javascript\nconst loader = new THREE.TextureLoader();\n\n// Async with callbacks\nloader.load(\n  \"texture.jpg\",\n  (texture) => console.log(\"Loaded\"),\n  (progress) => console.log(\"Progress\"),\n  (error) => console.error(\"Error\"),\n);\n\n// Synchronous style (loads async internally)\nconst texture = loader.load(\"texture.jpg\");\nmaterial.map = texture;\n```\n\n### Promise Wrapper\n\n```javascript\nfunction loadTexture(url) {\n  return new Promise((resolve, reject) => {\n    new THREE.TextureLoader().load(url, resolve, undefined, reject);\n  });\n}\n\n// Usage\nconst [colorMap, normalMap, roughnessMap] = await Promise.all([\n  loadTexture(\"color.jpg\"),\n  loadTexture(\"normal.jpg\"),\n  loadTexture(\"roughness.jpg\"),\n]);\n```\n\n## Texture Configuration\n\n### Color Space\n\nCritical for accurate color reproduction.\n\n```javascript\n// Color/albedo textures - use sRGB\ncolorTexture.colorSpace = THREE.SRGBColorSpace;\n\n// Data textures (normal, roughness, metalness, AO) - leave as default\n// Do NOT set colorSpace for data textures (NoColorSpace is default)\n```\n\n### Wrapping Modes\n\n```javascript\ntexture.wrapS = THREE.RepeatWrapping; // Horizontal\ntexture.wrapT = THREE.RepeatWrapping; // Vertical\n\n// Options:\n// THREE.ClampToEdgeWrapping - Stretches edge pixels (default)\n// THREE.RepeatWrapping - Tiles the texture\n// THREE.MirroredRepeatWrapping - Tiles with mirror flip\n```\n\n### Repeat, Offset, Rotation\n\n```javascript\n// Tile texture 4x4\ntexture.repeat.set(4, 4);\ntexture.wrapS = THREE.RepeatWrapping;\ntexture.wrapT = THREE.RepeatWrapping;\n\n// Offset (0-1 range)\ntexture.offset.set(0.5, 0.5);\n\n// Rotation (radians, around center)\ntexture.rotation = Math.PI / 4;\ntexture.center.set(0.5, 0.5); // Rotation pivot\n```\n\n### Filtering\n\n```javascript\n// Minification (texture larger than screen pixels)\ntexture.minFilter = THREE.LinearMipmapLinearFilter; // Default, smooth\ntexture.minFilter = THREE.NearestFilter; // Pixelated\ntexture.minFilter = THREE.LinearFilter; // Smooth, no mipmaps\n\n// Magnification (texture smaller than screen pixels)\ntexture.magFilter = THREE.LinearFilter; // Smooth (default)\ntexture.magFilter = THREE.NearestFilter; // Pixelated (retro games)\n\n// Anisotropic filtering (sharper at angles)\ntexture.anisotropy = renderer.capabilities.getMaxAnisotropy();\n```\n\n### Generate Mipmaps\n\n```javascript\n// Usually true by default\ntexture.generateMipmaps = true;\n\n// Disable for non-power-of-2 textures or data textures\ntexture.generateMipmaps = false;\ntexture.minFilter = THREE.LinearFilter;\n```\n\n## Texture Types\n\n### Regular Texture\n\n```javascript\nconst texture = new THREE.Texture(image);\ntexture.needsUpdate = true;\n```\n\n### Data Texture\n\nCreate texture from raw data.\n\n```javascript\n// Create gradient texture\nconst size = 256;\nconst data = new Uint8Array(size * size * 4);\n\nfor (let i = 0; i < size; i++) {\n  for (let j = 0; j < size; j++) {\n    const index = (i * size + j) * 4;\n    data[index] = i; // R\n    data[index + 1] = j; // G\n    data[index + 2] = 128; // B\n    data[index + 3] = 255; // A\n  }\n}\n\nconst texture = new THREE.DataTexture(data, size, size);\ntexture.needsUpdate = true;\n```\n\n### Canvas Texture\n\n```javascript\nconst canvas = document.createElement(\"canvas\");\ncanvas.width = 256;\ncanvas.height = 256;\nconst ctx = canvas.getContext(\"2d\");\n\n// Draw on canvas\nctx.fillStyle = \"red\";\nctx.fillRect(0, 0, 256, 256);\nctx.fillStyle = \"white\";\nctx.font = \"48px Arial\";\nctx.fillText(\"Hello\", 50, 150);\n\nconst texture = new THREE.CanvasTexture(canvas);\n\n// Update when canvas changes\ntexture.needsUpdate = true;\n```\n\n### Video Texture\n\n```javascript\nconst video = document.createElement(\"video\");\nvideo.src = \"video.mp4\";\nvideo.loop = true;\nvideo.muted = true;\nvideo.play();\n\nconst texture = new THREE.VideoTexture(video);\ntexture.colorSpace = THREE.SRGBColorSpace;\n\n// No need to set needsUpdate - auto-updates\n```\n\n### Compressed Textures\n\n```javascript\nimport { KTX2Loader } from \"three/examples/jsm/loaders/KTX2Loader.js\";\n\nconst ktx2Loader = new KTX2Loader();\nktx2Loader.setTranscoderPath(\"path/to/basis/\");\nktx2Loader.detectSupport(renderer);\n\nktx2Loader.load(\"texture.ktx2\", (texture) => {\n  material.map = texture;\n});\n```\n\n## Cube Textures\n\nFor environment maps and skyboxes.\n\n### CubeTextureLoader\n\n```javascript\nconst loader = new THREE.CubeTextureLoader();\nconst cubeTexture = loader.load([\n  \"px.jpg\",\n  \"nx.jpg\", // +X, -X\n  \"py.jpg\",\n  \"ny.jpg\", // +Y, -Y\n  \"pz.jpg\",\n  \"nz.jpg\", // +Z, -Z\n]);\n\n// As background\nscene.background = cubeTexture;\n\n// As environment map\nscene.environment = cubeTexture;\nmaterial.envMap = cubeTexture;\n```\n\n### Equirectangular to Cubemap\n\n```javascript\nimport { RGBELoader } from \"three/examples/jsm/loaders/RGBELoader.js\";\n\nconst pmremGenerator = new THREE.PMREMGenerator(renderer);\npmremGenerator.compileEquirectangularShader();\n\nnew RGBELoader().load(\"environment.hdr\", (texture) => {\n  const envMap = pmremGenerator.fromEquirectangular(texture).texture;\n  scene.environment = envMap;\n  scene.background = envMap;\n\n  texture.dispose();\n  pmremGenerator.dispose();\n});\n```\n\n## HDR Textures\n\n### RGBELoader\n\n```javascript\nimport { RGBELoader } from \"three/examples/jsm/loaders/RGBELoader.js\";\n\nconst loader = new RGBELoader();\nloader.load(\"environment.hdr\", (texture) => {\n  texture.mapping = THREE.EquirectangularReflectionMapping;\n  scene.environment = texture;\n  scene.background = texture;\n});\n```\n\n### EXRLoader\n\n```javascript\nimport { EXRLoader } from \"three/examples/jsm/loaders/EXRLoader.js\";\n\nconst loader = new EXRLoader();\nloader.load(\"environment.exr\", (texture) => {\n  texture.mapping = THREE.EquirectangularReflectionMapping;\n  scene.environment = texture;\n});\n```\n\n### Background Options\n\n```javascript\nscene.background = texture;\nscene.backgroundBlurriness = 0.5; // 0-1, blur background\nscene.backgroundIntensity = 1.0; // Brightness\nscene.backgroundRotation.y = Math.PI; // Rotate background\n```\n\n## Render Targets\n\nRender to texture for effects.\n\n```javascript\n// Create render target\nconst renderTarget = new THREE.WebGLRenderTarget(512, 512, {\n  minFilter: THREE.LinearFilter,\n  magFilter: THREE.LinearFilter,\n  format: THREE.RGBAFormat,\n});\n\n// Render scene to target\nrenderer.setRenderTarget(renderTarget);\nrenderer.render(scene, camera);\nrenderer.setRenderTarget(null); // Back to screen\n\n// Use as texture\nmaterial.map = renderTarget.texture;\n```\n\n### Depth Texture\n\n```javascript\nconst renderTarget = new THREE.WebGLRenderTarget(512, 512);\nrenderTarget.depthTexture = new THREE.DepthTexture(\n  512,\n  512,\n  THREE.UnsignedShortType,\n);\n\n// Access depth\nconst depthTexture = renderTarget.depthTexture;\n```\n\n### Multi-Sample Render Target\n\n```javascript\nconst renderTarget = new THREE.WebGLRenderTarget(512, 512, {\n  samples: 4, // MSAA\n});\n```\n\n## CubeCamera\n\nDynamic environment maps for reflections.\n\n```javascript\nconst cubeRenderTarget = new THREE.WebGLCubeRenderTarget(256, {\n  generateMipmaps: true,\n  minFilter: THREE.LinearMipmapLinearFilter,\n});\n\nconst cubeCamera = new THREE.CubeCamera(0.1, 1000, cubeRenderTarget);\nscene.add(cubeCamera);\n\n// Apply to reflective material\nreflectiveMaterial.envMap = cubeRenderTarget.texture;\n\n// Update in animation loop (expensive!)\nfunction animate() {\n  // Hide reflective object, update env map, show again\n  reflectiveObject.visible = false;\n  cubeCamera.position.copy(reflectiveObject.position);\n  cubeCamera.update(renderer, scene);\n  reflectiveObject.visible = true;\n}\n```\n\n## UV Mapping\n\n### Accessing UVs\n\n```javascript\nconst uvs = geometry.attributes.uv;\n\n// Read UV\nconst u = uvs.getX(vertexIndex);\nconst v = uvs.getY(vertexIndex);\n\n// Modify UV\nuvs.setXY(vertexIndex, newU, newV);\nuvs.needsUpdate = true;\n```\n\n### Second UV Channel (for AO maps)\n\n```javascript\n// Required for aoMap\ngeometry.setAttribute(\"uv2\", geometry.attributes.uv);\n\n// Or create custom second UV\nconst uv2 = new Float32Array(vertexCount * 2);\n// ... fill uv2 data\ngeometry.setAttribute(\"uv2\", new THREE.BufferAttribute(uv2, 2));\n```\n\n### UV Transform in Shader\n\n```javascript\nconst material = new THREE.ShaderMaterial({\n  uniforms: {\n    map: { value: texture },\n    uvOffset: { value: new THREE.Vector2(0, 0) },\n    uvScale: { value: new THREE.Vector2(1, 1) },\n  },\n  vertexShader: `\n    varying vec2 vUv;\n    uniform vec2 uvOffset;\n    uniform vec2 uvScale;\n\n    void main() {\n      vUv = uv * uvScale + uvOffset;\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n    }\n  `,\n  fragmentShader: `\n    varying vec2 vUv;\n    uniform sampler2D map;\n\n    void main() {\n      gl_FragColor = texture2D(map, vUv);\n    }\n  `,\n});\n```\n\n## Texture Atlas\n\nMultiple images in one texture.\n\n```javascript\n// Atlas with 4 sprites (2x2 grid)\nconst atlas = loader.load(\"atlas.png\");\natlas.wrapS = THREE.ClampToEdgeWrapping;\natlas.wrapT = THREE.ClampToEdgeWrapping;\n\n// Select sprite by UV offset/scale\nfunction selectSprite(row, col, gridSize = 2) {\n  atlas.offset.set(col / gridSize, 1 - (row + 1) / gridSize);\n  atlas.repeat.set(1 / gridSize, 1 / gridSize);\n}\n\n// Select top-left sprite\nselectSprite(0, 0);\n```\n\n## Material Texture Maps\n\n### PBR Texture Set\n\n```javascript\nconst material = new THREE.MeshStandardMaterial({\n  // Base color (sRGB)\n  map: colorTexture,\n\n  // Surface detail (Linear)\n  normalMap: normalTexture,\n  normalScale: new THREE.Vector2(1, 1),\n\n  // Roughness (Linear, grayscale)\n  roughnessMap: roughnessTexture,\n  roughness: 1, // Multiplier\n\n  // Metalness (Linear, grayscale)\n  metalnessMap: metalnessTexture,\n  metalness: 1, // Multiplier\n\n  // Ambient occlusion (Linear, uses uv2)\n  aoMap: aoTexture,\n  aoMapIntensity: 1,\n\n  // Self-illumination (sRGB)\n  emissiveMap: emissiveTexture,\n  emissive: 0xffffff,\n  emissiveIntensity: 1,\n\n  // Vertex displacement (Linear)\n  displacementMap: displacementTexture,\n  displacementScale: 0.1,\n  displacementBias: 0,\n\n  // Alpha (Linear)\n  alphaMap: alphaTexture,\n  transparent: true,\n});\n\n// Don't forget UV2 for AO\ngeometry.setAttribute(\"uv2\", geometry.attributes.uv);\n```\n\n### Normal Map Types\n\n```javascript\n// OpenGL style normals (default)\nmaterial.normalMapType = THREE.TangentSpaceNormalMap;\n\n// Object space normals\nmaterial.normalMapType = THREE.ObjectSpaceNormalMap;\n```\n\n## Procedural Textures\n\n### Noise Texture\n\n```javascript\nfunction generateNoiseTexture(size = 256) {\n  const data = new Uint8Array(size * size * 4);\n\n  for (let i = 0; i < size * size; i++) {\n    const value = Math.random() * 255;\n    data[i * 4] = value;\n    data[i * 4 + 1] = value;\n    data[i * 4 + 2] = value;\n    data[i * 4 + 3] = 255;\n  }\n\n  const texture = new THREE.DataTexture(data, size, size);\n  texture.needsUpdate = true;\n  return texture;\n}\n```\n\n### Gradient Texture\n\n```javascript\nfunction generateGradientTexture(color1, color2, size = 256) {\n  const canvas = document.createElement(\"canvas\");\n  canvas.width = size;\n  canvas.height = 1;\n  const ctx = canvas.getContext(\"2d\");\n\n  const gradient = ctx.createLinearGradient(0, 0, size, 0);\n  gradient.addColorStop(0, color1);\n  gradient.addColorStop(1, color2);\n\n  ctx.fillStyle = gradient;\n  ctx.fillRect(0, 0, size, 1);\n\n  return new THREE.CanvasTexture(canvas);\n}\n```\n\n## Texture Memory Management\n\n### Dispose Textures\n\n```javascript\n// Single texture\ntexture.dispose();\n\n// Material textures\nfunction disposeMaterial(material) {\n  const maps = [\n    \"map\",\n    \"normalMap\",\n    \"roughnessMap\",\n    \"metalnessMap\",\n    \"aoMap\",\n    \"emissiveMap\",\n    \"displacementMap\",\n    \"alphaMap\",\n    \"envMap\",\n    \"lightMap\",\n    \"bumpMap\",\n    \"specularMap\",\n  ];\n\n  maps.forEach((mapName) => {\n    if (material[mapName]) {\n      material[mapName].dispose();\n    }\n  });\n\n  material.dispose();\n}\n```\n\n### Texture Pooling\n\n```javascript\nclass TexturePool {\n  constructor() {\n    this.textures = new Map();\n    this.loader = new THREE.TextureLoader();\n  }\n\n  async get(url) {\n    if (this.textures.has(url)) {\n      return this.textures.get(url);\n    }\n\n    const texture = await new Promise((resolve, reject) => {\n      this.loader.load(url, resolve, undefined, reject);\n    });\n\n    this.textures.set(url, texture);\n    return texture;\n  }\n\n  dispose(url) {\n    const texture = this.textures.get(url);\n    if (texture) {\n      texture.dispose();\n      this.textures.delete(url);\n    }\n  }\n\n  disposeAll() {\n    this.textures.forEach((t) => t.dispose());\n    this.textures.clear();\n  }\n}\n```\n\n## Performance Tips\n\n1. **Use power-of-2 dimensions**: 256, 512, 1024, 2048\n2. **Compress textures**: KTX2/Basis for web delivery\n3. **Use texture atlases**: Reduce texture switches\n4. **Enable mipmaps**: For distant objects\n5. **Limit texture size**: 2048 usually sufficient for web\n6. **Reuse textures**: Same texture = better batching\n\n```javascript\n// Check texture memory\nconsole.log(renderer.info.memory.textures);\n\n// Optimize for mobile\nconst maxSize = renderer.capabilities.maxTextureSize;\nconst isMobile = /iPhone|iPad|Android/i.test(navigator.userAgent);\nconst textureSize = isMobile ? 1024 : 2048;\n```\n\n## KTX2Loader BC3 Alpha Fix (r183)\n\nAs of r183, `KTX2Loader` correctly handles BC3 compressed textures with alpha channels, fixing previously incorrect alpha rendering.\n\n## ISO 21496-1 Gainmap Metadata (r183)\n\nThree.js r183 supports ISO 21496-1 gainmap metadata in HDR textures, enabling proper tone mapping of gainmap-based HDR images (such as those produced by recent smartphone cameras).\n\n## See Also\n\n- `threejs-materials` - Applying textures to materials\n- `threejs-loaders` - Loading texture files\n- `threejs-shaders` - Custom texture sampling\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["threejs","textures","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-threejs-textures","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/threejs-textures","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34460 github stars · SKILL.md body (14,402 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T06:52:02.171Z","embedding":null,"createdAt":"2026-04-18T21:46:23.819Z","updatedAt":"2026-04-22T06:52:02.171Z","lastSeenAt":"2026-04-22T06:52:02.171Z","tsv":"'-1':237,610,1317,1326 '/iphone':1284 '0':236,356,363,422,423,609,829,830,925,926,996,1046,1109,1110,1112,1114,1122,1123 '0.1':718,994 '0.5':240,241,250,251,608 '0xffffff':985 '1':379,835,836,910,912,915,917,951,952,959,967,977,987,1062,1101,1117,1125,1223 '1.0':614,859 '1000':719 '1024':1232,1291 '128':385 '150':434 '2':311,384,802,811,906,1067,1228,1234 '2048':1233,1258,1292 '21496':1316,1325 '255':390,1054,1073 '256':345,409,411,424,425,709,1035,1093,1230 '2d':415,1105 '2x2':886 '3':389,1072,1241 '4':229,230,248,352,372,696,884,1042,1057,1061,1066,1071,1248 '48px':429 '4x4':227 '5':1254 '50':433 '512':636,637,670,671,675,676,693,694,1231 '6':1263 'access':678,755 'accur':168 'alpha':997,1295,1308,1313 'alphamap':999,1153 'alphatextur':1000 'also':1351 'ambient':969 'android/i.test':1286 'angl':293 'anim':69,731,735 'anisotrop':289 'ao':183,783,1008 'aomap':788,974,1150 'aomapintens':976 'aotextur':975 'appli':88,723,1355 'arial':430 'around':244 'ask':1404 'async':106,123,1179 'atlas':875,882,889,1244 'atlas.offset.set':907 'atlas.png':891 'atlas.repeat.set':914 'atlas.wraps':892 'atlas.wrapt':894 'auto':473 'auto-upd':472 'await':154,1190 'b':386 'back':655 'background':524,602,612,620 'base':938,1339 'basic':99 'batch':1269 'bc3':1294,1304 'better':1268 'blur':611 'boundari':1412 'bright':615 'bumpmap':1156 'callback':108 'camera':652,1349 'canva':401,405,407,418,439,442,1095,1097,1129 'canvas.getcontext':414,1104 'canvas.height':410,1100 'canvas.width':408,1098 'center':245 'chang':443 'channel':781,1309 'check':1271 'clarif':1406 'class':1170 'clear':1379 'col':904,908 'color':164,169,939 'color.jpg':157 'color/albedo':172 'color1':1090,1115 'color2':1091,1118 'colormap':151 'colorspac':190 'colortextur':942 'colortexture.colorspace':176 'compress':475,1235,1305 'configur':36,163 'console.error':118 'console.log':112,115,1274 'const':80,84,91,102,125,150,325,343,346,367,392,404,412,435,449,460,482,504,508,542,553,572,591,632,666,680,689,705,714,758,763,767,797,817,888,934,1036,1051,1074,1094,1102,1106,1144,1188,1207,1279,1282,1288 'constructor':1172 'coordin':20 'correct':1302 'creat':334,340,629,793 'criteria':1415 'critic':166 'ctx':413,1103 'ctx.createlineargradient':1108 'ctx.fillrect':421,1121 'ctx.fillstyle':419,426,1119 'ctx.filltext':431 'ctx.font':428 'cube':495 'cubecamera':698,715,722 'cubecamera.position.copy':746 'cubecamera.update':748 'cubemap':21,49,536 'cuberendertarget':706,720 'cuberendertarget.texture':728 'cubetextur':509,526,531,533 'cubetextureload':502 'custom':794,1368 'data':178,192,314,332,338,347,373,377,382,387,396,805,1037,1055,1059,1064,1069,1078 'default':186,196,211,264,283,302,1019 'deliveri':1240 'depth':663,679 'depthtextur':681 'describ':1383 'detail':61,944 'dimens':1229 'disabl':305 'displac':989 'displacementbia':995 'displacementmap':991,1152 'displacementscal':993 'displacementtextur':992 'dispos':1133,1165,1205 'disposeal':1216 'disposemateri':1142 'distant':1252 'document.createelement':406,451,1096 'draw':416 'dynam':699 'edg':209 'effect':627 'emiss':984 'emissiveintens':986 'emissivemap':982,1151 'emissivetextur':983 'enabl':1249,1332 'env':740 'environ':10,23,50,498,528,700,1395 'environment-specif':1394 'environment.exr':596 'environment.hdr':551,577 'envmap':554,559,561,1154 'equirectangular':534 'error':117,119 'expens':733 'expert':1400 'exrload':585,588,594 'fals':317,745 'file':1364 'fill':803 'filter':254,290 'fix':1296,1310 'flip':220 'float32array':800 'forget':1005 'format':642 'fragcolor':870 'fragmentshad':860 'function':134,734,901,1032,1088,1141 'g':381 'gainmap':1318,1327,1338 'gainmap-bas':1337 'game':288 'generat':296 'generategradienttextur':1089 'generatemipmap':710 'generatenoisetextur':1033 'geometri':67 'geometry.attributes.uv':760,791,1011 'geometry.setattribute':789,806,1009 'get':1180 'gl':853,869 'gradient':341,1085,1107,1120 'gradient.addcolorstop':1113,1116 'grayscal':955,963 'grid':887 'gridsiz':905,909,913,916,918 'handl':1303 'hdr':22,53,564,1330,1340 'hello':432 'hide':736 'horizont':202 'illumin':980 'imag':18,329,877,1341 'import':73,478,538,568,587 'incorrect':1312 'index':368,374,378,383,388 'input':64,1409 'intern':124 'involv':44 'ipad':1285 'ismobil':1283,1290 'iso':1315,1324 'j':362,364,366,371,380 'javascript':72,101,133,171,199,224,255,298,324,339,403,448,477,503,537,567,586,604,628,665,688,704,757,785,816,881,933,1015,1031,1087,1135,1169,1270 'ktx2/basis':1237 'ktx2loader':479,483,485,1293,1301 'ktx2loader.detectsupport':488 'ktx2loader.load':490 'ktx2loader.settranscoderpath':486 'larger':258 'leav':184 'left':922 'let':354,361,1044 'lightmap':1155 'limit':1255,1371 'linear':945,954,962,971,990,998 'load':35,78,98,100,113,122,144,550,1362 'loader':81,103,505,573,592,1361 'loader.load':86,109,127,510,576,595,890 'loadtextur':135,156,158,160 'loop':732 'magfilt':640 'magnif':274 'main':848,868 'manag':1132 'map':9,11,46,51,95,499,529,701,741,754,784,822,866,872,929,941,1013,1145,1146,1175,1335 'mapnam':1159,1162,1164 'maps.foreach':1158 'match':1380 'materi':63,90,92,726,818,927,935,1139,1143,1161,1163,1354,1358 'material.dispose':1166 'material.envmap':532 'material.map':129,493,661 'material.normalmaptype':1020,1025 'math.pi':247,618 'math.random':1053 'maxsiz':1280 'memori':1131,1273 'metadata':1319,1328 'metal':182,961,966 'metalnessmap':964,1149 'metalnesstextur':965 'minfilt':638,712 'minif':256 'mipmap':273,297,1250 'mirror':219 'miss':1417 'mobil':1278 'mode':198 'modelviewmatrix':856 'modifi':771 'msaa':697 'multi':684 'multi-sampl':683 'multipl':876 'multipli':960,968 'navigator.useragent':1287 'need':33,468 'needsupd':471 'new':82,93,104,138,142,327,348,394,437,462,484,506,544,548,574,593,634,668,673,691,707,716,799,808,819,827,833,936,949,1038,1076,1127,1174,1177,1191 'newu':775 'newv':776 'nocolorspac':194 'nois':1029 'non':308 'non-power-of':307 'normal':180,1012,1018,1024 'normal.jpg':159 'normalmap':152,946,1147 'normalscal':948 'normaltextur':947 'null':654 'nx.jpg':512 'ny.jpg':516 'nz.jpg':520 'object':738,1022,1253 'occlus':970 'offset':222,235 'offset/scale':900 'one':879 'opengl':1016 'optim':26,38,1276 'option':206,603 'output':1389 'path/to/basis':487 'pbr':930 'perform':1221 'permiss':1410 'pivot':253 'pixel':210,261,268,279,286 'pmremgener':543 'pmremgenerator.compileequirectangularshader':547 'pmremgenerator.dispose':563 'pmremgenerator.fromequirectangular':555 'pool':1168 'posit':854,858 'power':309,1226 'power-of':1225 'previous':1311 'procedur':1027 'produc':1345 'progress':114,116 'projectionmatrix':855 'promis':131,139,1192 'promise.all':155 'proper':1333 'px.jpg':511 'py.jpg':515 'pz.jpg':519 'quick':70 'r':376 'r183':1297,1300,1320,1322 'radian':243 'rang':238 'rather':65 'raw':337 'read':761 'recent':1347 'red':420 'reduc':1245 'reflect':703,725,737 'reflectivematerial.envmap':727 'reflectiveobject.position':747 'reflectiveobject.visible':744,751 'regular':322 'reject':141,148,1194,1199 'render':489,546,621,623,630,644,686,749,1314 'renderer.capabilities.getmaxanisotropy':295 'renderer.capabilities.maxtexturesize':1281 'renderer.info.memory.textures':1275 'renderer.render':650 'renderer.setrendertarget':648,653 'rendertarget':633,649,667,690 'rendertarget.depthtexture':672,682 'rendertarget.texture':662 'repeat':221 'reproduct':170 'requir':786,1408 'resolv':140,146,1193,1197 'retro':287 'return':137,1083,1126,1185,1203 'reus':1264 'review':1401 'rgbeload':539,549,566,569,575 'rotat':223,242,252,619 'rough':181,953,958 'roughness.jpg':161 'roughnessmap':153,956,1148 'roughnesstextur':957 'row':903,911 'safeti':1411 'sampl':685,695,1370 'sampler2d':865 'scene':645,651,750 'scene.add':721 'scene.background':525,560,583,605 'scene.backgroundblurriness':607 'scene.backgroundintensity':613 'scene.backgroundrotation':616 'scene.environment':530,558,581,600 'scope':1382 'screen':260,278,657 'second':779,795 'see':1350 'select':896,919 'selectsprit':902,924 'self':979 'self-illumin':978 'set':13,48,189,470,932 'shader':815,1367 'sharper':291 'show':742 'singl':1136 'size':344,350,351,358,365,370,397,398,1034,1040,1041,1048,1049,1079,1080,1092,1099,1111,1124,1257 'skill':1374 'skill-threejs-textures' 'skybox':501 'smaller':276 'smartphon':1348 'smooth':265,271,282 'source-sickn33' 'space':165,1023 'specif':1396 'specularmap':1157 'sprite':885,897,923 'srgb':175,940,981 'start':71 'stop':1402 'stretch':208 'style':121,1017 'substitut':1392 'success':1414 'suffici':1260 'support':1323 'surfac':60,943 'switch':1247 'synchron':120 't.dispose':1219 'target':622,631,647,687 'task':43,1378 'test':1398 'textur':3,5,6,12,25,28,39,47,54,79,85,96,97,111,126,130,162,173,179,193,215,226,257,275,312,315,320,323,326,333,335,342,393,402,436,447,461,476,492,494,496,552,556,557,565,578,582,584,597,601,606,625,660,664,824,874,880,928,931,1028,1030,1075,1084,1086,1130,1134,1137,1140,1167,1189,1202,1204,1208,1212,1236,1243,1246,1256,1265,1267,1272,1306,1331,1356,1363,1369 'texture.anisotropy':294 'texture.center.set':249 'texture.colorspace':465 'texture.dispose':562,1138,1213 'texture.generatemipmaps':303,316 'texture.jpg':87,110,128 'texture.ktx2':491 'texture.magfilter':280,284 'texture.mapping':579,598 'texture.minfilter':262,266,269,318 'texture.needsupdate':330,399,444,1081 'texture.offset.set':239 'texture.repeat.set':228 'texture.rotation':246 'texture.wraps':200,231 'texture.wrapt':203,233 'texture2d':871 'texturepool':1171 'textures':1289 'this.loader':1176 'this.loader.load':1195 'this.textures':1173 'this.textures.clear':1220 'this.textures.delete':1214 'this.textures.foreach':1217 'this.textures.get':1186,1209 'this.textures.has':1183 'this.textures.set':1200 'three':75,77 'three.bufferattribute':809 'three.canvastexture':438,1128 'three.clamptoedgewrapping':207,893,895 'three.cubecamera':717 'three.cubetextureloader':507 'three.datatexture':395,1077 'three.depthtexture':674 'three.equirectangularreflectionmapping':580,599 'three.js':4,27,41,1321 'three.linearfilter':270,281,319,639,641 'three.linearmipmaplinearfilter':263,713 'three.meshstandardmaterial':94,937 'three.mirroredrepeatwrapping':216 'three.nearestfilter':267,285 'three.objectspacenormalmap':1026 'three.pmremgenerator':545 'three.repeatwrapping':201,204,212,232,234 'three.rgbaformat':643 'three.shadermaterial':820 'three.srgbcolorspace':177,466 'three.tangentspacenormalmap':1021 'three.texture':328 'three.textureloader':83,105,143,1178 'three.unsignedshorttype':677 'three.vector2':828,834,950 'three.videotexture':463 'three.webglcuberendertarget':708 'three.webglrendertarget':635,669,692 'three/examples/jsm/loaders/exrloader.js':590 'three/examples/jsm/loaders/ktx2loader.js':481 'three/examples/jsm/loaders/rgbeloader.js':541,571 'threej':2,1353,1360,1366 'threejs-load':1359 'threejs-materi':1352 'threejs-shad':1365 'threejs-textur':1 'tile':213,217,225 'tip':1222 'tone':1334 'top':921 'top-left':920 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'transform':813 'transpar':1001 'treat':1387 'true':300,304,331,400,445,456,458,711,752,778,1002,1082 'type':7,321,1014 'u':764 'uint8array':349,1039 'undefin':147,1198 'uniform':821,841,844,864 'updat':440,474,729,739 'url':136,145,1181,1184,1187,1196,1201,1206,1210,1215 'usag':149 'use':14,31,174,658,972,1224,1242,1372 'usual':299,1259 'uv':8,19,45,753,756,759,762,772,780,796,812,850,899 'uv2':790,798,804,807,810,973,1006,1010 'uvoffset':825,843,852 'uvs.getx':765 'uvs.gety':769 'uvs.needsupdate':777 'uvs.setxy':773 'uvscal':831,846,851 'v':768 'valid':1397 'valu':823,826,832,1052,1058,1063,1068 'vari':838,861 'vec2':839,842,845,862 'vec4':857 'vertex':988 'vertexcount':801 'vertexindex':766,770,774 'vertexshad':837 'vertic':205 'video':446,450,452,464 'video.loop':455 'video.mp4':454 'video.muted':457 'video.play':459 'video.src':453 'void':847,867 'vuv':840,849,863,873 'web':1239,1262 'white':427 'work':16,58 'workflow':55 'wrap':197 'wrapper':132 'x':513,514 'y':517,518,617 'z':521,522","prices":[{"id":"68719a8a-16dd-41ac-900a-269d75935421","listingId":"d9907c6a-c9b4-48c7-8b71-a8a29bec5ec6","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:46:23.819Z"}],"sources":[{"listingId":"d9907c6a-c9b4-48c7-8b71-a8a29bec5ec6","source":"github","sourceId":"sickn33/antigravity-awesome-skills/threejs-textures","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/threejs-textures","isPrimary":false,"firstSeenAt":"2026-04-18T21:46:23.819Z","lastSeenAt":"2026-04-22T06:52:02.171Z"}],"details":{"listingId":"d9907c6a-c9b4-48c7-8b71-a8a29bec5ec6","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"threejs-textures","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34460,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-22T06:40:00Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"a6f052d996cbb1d9f885c37e8358f981e0b9b077","skill_md_path":"skills/threejs-textures/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/threejs-textures"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"name":"threejs-textures","description":"Three.js textures - texture types, UV mapping, environment maps, texture settings. Use when working with images, UV coordinates, cubemaps, HDR environments, or texture optimization."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/threejs-textures"},"updatedAt":"2026-04-22T06:52:02.171Z"}}