Three.js فرآیند رندرینگ را به سه بخش اصلی تقسیم می‌کند:

1. رنگ (Color / Material)

2. نورپردازی (Lighting)

3. سایه‌ها (Shadows)

۱️⃣ رنگ و متریال‌ها

🔹 Material + Texture

• ظاهر شیء را تعیین می‌کند

• متریال‌ها می‌توانند ساده (Basic) یا واقع‌گرایانه (Standard / PBR) باشند

🔹 مثال ساده رنگ

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

📌 رنگ‌ها به صورت Hexadecimal یا Color Object تعریف می‌شوند.

۲️⃣ نورپردازی (Lighting)

🔹 اهمیت نور

• بدون نور، متریال‌هایی که تحت تأثیر نور هستند (Lambert, Phong, Standard) قابل مشاهده نیستند

🔹 انواع نور

• AmbientLight → روشنایی عمومی

• DirectionalLight → نور خورشیدی، سایه ایجاد می‌کند

• PointLight → نور نقطه‌ای

• SpotLight → نور مخروطی

• HemisphereLight → شبیه آسمان و زمین

🔹 مثال نور Directional + Ambient

const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5,10,5);
directionalLight.castShadow = true;
scene.add(directionalLight);

📌 نورها روی متریال‌های Lambert, Phong و Standard اثر می‌گذارند.

۳️⃣ سایه‌ها (Shadows)

🔹 فعال‌سازی سایه در Renderer

renderer.shadowMap.enabled = true;

🔹 مشخص کردن سایه برای نور و اشیاء

cube.castShadow = true; // مکعب سایه می‌اندازد
plane.receiveShadow = true; // صفحه سایه را دریافت می‌کند

📌 برخی نورها مثل AmbientLight سایه ایجاد نمی‌کنند، نور جهت‌دار یا نقطه‌ای لازم است.

۴️⃣ فرآیند رندرینگ

1. Scene و همه Object3Dها را جمع‌آوری می‌کند

2. Material + Texture را روی هر Mesh اعمال می‌کند

3. نورپردازی را محاسبه می‌کند (Shading)

4. سایه‌ها را محاسبه و رندر می‌کند

5. خروجی روی Canvas یا WebGL نمایش داده می‌شود

۵️⃣ مثال کامل با رنگ، نور و سایه

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

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);

// اشیاء
const cube = new THREE.Mesh(
  new THREE.BoxGeometry(2,2,2),
  new THREE.MeshStandardMaterial({ color: 0x00ff00 })
);
cube.castShadow = true;
scene.add(cube);

const plane = new THREE.Mesh(
  new THREE.PlaneGeometry(10,10),
  new THREE.MeshStandardMaterial({ color: 0xaaaaaa })
);
plane.rotation.x = -Math.PI/2;
plane.position.y = -1;
plane.receiveShadow = true;
scene.add(plane);

// نورها
const ambientLight = new THREE.AmbientLight(0xffffff, 0.3);
scene.add(ambientLight);

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5,10,5);
directionalLight.castShadow = true;
scene.add(directionalLight);

// انیمیشن
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

📌 در این مثال، تمام مراحل رندرینگ نمایش داده شده:

• رنگ و متریال

• نورپردازی با Ambient + Directional

• فعال‌سازی و دریافت سایه

۶️⃣ نکات مهم

• متریال‌های Basic تحت تأثیر نور نیستند

• سایه‌ها پردازش GPU نیاز دارند، پس کیفیت بالا → مصرف منابع بیشتر

• ترکیب نور، رنگ و سایه باعث واقعی‌تر شدن صحنه می‌شود