webdesignmaster
Русская площадка по обучению разного рода frontend разработчиков, о том, как работают профессиональные фрилансеры. Уникальные авторские уроки и курсы по веб-разработке и современному веб-дизайну.
Продолжительность
9 ч 55 мин
Категория
Three.jsКоличество уроков
50 Видео
Дата добавления
22 окт. 2025 г., 20:50
Язык
Русский
Дата обновления
30 апр. 2026 г., 00:39
Three.js — это один из самых мощных инструментов для создания интерактивной 3D‑графики в браузере. В этом практическом курсе вы шаг за шагом освоите работу с библиотекой, научитесь готовить модели в Blender, интегрировать их в веб-среду и создавать эффектные сцены с освещением, материалами, анимацией и пользовательскими интеракциями.
Что вы изучите на курсе
Курс последовательно проводит вас через все этапы разработки 3D-проекта на Three.js — от фундаментальных основ до внедрения сложных визуальных эффектов и оптимизационных техник.
Основы Three.js
- Структура трёхмерной сцены: сцена, камера, рендерер.
- Добавление базовых примитивов и работа с геометрией.
- Использование материалов, текстур и базовых шейдеров.
Подготовка 3D-моделей в Blender
- Экспорт моделей в форматы, совместимые с Three.js.
- Оптимизация сетки, работа с нормалями и развёртками.
- Создание текстур и материалов для корректного отображения в браузере.
Импорт и работа с моделями в Three.js
- Загрузка моделей через glTF/GLB и другие форматы.
- Настройка материалов, анимаций и текстурных карт.
- Позиционирование, масштабирование и управление трансформациями.
Создание реалистичной 3D‑сцены
От настроек освещения до визуальных эффектов — вы научитесь создавать сцены, которые выглядят профессионально и работают стабильно.
Освещение и тени
- Точечные, направленные и окружающие источники света.
- Настройка мягких и жёстких теней.
- Художественные приёмы для создания атмосферы.
Камера и ракурсы
- Выбор типа камеры под задачу.
- Использование OrbitControls и пользовательских контроллеров.
- Создание кинематографичных проходов по сцене.
Постобработка и эффекты
- Добавление bloom, depth of field, motion blur.
- Композиция нескольких пассов.
- Создание визуального стиля проекта.
Интерактивность и логика
Курс научит превращать статичные 3D‑сцены в динамичные приложения с вовлечением пользователя.
Интерактивные триггеры
- Реакция объектов на курсор и клики.
- Работа с Raycaster.
- Обработка пользовательских событий и взаимодействий.
Загрузка и оптимизация
- Прогрессивная загрузка сцен и ресурсов.
- Оптимизация производительности под слабые устройства.
- Использование кеширования и сжатых текстур.
Практика и итоговый проект
Вы создадите полноценное 3D‑приложение с интерактивными элементами, эффектами и адаптивностью. Все исходные файлы, модели и примеры будут предоставлены.
Разбор распространённых ошибок
- Некорректная работа освещения и материалов.
- Проблемы с производительностью и оптимизацией.
- Ошибки при экспорте моделей и настройке анимаций.
В результате курса вы получите уверенные навыки, позволяющие создавать современные, визуально впечатляющие 3D‑сцены и интерактивные веб‑приложения на Three.js.
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
- Урок 1. 00:06:05Урок 1
- Урок 2. 00:16:11Урок 2
- Урок 3. 00:14:03Урок 3
- Урок 4. 00:10:43Урок 4
- Урок 5. 00:14:55Урок 5
- Урок 6. 00:14:21Урок 6
- Урок 7. 00:12:43Урок 7
- Урок 8. 00:14:25Урок 8
- Урок 9. 00:12:36Урок 9
- Урок 10. 00:16:51Урок 10
- Урок 11. 00:11:02Урок 11
- Урок 12. 00:21:08Урок 12
- Урок 13. 00:12:37Урок 13
- Урок 14. 00:14:36Урок 14
- Урок 15. 00:16:07Урок 15
- Урок 16. 00:09:42Урок 16
- Урок 17. 00:09:33Урок 17
- Урок 18. 00:12:18Урок 18
- Урок 19. 00:11:25Урок 19
- Урок 20. 00:11:44Урок 20
- Урок 21. 00:11:43Урок 21
- Урок 22. 00:23:11Урок 22
- Урок 23. 00:13:23Урок 23
- Урок 24. 00:13:56Урок 24
- Урок 25. 00:10:31Урок 25
- Урок 26. 00:10:28Урок 26
- Урок 27. 00:19:35Урок 27
- Урок 28. 00:10:09Урок 28
- Урок 29. 00:09:35Урок 29
- Урок 30. 00:11:26Урок 30
- Урок 31. 00:16:27Урок 31
- Урок 32. 00:10:10Урок 32
- Урок 33. 00:13:16Урок 33
- Урок 34. 00:09:25Урок 34
- Урок 35. 00:05:06Урок 35
- Урок 36. 00:09:04Урок 36
- Урок 37. 00:09:14Урок 37
- Урок 38. 00:10:38Урок 38
- Урок 39. 00:07:35Урок 39
- Урок 40. 00:06:45Урок 40
- Урок 41. 00:04:56Урок 41
- Урок 42. 00:05:51Урок 42
- Урок 43. 00:12:52Урок 43
- Урок 44. 00:07:53Урок 44
- Урок 45. 00:13:50Урок 45
- Урок 46. 00:14:22Урок 46
- Урок 47. 00:08:43Урок 47
- Урок 48. 00:17:35Урок 48
- Урок 49. 00:12:00Урок 49
- Урок 50. 00:03:08Урок 50
Автор - webdesignmaster
Комментарии