Textures & Color Space
Light & surfaces
Lesson 7 of 15
Paint a local canvas texture and label its colors correctly for rendering.
Wrap a procedurally painted checkerboard around a cube using UVs, repeat wrapping, and sRGB color space.
How this scene works
A CanvasTexture uploads pixels from a canvas; no remote image is needed. The geometry's UV coordinates map those pixels onto each face. Color textures painted for display use SRGBColorSpace so Three.js can convert them into its linear lighting workflow. Data textures such as normal or roughness maps instead keep NoColorSpace. RepeatWrapping allows texture.repeat to tile beyond the 0–1 UV range. Mark needsUpdate when changing pixels after the first upload.
Textures & Color Space
Helper snippet · Three.js 0.183.1 · WebGL
Loading draft
1 files · local only
Drag to orbit, scroll to zoom, right-drag to pan.
Make it your own
Change texture.repeat to (4, 2). Replace the blue tiles with a new color, then compare SRGBColorSpace with NoColorSpace and explain why the brightness changes.
Change one thing, run the scene, and compare. Pause animation to inspect the result; reset the example to return to its original code and files.
