---
date: 2026-6-10
---

<!-- markdownlint-disable MD001 -->

# Make Responsive

![responsive](https://browserstack.wpenginepowered.com/wp-content/uploads/2022/09/Screenshot-2022-09-02-at-4.26.18-PM-700x668.png)

If you've ever opened a Three.js scene on your phone and seen a stretched or squished mess, you know the pain. Your scene looks great on your full-screen monitor, but resize the window or pull it up on a phone — and suddenly everything's broken.

The fix is simple: you need to update the camera and renderer whenever the window (or your canvas container) changes size.

### the basic resize handler

```javascript
function resize() {
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;

    // Update the camera's aspect ratio so it doesn't stretch
    camera.aspect = width / height;
    camera.updateProjectionMatrix();

    // Update the renderer size to match
    renderer.setSize(width, height);
}

window.addEventListener('resize', resize);
```

That's it. Three things:

1. **Update the camera's aspect ratio** — `width / height` so objects don't look squished
2. **Tell the camera to recalculate** — `camera.updateProjectionMatrix()` applies the change
3. **Resize the renderer** — `renderer.setSize(width, height)` matches the canvas to the container

### using ResizeObserver (better for containers)

If your canvas is inside a container that might change size on its own (like a sidebar that expands, or a panel that resizes), `window.addEventListener('resize', ...)` won't catch it. That's where `ResizeObserver` comes in:

```javascript
const observer = new ResizeObserver(resize);
observer.observe(canvas.parentElement);

// Cleanup when your component unmounts
return () => observer.disconnect();
```

This watches the canvas's parent element and fires your resize function whenever it changes size — no matter why.

### cleaning up

If your scene lives inside a Svelte or React component, you need to remove the event listener when the component goes away, otherwise it keeps running invisibly:

```javascript
// Using addEventListener
window.addEventListener('resize', resize);

// Cleanup
return () => window.removeEventListener('resize', resize);
```

```javascript
// Using ResizeObserver
const observer = new ResizeObserver(resize);
observer.observe(canvas.parentElement);

// Cleanup
return () => observer.disconnect();
```

### full example

```javascript
// Create your scene, camera, renderer…

function resize() {
    const width = window.innerWidth;
    const height = window.innerHeight;
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
    renderer.setSize(width, height);
}

resize(); // run once on load
window.addEventListener('resize', resize);
```

That's all you need. Your scene now adapts to any screen size.
