R3f Textures

Handles texture loading and configuration in React Three Fiber projects. You get useTexture from drei for simple loading, support for PBR texture sets with named objects that spread directly to materials, and configuration options for wrapping, filtering, and color space. Covers environment maps, HDR files, cube maps, video textures, and preloading strategies. The named object pattern is genuinely nice when working with multiple texture maps since you avoid manual prop spreading. The color space configuration section is actually important because it's easy to mess up sRGB vs linear and get washed out materials. Good reference when you're setting up realistic materials or just need to remember the difference between minFilter and magFilter.

skills.sh installs: 1.9K
GitHub stars: 135
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add enzed/r3f-skills --skill r3f-textures --agent claude-code

Installs into .claude/skills of the current project.

Files

React Three Fiber textures

Inspect installed Three.js, Fiber, Drei, and renderer versions first. Examples target Fiber 9 / React 19 and Three.js r185 with WebGL. Preserve correctly configured assets rather than resetting every texture.

Color versus data

Texture content	Color-space annotation
PNG/JPEG base color or emissive color	`SRGBColorSpace`
Roughness, metalness, normal, AO, alpha/masks	`NoColorSpace`
Linear HDR/EXR lighting data	Preserve loader-provided linear metadata

NoColorSpace is not another name for LinearSRGBColorSpace: scalar/vector data has no color space. Do not blanket-convert every map to sRGB.

Load a color map

Mount under Suspense inside Canvas. The file path is an application asset, not a file provided by this skill.

import { useTexture } from '@react-three/drei'
import { SRGBColorSpace } from 'three'

SKILL.md on GitHub

Details

Repository: github.com/enzed/r3f-skills
Categories: Frontend Development, Go
First seen: Jun 3, 2026

More from enzed/r3f-skills

All 11