در طراحی صحنه‌های سه‌بعدی، تغییر اندازه پنجره یا دستگاه کاربر باید صحنه و دوربین را به‌صورت خودکار تنظیم کند تا همیشه درست نمایش داده شود.

۱️⃣ تنظیم Aspect Ratio دوربین

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

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

📌 این کار باعث می‌شود که نسبت تصویر و فیلد دید (FOV) درست بماند.

۲️⃣ تغییر اندازه Renderer

• Renderer باید مطابق اندازه جدید پنجره تنظیم شود

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

• اگر از CSS برای Canvas استفاده می‌کنید، می‌توان از renderer.setPixelRatio(window.devicePixelRatio) برای وضوح بهتر در نمایشگرهای با DPI بالا استفاده کرد

renderer.setPixelRatio(window.devicePixelRatio);

۳️⃣ مدیریت Event تغییر اندازه

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

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

۴️⃣ نکات مهم برای طراحی Responsive

1. Aspect Ratio دوربین همیشه با Renderer هماهنگ باشد

2. Pixel Ratio برای وضوح بالاتر در موبایل و Retina استفاده شود

3. Canvas CSS به صورت 100% عرض و ارتفاع باشد

4. UI و Overlay: اگر از HTML یا UI در کنار صحنه استفاده می‌کنید، اندازه و موقعیت آن‌ها نیز باید responsive باشد

5. Performance: در موبایل، برخی افکت‌ها (Post-processing, Shadows) می‌توانند غیرفعال شوند تا سرعت حفظ شود

۵️⃣ مثال کامل Responsive

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', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  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();

📌 این مثال تضمین می‌کند که صحنه همیشه در تمام اندازه‌های صفحه نمایش درست نمایش داده شود.