سایه‌ها و نورهای دقیق‌تر

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

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

نورتوضیحسایه
AmbientLightنور عمومی صحنه، بدون جهت
DirectionalLightشبیه نور خورشید
PointLightنور نقطه‌ای در همه جهات
SpotLightنور مخروطی
HemisphereLightشبیه آسمان و زمین

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

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

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

🔹 انواع ShadowMap

نوعتوضیح
THREE.BasicShadowMapسریع، بدون نرم‌سازی
THREE.PCFShadowMapمتوسط، کمی نرم
THREE.PCFSoftShadowMapنرم و واقع‌گرایانه

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

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 برای جلوگیری از سایه‌های تیز و مصنوعی دارد