skills.rest
imanlangaran
imanlangaranCOMMUNITY
Explore all skills by this author →
GitHub

r3f-textures

Load and configure textures, environment maps, and render targets in React Three Fiber scenes.

1|Updated Aug 20, 2023
Search Tags:#textures#webgl#three.js#react-three-fiber#pbr#environment-map#usetexture
One-click install
npx skills add https://github.com/imanlangaran/mini-projects --skill r3f-textures-imanlangaran
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: r3f-textures
Source: https://github.com/imanlangaran/mini-projects/tree/main/react/three-gsap/.claude/skills/r3f-textures
Command: npx skills add https://github.com/imanlangaran/mini-projects --skill r3f-textures-imanlangaran

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @react-three/fiber, @react-three/drei, three.

What problem does it solve? Loading and configuring textures in React Three Fiber involves many details—hooks, color spaces, wrapping modes, mipmaps, and Suspense handling—that are easy to get wrong, leading to washed-out colors, blurry surfaces, or broken PBR materials. ## Core Features & Use Cases - Texture Loading Hooks: Load single, multiple, or named PBR texture sets with useTexture, useLoader, and preloading support. - Environment & Special Textures: Apply HDR environments, cube maps, video textures, canvas textures, data textures, and render-to-texture FBOs. - Configuration & Performance: Set wrapping, filtering, anisotropy, sRGB color space, sprite-sheet offsets, and follow texture memory best practices. - Use Case: Build a product configurator where a sphere uses a full PBR texture set (color, normal, roughness, metalness, AO) with an HDR studio environment for realistic reflections. ## Quick Start Show me how to load a PBR texture set with useTexture and apply it to a meshStandardMaterial in my React Three Fiber scene.

Frequently Asked Questions about r3f-textures

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I load textures in React Three Fiber?▼

Use the useTexture hook from @react-three/drei, passing a URL or array of URLs, and assign the result to a material's map property. For PBR workflows, pass a named object like { map, normalMap, roughnessMap } and spread it onto meshStandardMaterial.

How to add an HDR environment map in React Three Fiber?▼

Use the Environment component from drei with a preset or the useEnvironment hook with an HDR file path. The Environment component applies scene-wide lighting and background, while useEnvironment returns a texture you can assign to a material's envMap.

useTexture vs useLoader in React Three Fiber?▼

useTexture from drei is a convenience wrapper around useLoader with TextureLoader and supports named objects for PBR sets. Use useLoader from @react-three/fiber when you need a different loader class or more direct control over the loading process.

Why do my textures look washed out in Three.js?▼

Washed-out colors usually come from incorrect color space settings. Color and albedo textures should use THREE.SRGBColorSpace, while data textures like normal, roughness, and metalness maps should stay in linear space, which is the default.

How do I preload textures to avoid pop-in?▼

Call useTexture.preload with the texture URL at module level so loading starts before the component mounts. You can also preload arrays of textures, and subsequent useTexture calls for the same URLs resolve instantly from cache.

Why does my aoMap not work on a mesh?▼

Ambient occlusion maps require a second UV channel (uv2) on the geometry. Copy the existing uv attribute to uv2 with geometry.setAttribute('uv2', geometry.attributes.uv), then the aoMap will render correctly.

Related Skills

Explore More Software Engineering Skills→
divinaarmueladivinaarmuela

threejs-textures

Implements Three.js texture loading, UV mapping, environment maps, and render targets.

Community
Intermediate
nhattran998nhattran998

Three.js

Build interactive 3D scenes with Three.js and React Three Fiber.

Community
Intermediate
mitgar14mitgar14

threejs-shaders

Build custom Three.js GLSL vertex and fragment shaders with ShaderMaterial.

Community
Advanced
tadams95tadams95
1

threejs-textures

Load and configure Three.js textures with TextureLoader, RGBELoader, and CubeTextureLoader.

Community
Intermediate