Three.js, как сделать резиновый canvas

В этом видео я покажу как сделать canvas в Three.js, который будет подстраиваться под размер экрана пользователя. Узнаешь как настроить размер холста, соотношение пикселей и полноэкранный режим.

В видео разберем:

- Как задать размер canvas из JavaScript
- Как подписаться на событие resize окна
- Как правильно обновлять камеру и рендер при изменении размера
- Как ограничить соотношение пикселей для оптимальной производительности
- Как переключить полноэкранный режим по двойному клику

Полезное видео для всех, кто хочет сделать адаптивный canvas на Three.js.

100 ❤️ и я пойму, что вам хочется больше подобных видео

••••••••••••••
0:00 Вступление
0:36 Делаем canvas во весь экран
2:33 Ререндер сцены при изменении размера окна
6:02 Подстраиваемся под соотношение пикселей
7:47 Поддержка Fullscreen
10:02 Концовка

••••••••••••••
Код на начало урока: https://github.com/GuVictory/threejs-...
Код в конце урока: https://github.com/GuVictory/threejs-...

••••••••••••••
✈️ Telegram канал проекта: https://t.me/WebDevSandbox
☕️ Угостить меня кофе: https://pay.cloudtips.ru/p/4013864b

Спасибо за внимание ♥︎