Three.js: конфигуратор настольной лампы «Форма»

В серии 10 уроков. HTML, CSS, DOM, ES-модули, Promise; базовые координаты и векторы.

Профиль версий: three 0.180.0, vite 7.1.7, node 22.14.0. Это конкретные опубликованные версии лаборатории; обновление зависимостей рассматривается отдельно.

Оглавление

1. Сцена, камера и первый предмет — Статическая сцена с простой лампой, перспективная камера и HTML-описание.
2. Размер области и плотность пикселей — ResizeObserver, ограниченный DPR, согласованная проекция.
3. Осмотр товара и управление камерой — OrbitControls, границы расстояния, возврат к исходному ракурсу.
4. Собственная модель glTF и её загрузка — Авторский glTF из простых деталей, GLTFLoader, роли деталей и ошибки.
5. Цвет, свет и материалы товара — MeshStandardMaterial, палитра и отдельные отделки корпуса и основания.
6. Выбор детали мышью и кнопками — Raycaster, координаты canvas, HTML-выбор роли детали.
7. Конфигурация, артикул и стоимость — Проверяемое состояние, чистая оценка комплектации, резюме в HTML.
8. Сохранение конфигурации и ссылка — Версионированный URL и localStorage, приоритет явной ссылки.
9. Загрузка по запросу и резервный интерфейс — Импорт Three.js после действия, доступные HTML-параметры, экран ошибки.
10. Завершение сцены и освобождение ресурсов — Инвалидация асинхронной загрузки, остановка RAF, dispose и повторный запуск.

Исходники

Архив проекта «Форма» содержит десять полных состояний, README и собственные исходные данные. Зависимости и секреты не включены. Подготовка и команды предназначены для самостоятельной работы читателя. Примеры, установка, тесты и деплой при написании не выполнялись. Серия доступна только локально.

Конфигуратор строит собственную лампу из трёх простых деталей. Он не оформляет заказ и не вычисляет настоящую цену магазина. HTML-форма сохраняет параметры даже без 3D; учебный glTF не содержит сторонних моделей или текстур. Работа с WebGL зависит от браузера и устройства.

Все новые направления собраны в подборке из 100 уроков.