Texture تصویری است که روی متریال قرار می‌گیرد و ظاهر سطح شیء را تغییر می‌دهد.

۱️⃣ بارگذاری Texture

🔹 تعریف

برای استفاده از یک تصویر روی یک Mesh، ابتدا باید آن را بارگذاری کنیم:

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/texture.jpg');

const material = new THREE.MeshStandardMaterial({ map: texture });
const cube = new THREE.Mesh(new THREE.BoxGeometry(2,2,2), material);
scene.add(cube);

📌 TextureLoader می‌تواند تصاویر JPG، PNG، یا سایر فرمت‌های رایج را بارگذاری کند.

۲️⃣ نقشه UV (UV Mapping)

• UV Mapping مشخص می‌کند که تصویر چگونه روی سطح شیء کشیده شود.

• هر Geometry دارای UV coordinates است که Texture را به آن متصل می‌کند.

• برای Geometries آماده، UV معمولاً از پیش تعریف شده است.

۳️⃣ Wrap Modes (نحوه تکرار Texture)

• THREE.RepeatWrapping → Texture تکرار می‌شود

• THREE.ClampToEdgeWrapping → لبه‌ها کشیده می‌شوند

• THREE.MirroredRepeatWrapping → تصویر معکوس شده تکرار می‌شود

texture.wrapS = THREE.RepeatWrapping; // جهت افقی
texture.wrapT = THREE.RepeatWrapping; // جهت عمودی
texture.repeat.set(2,2); // تعداد تکرار

۴️⃣ Filter Modes (فیلترها)

• تعیین می‌کند که هنگام بزرگ یا کوچک شدن Texture چه اتفاقی بیفتد

texture.minFilter = THREE.LinearMipMapLinearFilter;
texture.magFilter = THREE.LinearFilter;

۵️⃣ Mipmaps

• مجموعه‌ای از نسخه‌های کوچکتر Texture

• باعث کاهش aliasing و افزایش سرعت رندر می‌شود

• معمولاً به صورت خودکار ساخته می‌شوند، مگر اینکه explicitly غیر فعال شوند:

texture.generateMipmaps = true;

۶️⃣ دیگر ویژگی‌ها

🔹 مثال

texture.rotation = Math.PI/4; // چرخش 45 درجه
texture.offset.set(0.5, 0.5); // جابجایی
texture.flipY = false; // عدم برعکس کردن
texture.encoding = THREE.sRGBEncoding; // رنگ طبیعی

۷️⃣ مثال کامل با Texture، Wrap و Filter

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const textureLoader = new THREE.TextureLoader();
const texture = textureLoader.load('path/to/texture.jpg');

texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(2,2);
texture.minFilter = THREE.LinearMipMapLinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.encoding = THREE.sRGBEncoding;

const material = new THREE.MeshStandardMaterial({ map: texture });
const cube = new THREE.Mesh(new THREE.BoxGeometry(2,2,2), material);
scene.add(cube);

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5,5,5);
scene.add(light);

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

📌 این مثال نشان می‌دهد:

• چگونه یک تصویر روی Mesh اعمال می‌شود

• نحوه تکرار (RepeatWrapping) و فیلتر (LinearMipMapLinearFilter)

• تاثیر mipmap و encoding برای کیفیت بهتر

۸️⃣ نکات مهم

• همیشه برای رندر واقعی‌تر از MeshStandardMaterial یا MeshPhysicalMaterial استفاده کن

• UV Mapping و Wrap مهم هستند تا تصویر به درستی روی Geometry نمایش داده شود

• mipmap و filter کیفیت و سرعت رندر را بهبود می‌دهند