Traffic Light Visualizer

3D-конфигуратор светофоров для портфолио: интерактивный просмотр разных типов сигналов, фаз (зелёный / жёлтый / красный), обратного отсчёта и символов (стрелки, человечки, велосипеды) в браузере.

Стек: Three.js · Vite · GLB-модели · vanilla JS (ES modules)

Возможности

• Серии корпусов: A (ультратонкий), B (плоский разборный), C (заглушка)
• Транспортные типы: Т.1–Т.12, горизонтальные, реверсивный Т.4
• Пешеходные: П.1, П.1.1 (ультратонкий), П.2
• Переключение фаз, жёлтая фаза при смене сигнала
• Обратный отсчёт (2 или 3 цифры), ПДД-раскладка для пешеходных
• Настройка посадки символов (стрелки, человечки, отсчёт) с сохранением в localStorage
• Адаптивное качество рендера (тени / point lights)

Быстрый старт

npm install
npm run dev

Откроется http://localhost:5173 (если порт свободен).

Сборка для деплоя:

npm run build
npm run preview

Docker

docker compose up --build

Приложение доступно на http://localhost:8080.

Структура проекта

├── public/models/              # GLB-модели
├── src/
│   ├── main.js                 # Точка входа
│   ├── app/
│   │   ├── application.js      # Реэкспорт init
│   │   ├── init.js             # Старт: viewport, UI-слушатели (~380 строк)
│   │   ├── runtime/
│   │   │   ├── context.js      # Объект состояния ctx
│   │   │   ├── signal-controller.js  # Фазы, отсчёт, переключение типов
│   │   │   ├── load-scene.js     # Загрузка GLB и сборка корней сцены
│   │   │   └── animate.js        # Цикл requestAnimationFrame
│   │   ├── deps.js             # Общие импорты (config, UI, state)
│   │   ├── refs.js             # Мутабельные ссылки на меши/лампы
│   │   └── migrate.js          # Миграция localStorage
│   ├── scene/
│   │   ├── materials.js        # Материалы и сила излучения
│   │   ├── symbols.js          # Стрелки, человечки, отсчёт (визуал)
│   │   ├── mesh.js             # GLB-утилиты, placement, рендер, loaders
│   │   └── towers.js           # Сборка башен светофоров
│   ├── traffic/index.js        # Типы, фазы, localStorage, UI-селекты
│   ├── tweaks/index.js         # Твики посадки символов + панели настройки
│   ├── assets/models.js        # Пути к моделям
│   ├── config/                 # Константы, типы, дефолтные твики
│   ├── state/scene-state.js    # Коллекции объектов сцены
│   ├── ui/dom.js               # DOM-элементы
│   └── styles/style.css
├── index.html
└── vite.config.js

Модели

Все .glb лежат в public/models/ с английскими именами и подключаются через /models/... (см. src/assets/models.js).

Файл	Назначение
transport-base.glb	Базовый модуль (серия B, транспорт и П.1)
p2.glb	Пешеходный П.2
t5-modular.glb, t5-ultrathin.glb	Серия Т.5
ultrathin-3-emitters.glb	Ультратонкий, 3 излучателя
ultrathin-side-section.glb	Доп. секция ультратонкого
ultrathin-pedestrian.glb	Ультратонкий пешеходный
arrow-straight.glb, arrow-straight-right.glb, …	Стрелки
pedestrian-walking.glb, pedestrian-standing.glb	Человечки
countdown-99.glb, countdown-199.glb	Обратный отсчёт
bicycle.glb	Велосипед (Т.9)
reversible-go.glb, reversible-stop.glb	Реверсивный (Т.4)

Лицензия

Модели и материалы — собственность автора / работодателя; уточняйте условия использования перед публикацией.