🎨 THREE.js Lesson: Textures & UV Mapping

Textures add detail & realism by painting images onto 3D models. UV mapping defines how the 2D image wraps around your geometry.

📦 Code Sample

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.154.0/build/three.module.js';

const canvas = document.getElementById('previewCanvas');
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(canvas.clientWidth, canvas.clientHeight);
renderer.setClearColor(0x222222);

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, canvas.clientWidth / canvas.clientHeight, 0.1, 1000);
camera.position.z = 4;

const geometry = new THREE.BoxGeometry(2, 2, 2);

// Load a texture image
const loader = new THREE.TextureLoader();
const texture = loader.load('https://threejs.org/examples/textures/crate.gif');

const material = new THREE.MeshBasicMaterial({ map: texture });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}

animate();

🎮 Live Preview

💡 Pro Tips:

UV coordinates range from 0 to 1, mapping the texture image over geometry faces.
TextureLoader loads images asynchronously, so loading errors can happen.
Use MeshBasicMaterial if you want a texture without lighting effects.
For realistic lighting, use MeshStandardMaterial or MeshPhysicalMaterial with textures.

🧠 What You Learned

How to load and apply textures with THREE.js.
What UV mapping means in 3D modeling.
Using TextureLoader to handle image assets.
Basic difference between material types affecting texture appearance.