Three.js چند نوع متریال پایه و چند متریال مخصوص دارد. هر متریال ویژگی‌ها و کاربرد مخصوص خودش را دارد.

۱️⃣ MeshBasicMaterial (متریال پایه)

🔹 تعریف

• ساده‌ترین متریال

• تحت تأثیر نور نیست

• رنگ و بافت قابل تنظیم است

🔹 مثال

const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const cube = new THREE.Mesh(new THREE.BoxGeometry(1,1,1), material);
scene.add(cube);

📌 کاربرد: UI سه‌بعدی، آیکون‌ها، گرافیک‌های ساده

۲️⃣ MeshLambertMaterial (متریال لامبرت)

🔹 تعریف

• تحت تأثیر نور غیر براق و نرم

• مناسب سطوح مات

🔹 مثال

const material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });
const sphere = new THREE.Mesh(new THREE.SphereGeometry(1,32,32), material);
scene.add(sphere);

📌 مناسب صحنه‌های نور طبیعی و مات

۳️⃣ MeshPhongMaterial (متریال فونگ)

🔹 تعریف

• تحت تأثیر نور براق و هایلایت

• امکان Specular (بازتاب نور) و Shininess دارد

🔹 مثال

const material = new THREE.MeshPhongMaterial({ color: 0x0000ff, shininess: 100 });
const cylinder = new THREE.Mesh(new THREE.CylinderGeometry(1,1,2,32), material);
scene.add(cylinder);

📌 مناسب سطوح براق، فلزات و اشیاء بازتاب‌دهنده

۴️⃣ MeshStandardMaterial (PBR – متریال واقع‌گرایانه)

🔹 تعریف

• متریال مدرن با PBR (Physically Based Rendering)

• تحت تأثیر نور، بازتاب، roughness و metalness

• بسیار واقعی

🔹 مثال

const material = new THREE.MeshStandardMaterial({
  color: 0xffffff,
  metalness: 0.7,
  roughness: 0.3
});
const torus = new THREE.Mesh(new THREE.TorusGeometry(1,0.4,16,100), material);
scene.add(torus);

📌 مناسب فلز، شیشه، سطوح صنعتی و بازی‌های واقع‌گرایانه

۵️⃣ متریال‌های مخصوص (Specialized Materials)

• MeshPhysicalMaterial → پیشرفته‌تر از Standard، شامل clearcoat، reflectivity

• MeshToonMaterial → افکت کارتونی / سل‌شید

• ShadowMaterial → فقط سایه‌ها را نشان می‌دهد

• PointsMaterial → برای رندر نقاط (Particle System)

• LineBasicMaterial / LineDashedMaterial → برای رندر خطوط

🔹 مثال MeshToonMaterial

const material = new THREE.MeshToonMaterial({ color: 0xff00ff });
const cone = new THREE.Mesh(new THREE.ConeGeometry(1,3,32), material);
scene.add(cone);

۶️⃣ جمع‌بندی مقایسه‌ای

۷️⃣ نکات مهم

• متریال‌ها با نور و Renderer کار می‌کنند، بنابراین برای متریال‌هایی که نور لازم دارند (Lambert, Phong, Standard) حتما نور به صحنه اضافه کن

• متریال‌های PBR برای واقع‌گرایی بالا توصیه می‌شوند

• می‌توان متریال‌ها را با Texture (بافت) ترکیب کرد

۸️⃣ مثال کامل با چند متریال

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

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

// نور
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5,10,5);
scene.add(light);

// MeshBasicMaterial
const cube = new THREE.Mesh(
  new THREE.BoxGeometry(2,2,2),
  new THREE.MeshBasicMaterial({ color: 0xff0000 })
);
cube.position.x = -5;
scene.add(cube);

// MeshLambertMaterial
const sphere = new THREE.Mesh(
  new THREE.SphereGeometry(1,32,32),
  new THREE.MeshLambertMaterial({ color: 0x00ff00 })
);
sphere.position.x = -2;
scene.add(sphere);

// MeshPhongMaterial
const cylinder = new THREE.Mesh(
  new THREE.CylinderGeometry(1,1,2,32),
  new THREE.MeshPhongMaterial({ color: 0x0000ff, shininess: 100 })
);
cylinder.position.x = 1;
scene.add(cylinder);

// MeshStandardMaterial
const torus = new THREE.Mesh(
  new THREE.TorusGeometry(1,0.4,16,100),
  new THREE.MeshStandardMaterial({ color: 0xffffff, metalness:0.7, roughness:0.3 })
);
torus.position.x = 5;
scene.add(torus);

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

📌 در این مثال، چهار متریال پایه روی چهار شکل مختلف نشان داده شد تا تفاوت بصری کاملاً مشخص باشد.