Three.js انواع مختلف نور داره که هر کدوم کاربرد و تاثیر خودشون رو دارن.

۱️⃣ AmbientLight (نور محیطی)

🔹 تعریف

• نور یکنواخت که همه اشیاء صحنه رو روشن می‌کنه

• بدون جهت خاص، سایه تولید نمی‌کنه

🔹 مثال

const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // رنگ و شدت
scene.add(ambientLight);

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

۲️⃣ DirectionalLight (نور جهت‌دار)

🔹 تعریف

• نور شبیه خورشید

• جهت مشخص داره، سایه‌ها را ایجاد می‌کنه

🔹 مثال

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

📌 نکته: سایه‌ها با castShadow = true فعال میشن

۳️⃣ PointLight (نور نقطه‌ای)

🔹 تعریف

• نور از یک نقطه به تمام جهات پخش می‌شود

• شبیه لامپ رومیزی یا چراغ

🔹 مثال

const pointLight = new THREE.PointLight(0xff0000, 1, 100); // رنگ، شدت، برد
pointLight.position.set(0, 5, 5);
scene.add(pointLight);

📌 مناسب صحنه‌های کوچک و نقاط نورانی مشخص

۴️⃣ SpotLight (نور مخروطی)

🔹 تعریف

• نور از یک نقطه با محدوده مخروطی

• شبیه چراغ صحنه یا پروژکتور

• قابلیت تولید سایه

🔹 مثال

const spotLight = new THREE.SpotLight(0xffffff, 1);
spotLight.position.set(10, 20, 10);
spotLight.angle = Math.PI / 6; // زاویه مخروط
scene.add(spotLight);

۵️⃣ HemisphereLight (نور نیم‌کره)

🔹 تعریف

• نور از بالا و پایین با رنگ‌های متفاوت

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

• سایه تولید نمی‌کنه

🔹 مثال

const hemiLight = new THREE.HemisphereLight(0xffffbb, 0x080820, 1); // skyColor, groundColor, intensity
scene.add(hemiLight);

۶️⃣ مقایسه سریع نورها

۷️⃣ نکات مهم

• برای سایه:

directionalLight.castShadow = true;
cube.castShadow = true;
cube.receiveShadow = true;
renderer.shadowMap.enabled = true;

• ترکیب چند نور: معمولاً AmbientLight + DirectionalLight برای صحنه مناسب است.

• شدت نور با مقدار دوم در constructor مشخص می‌شود (1 = 100%).

🔹 مثال کامل

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);
renderer.shadowMap.enabled = true;
document.body.appendChild(renderer.domElement);

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

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();

📌 این مثال ترکیبی از AmbientLight و DirectionalLight با سایه هست.