Адаптация под окно, сборка и деплой

Сцена должна красиво жить в окне любого размера, а проект — уметь собираться и уезжать в прод. Закроем оба вопроса.

При resize обновляют две вещи: aspect камеры и размер рендерера. Собранный проект — это статика, её кладут на любой статический хостинг.

Адаптация под размер окна

Если пользователь развернёт окно или повернёт телефон, а вы не отреагируете, картинка растянется или обрежется. Нужно слушать событие resize и подстраивать камеру и рендерер.

window.addEventListener('resize', () => {
  const w = window.innerWidth;
  const h = window.innerHeight;

  camera.aspect = w / h;            // новое соотношение сторон
  camera.updateProjectionMatrix();  // пересчитать проекцию

  renderer.setSize(w, h);           // новый размер канваса
  renderer.setPixelRatio(window.devicePixelRatio);
});

Два ключевых момента: после смены camera.aspect обязательно вызвать updateProjectionMatrix() (иначе изменение не применится), и задать рендереру новый размер через setSize.

Проверим, как меняется aspect при повороте телефона, — простая арифметика.

function aspect(w, h) {
  return +(w / h).toFixed(3);
}

console.log('Портрет 390x844:', aspect(390, 844));
console.log('Ландшафт 844x390:', aspect(844, 390));

Вывод:

Портрет 390x844: 0.462
Ландшафт 844x390: 2.164

Aspect меняется в разы — без обновления камеры сцена выглядела бы искажённой после поворота.

Сборка

Когда проект готов, его собирают в оптимизированный набор файлов. С Vite это одна команда:

npm run build

В папке dist/ появятся минифицированные JS, HTML и скопированные ассеты (модели, текстуры). Это всё, что нужно для прода.

Деплой

Ключевая мысль: собранный Three.js-проект — это статические файлы. Здесь нет сервера, который должен работать постоянно (если вы сами не добавили бэкенд). Поэтому хостинг подойдёт любой статический:

Netlify / Vercel — перетащить папку или подключить git, деплой за минуту.
GitHub Pages — бесплатно для публичных проектов.
S3 / любой CDN — для нагрузки и контроля.

Не забудьте про ассеты: модели и текстуры должны попасть в сборку и грузиться по правильным путям. Большие файлы стоит сжать заранее.

Итог

На resize обновляйте camera.aspect (+updateProjectionMatrix) и renderer.setSize.
npm run build собирает статику в dist/.
Результат — статические файлы; хостите на Netlify, Vercel, GitHub Pages, CDN.