هر دوربین PerspectiveCamera دارای aspect ratio است که باید با نسبت عرض به ارتفاع Renderer هماهنگ شود تا صحنه بدون اعوجاج نمایش داده شود.

۱️⃣ تعریف Aspect Ratio

$$\text{Aspect Ratio} = \frac{\text{عرض پنجره}}{\text{ارتفاع پنجره}}$$

• اگر Aspect Ratio دوربین با Renderer هماهنگ نباشد:

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

• هنگام تغییر اندازه صفحه، حتماً باید Aspect Ratio بروزرسانی شود

۲️⃣ بروزرسانی Aspect Ratio دوربین

camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();

• updateProjectionMatrix() ضروری است تا تغییر Aspect اعمال شود

• معمولاً در Event Listener تغییر اندازه پنجره استفاده می‌شود

۳️⃣ تغییر اندازه Renderer همراه با Aspect Ratio

renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);

• setPixelRatio برای وضوح بهتر در نمایشگرهای با DPI بالا

• هماهنگی Renderer و دوربین، صحنه را همیشه متناسب نگه می‌دارد

۴️⃣ مثال کامل

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({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio);
document.body.appendChild(renderer.domElement);

const cube = new THREE.Mesh(
  new THREE.BoxGeometry(1,1,1),
  new THREE.MeshStandardMaterial({ color: 0x00ff00 })
);
scene.add(cube);

window.addEventListener('resize', () => {
  // بروزرسانی Aspect Ratio دوربین
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  // بروزرسانی Renderer
  renderer.setSize(window.innerWidth, window.innerHeight);
});

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

📌 این مثال تضمین می‌کند که:

• صحنه روی تمام اندازه‌های صفحه نمایش متناسب باشد

• اشیاء بدون کشیدگی یا فشردگی نمایش داده شوند

۵️⃣ نکات مهم

• هر تغییر اندازه پنجره باید همزمان Aspect Ratio و Renderer را بروزرسانی کند

• برای صحنه‌های Responsive و موبایل ضروری است

• در صورت استفاده از چند دوربین، هر دوربین باید جداگانه بروزرسانی شود