Three.js برای ایجاد اشیاء سه‌بعدی از چهار بخش اصلی استفاده می‌کند:

1. Geometry – شکل هندسی اشیاء

2. Material – ظاهر و سبک سطح

3. Mesh – ترکیب Geometry و Material

4. Texture – تصویر یا نقشه‌ای که روی Material اعمال می‌شود

۱️⃣ Geometry

🔹 تعریف

• Geometry ساختار هندسی یک شیء را تعریف می‌کند

• شامل Vertex, Face, Normal, UV

🔹 Geometryهای آماده

🔹 مثال

const geometry = new THREE.BoxGeometry(1, 1, 1); // مکعب 1x1x1

۲️⃣ Material

🔹 تعریف

• Material ظاهر سطح را تعیین می‌کند: رنگ، نور، بازتاب، شفافیت

🔹 انواع Material رایج

🔹 مثال

const material = new THREE.MeshStandardMaterial({ color: 0xff0000 });

۳️⃣ Mesh

🔹 تعریف

• ترکیب Geometry و Material → قابل اضافه شدن به صحنه

🔹 مثال

const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

📌 Mesh پایه هر شیء سه‌بعدی در Three.js است

۴️⃣ Texture

🔹 تعریف

• تصویر یا نقشه‌ای که روی Material اعمال می‌شود

• می‌تواند رنگ، نور، شفافیت، نقشه Normal، Roughness و Metallic باشد

🔹 مثال بارگذاری Texture

const texture = new THREE.TextureLoader().load('texture.jpg');
const material = new THREE.MeshStandardMaterial({ map: texture });

🔹 انواع Texture Maps

۵️⃣ مثال کامل Mesh با Geometry و Texture

const geometry = new THREE.SphereGeometry(1, 32, 32);
const texture = new THREE.TextureLoader().load('earth.jpg');
const material = new THREE.MeshStandardMaterial({ map: texture });

const sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

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

📌 این مثال کره‌ای با Texture و نور ایجاد می‌کند که کاملاً واقعی نمایش داده می‌شود

۶️⃣ نکات مهم

• Geometry شکل را می‌سازد، Material ظاهر آن را مشخص می‌کند

• Mesh ترکیب Geometry و Material است

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

• برای Performance، Textureها و Materialها را بهینه انتخاب کنید