Three.js به صورت پیش‌فرض نور و سایه را ساده ارائه می‌دهد، اما با برخی تنظیمات می‌توان سایه‌های دقیق‌تر و نورپردازی واقعی‌تر داشت.

۱️⃣ انواع نورها و تاثیر آن‌ها بر سایه‌ها

📌 نورهایی که سایه ایجاد می‌کنند باید castShadow = true داشته باشند.

۲️⃣ فعال‌سازی سایه‌ها در Renderer

renderer.shadowMap.enabled = true; // فعال‌سازی سایه‌ها
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // نوع سایه نرم

🔹 انواع ShadowMap

۳️⃣ تنظیم سایه برای نور و اشیاء

directionalLight.castShadow = true;

cube.castShadow = true;     // شیء سایه می‌اندازد
plane.receiveShadow = true; // سطح سایه را دریافت می‌کند

🔹 تنظیمات دقیق نور Directional

directionalLight.shadow.mapSize.width = 2048;
directionalLight.shadow.mapSize.height = 2048;
directionalLight.shadow.camera.near = 1;
directionalLight.shadow.camera.far = 20;
directionalLight.shadow.camera.left = -10;
directionalLight.shadow.camera.right = 10;
directionalLight.shadow.camera.top = 10;
directionalLight.shadow.camera.bottom = -10;

📌 با افزایش mapSize و تنظیم دقیق camera سایه‌ها دقیق‌تر و با جزئیات بیشتر می‌شوند

۴️⃣ مثال کامل سایه‌ها و نور دقیق

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 100);
camera.position.set(5,5,10);
camera.lookAt(0,0,0);

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

// نور
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5,10,5);
directionalLight.castShadow = true;
directionalLight.shadow.mapSize.width = 2048;
directionalLight.shadow.mapSize.height = 2048;
directionalLight.shadow.camera.near = 1;
directionalLight.shadow.camera.far = 50;
scene.add(directionalLight);

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

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

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

📌 این مثال شامل:

• نور DirectionalLight با سایه

• تنظیم دقیق ShadowMap

• اشیاء سایه‌افکن و دریافت‌کننده سایه

۵️⃣ نکات مهم

• AmbientLight سایه تولید نمی‌کند، باید با Directional یا SpotLight ترکیب شود

• ShadowMap با رزولوشن بالاتر جزئیات دقیق‌تر می‌دهد، اما مصرف GPU بیشتر می‌شود

• برای واقع‌گرایی، ترکیب چند نور، رنگ نور طبیعی و Shadow Bias ضروری است

• Three.js قابلیت Soft Shadow و PCF برای جلوگیری از سایه‌های تیز و مصنوعی دارد