مه (Fog)

🔹 تعریف

Fog یک افکت گرافیکی است که اشیاء را با فاصله کم‌رنگ‌تر یا محوتر نشان می‌دهد.

  • شبیه مه واقعی در طبیعت

  • باعث ایجاد عمق و حس فاصله در صحنه سه‌بعدی می‌شود

۱️⃣ انواع مه

🔹 Fog (خطی)

  • رنگ اشیاء با فاصله به صورت خطی محو می‌شود

  • تنظیمات: رنگ، near (شروع مه)، far (پایان مه)

scene.fog = new THREE.Fog(0xcccccc, 5, 20); // رنگ، نزدیک، دور

📌 مثال: مکعب‌های نزدیک واضح، مکعب‌های دورتر محو

🔹 FogExp2 (نمایی)

  • محو شدن با فاصله به صورت نمایی

  • مه به سرعت با فاصله افزایش می‌یابد

scene.fog = new THREE.FogExp2(0xcccccc, 0.05); // رنگ، چگالی

📌 چگالی (density) تعیین می‌کند مه سریع یا آهسته افزایش پیدا کند

۲️⃣ تغییر رنگ پس‌زمینه متناسب با مه

  • معمولا رنگ پس‌زمینه Scene را با رنگ مه یکی می‌کنند تا طبیعی‌تر باشد:

scene.background = new THREE.Color(0xcccccc); // همان رنگ مه

۳️⃣ مثال کامل با Fog

const scene = new THREE.Scene(); scene.background = new THREE.Color(0xcccccc); scene.fog = new THREE.Fog(0xcccccc, 5, 20); const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); camera.position.z = 10; const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // اشیاء for(let i=0; i<50; i++){ const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); cube.position.set(Math.random()*20-10, Math.random()*5, Math.random()*20-10); scene.add(cube); } // نور const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(5,10,5); scene.add(directionalLight); function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate();

📌 در این مثال:

  • مکعب‌های نزدیک واضح هستند

  • مکعب‌های دورتر با رنگ مه محو می‌شوند

۴️⃣ نکات مهم

  • Fog فقط روی MeshStandardMaterial، MeshPhongMaterial و MeshLambertMaterial اثر دارد

  • برای متریال Basic (MeshBasicMaterial) مه اعمال نمی‌شود

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