05 / 3D / WebGL / PORTFOLIO CONCEPT

ORBITТри орбиты. Один центр.

Создать непрерывную пространственную экспозицию: связать прокрутку, камеру, свет и геометрию без перехвата привычной навигации.

orbit.interaction

ИЛЛЮСТРАЦИЯ / ИНТЕРАКТИВНОЕ ДЕМО ПО ССЫЛКЕ

Открыть 3D-демо ORBIT

Иллюстрация объекта. Полноэкранная сцена Three.js запускается автоматически на странице демо; прокрутка переключает главы.

РОЛЬ И КОНТЕКСТ

От структуры
до взаимодействия.

Учебный проект, созданный совместно с AI-ассистентом. Работа включала визуальное направление, адаптивную вёрстку, клиентскую логику, автоматические проверки и публикацию. Это не коммерческий заказ; клиенты и бизнес-результаты не заявляются.

Архитектура

Next.js App Router и статические страницы, React для интерактивных сценариев, SCSS Modules и Framer Motion. Контент и чистые расчёты отделены от компонентов.

01Главы и настройки
02Состояние экспозиции
03Камера и геометрия
043D, SVG и ссылка

Решения и компромиссы

Геометрия вместо загрузок

Три кольца, сфера и подвес собираются кодом Three.js. Нет внешней модели, HDR-карт и текстур. Отделка и свет меняют материалы, а композиция — положение колец.

Непрерывное пространство

Один canvas остаётся на экране во всех трёх главах. Прокрутка меняет ракурс и положение колец. Сцена запускается автоматически; автовращение можно остановить отдельной видимой кнопкой.

Управление и жизненный цикл

Кнопки вращения дают альтернативу перетаскиванию. Потеря контекста возвращает иллюстрацию; offscreen, скрытая вкладка и reduced motion останавливают движение. При выходе освобождаются ресурсы GPU.

ПРОВЕРЬ САМ

Один конкретный сценарий

Останови вращение, перейди в главы «Свет» и «Композиция». Открой пульт, выбери графит, нейтральный свет и скульптурную геометрию. Сохранённая ссылка восстановит настройки при повторном открытии.

Повторить в демо

Ключевые части кода

lib/config.js
lib/scene.js
components/Viewer.jsx
components/Experience.jsx

Открыть исходники Полный разбор в демо

Границы реализации

ORBIT — вымышленный объект и учебный дизайн-концепт. Свет показан иллюстративно: нет фотометрических расчётов, конструктивной спецификации, реального изделия, заказа или оплаты.

Браузерные проверки выполняются в CI. Реальные устройства и скринридеры требуют отдельного ручного прохода.