دوربین‌ها (Cameras: PerspectiveCamera, OrthographicCamera)

Three.js دو نوع دوربین اصلی دارد:

  1. PerspectiveCamera – دوربین پرسپکتیو

  2. OrthographicCamera – دوربین ارتوگرافیک

۱️⃣ PerspectiveCamera (دوربین پرسپکتیو)

🔹 تعریف

  • شبیه چشم انسان

  • اشیاء دورتر کوچک‌تر به نظر می‌رسند

  • مناسب بازی‌ها و صحنه‌های واقعی

🔹 ساخت دوربین پرسپکتیو

const camera = new THREE.PerspectiveCamera( 75, // زاویه دید (FOV) window.innerWidth / window.innerHeight, // نسبت تصویر 0.1, // near clipping plane 1000 // far clipping plane ); camera.position.z = 5;

🔹 نکات مهم

  • FOV (Field of View): زاویه دید عمودی دوربین

  • Aspect Ratio: نسبت عرض به ارتفاع

  • Near & Far: محدوده‌ای که اشیاء داخلش دیده می‌شوند

۲️⃣ OrthographicCamera (دوربین ارتوگرافیک)

🔹 تعریف

  • اشیاء بدون تغییر اندازه با فاصله نمایش داده می‌شوند

  • مناسب صحنه‌های 2.5D، UI سه‌بعدی، یا نمودارها

🔹 ساخت دوربین ارتوگرافیک

const aspect = window.innerWidth / window.innerHeight; const d = 5; const camera = new THREE.OrthographicCamera( -d * aspect, // left d * aspect, // right d, // top -d, // bottom 0.1, // near 1000 // far ); camera.position.set(10, 10, 10); camera.lookAt(0, 0, 0); // نگاه به مرکز صحنه

🔹 نکات مهم

  • اندازه صحنه ثابت می‌مونه، اشیاء با فاصله تغییر اندازه نمی‌دن

  • باید خودت با lookAt جهت دوربین رو مشخص کنی

۳️⃣ مقایسه سریع

ویژگیPerspectiveCameraOrthographicCamera
شبیه چشم انسان
تغییر اندازه اشیاء با فاصله
کاربردبازی، شبیه‌سازی واقعیUI سه‌بعدی، نمودار، طراحی صنعتی
تنظیماتFOV، Aspect, Near, FarLeft, Right, Top, Bottom, Near, Far

۴️⃣ مثال کامل با PerspectiveCamera

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); document.body.appendChild(renderer.domElement); const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); const light = new THREE.DirectionalLight(0xffffff, 1); light.position.set(1, 1, 1); scene.add(light); function animate() { requestAnimationFrame(animate); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); } animate();

📌 اگر بخوای صحنه به سبک نمودار یا UI سه‌بعدی ثابت باشه، از OrthographicCamera استفاده می‌کنیم.