R3f Textures
Load and wire color, normal, and roughness maps in React Three Fiber with useTexture, environment HDR, and PBR-friendly material setup.
Overview
R3F Textures is an agent skill for the Build phase that teaches React Three Fiber texture loading with useTexture, PBR map sets, and HDR or cubemap environments.
Install
npx skills add https://github.com/enzed/r3f-skills --skill r3f-texturesWhat is this skill?
- Quick start: useTexture with meshStandardMaterial on box or plane geometry
- Single-texture and multi-texture array patterns for PBR map sets
- Covers environment maps, cubemaps, and HDR environments per skill scope
- Documents texture configuration and optimization guidance for R3F scenes
- Trigger phrases: useTexture, PBR sets, cubemaps, HDR environments
Adoption & trust: 605 installs on skills.sh; 89 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your R3F scene still uses flat colors because you are unsure how to load and bind multiple PBR textures correctly.
Who is it for?
Indie devs shipping browser 3D experiences who want copy-paste-correct texture and environment setup in R3F.
Skip if: Non-React Three.js stacks, 2D-only UIs, or teams that do not use @react-three/fiber and drei.
When should I use this skill?
Loading images, working with PBR texture sets, cubemaps, HDR environments, or optimizing texture usage in React Three Fiber.
What do I get? / Deliverables
Meshes use useTexture-driven map, normalMap, and roughnessMap (or environments) with patterns that match Drei and Three.js best practice.
- R3F components with wired material maps
- Configured environment or cubemap lighting setup
Recommended Skills
Journey fit
How it compares
Skill reference for R3F texture APIs—not a generic image CDN or asset-pipeline integration.
Common Questions / FAQ
Who is r3f-textures for?
Solo builders creating 3D web apps with React Three Fiber who need reliable texture and environment map patterns.
When should I use r3f-textures?
During Build frontend work whenever you load images, assemble PBR texture sets, or configure HDR and cubemap environments in R3F.
Is r3f-textures safe to install?
It is frontend documentation guidance; check the Security Audits panel on this page before adding third-party skills to your agent.
SKILL.md
READMESKILL.md - R3f Textures
# React Three Fiber Textures ## Quick Start ```tsx import { Canvas } from '@react-three/fiber' import { useTexture } from '@react-three/drei' function TexturedBox() { const texture = useTexture('/textures/wood.jpg') return ( <mesh> <boxGeometry /> <meshStandardMaterial map={texture} /> </mesh> ) } export default function App() { return ( <Canvas> <ambientLight /> <TexturedBox /> </Canvas> ) } ``` ## useTexture Hook (Drei) The recommended way to load textures in R3F. ### Single Texture ```tsx import { useTexture } from '@react-three/drei' function SingleTexture() { const texture = useTexture('/textures/color.jpg') return ( <mesh> <planeGeometry args={[5, 5]} /> <meshBasicMaterial map={texture} /> </mesh> ) } ``` ### Multiple Textures (Array) ```tsx function MultipleTextures() { const [colorMap, normalMap, roughnessMap] = useTexture([ '/textures/color.jpg', '/textures/normal.jpg', '/textures/roughness.jpg', ]) return ( <mesh> <sphereGeometry args={[1, 64, 64]} /> <meshStandardMaterial map={colorMap} normalMap={normalMap} roughnessMap={roughnessMap} /> </mesh> ) } ``` ### Named Object (Recommended for PBR) ```tsx function PBRTextures() { // Named object automatically spreads to material const textures = useTexture({ map: '/textures/color.jpg', normalMap: '/textures/normal.jpg', roughnessMap: '/textures/roughness.jpg', metalnessMap: '/textures/metalness.jpg', aoMap: '/textures/ao.jpg', displacementMap: '/textures/displacement.jpg', }) return ( <mesh> <sphereGeometry args={[1, 64, 64]} /> <meshStandardMaterial {...textures} displacementScale={0.1} /> </mesh> ) } ``` ### With Texture Configuration ```tsx import { useTexture } from '@react-three/drei' import * as THREE from 'three' function ConfiguredTextures() { const textures = useTexture({ map: '/textures/color.jpg', normalMap: '/textures/normal.jpg', }, (textures) => { // Configure textures after loading Object.values(textures).forEach(texture => { texture.wrapS = texture.wrapT = THREE.RepeatWrapping texture.repeat.set(4, 4) }) }) return ( <mesh> <planeGeometry args={[10, 10]} /> <meshStandardMaterial {...textures} /> </mesh> ) } ``` ### Preloading ```tsx import { useTexture } from '@react-three/drei' // Preload at module level useTexture.preload('/textures/hero.jpg') useTexture.preload(['/tex1.jpg', '/tex2.jpg']) function Component() { // Will be instant if preloaded const texture = useTexture('/textures/hero.jpg') } ``` ## useLoader (Core R3F) For more control over loading. ```tsx import { useLoader } from '@react-three/fiber' import { TextureLoader } from 'three' function WithUseLoader() { const texture = useLoader(TextureLoader, '/textures/color.jpg') // Multiple textures const [color, normal] = useLoader(TextureLoader, [ '/textures/color.jpg', '/textures/normal.jpg', ]) return ( <mesh> <boxGeometry /> <meshStandardMaterial map={color} normalMap={normal} /> </mesh> ) } // Preload useLoader.preload(TextureLoader, '/textures/color.jpg') ``` ## Texture Configuration ### Wrapping Modes ```tsx import * as THREE from 'three' function ConfigureWrapping() { const texture = useTexture('/textures/tile.jpg', (tex) => { // Wrapping tex.wrapS = THREE.RepeatWrapping // Horizontal: ClampToEdgeWrapping, RepeatWrapping, MirroredRepeatWrapping tex.wrapT = THREE.RepeatWrapping // Vertical // Repeat tex.repeat.set(4, 4) // Tile 4x4 // O