Проект студии · Игры
fpv0: симулятор FPV-дрона в браузере
Браузерный симулятор FPV-дрона: четыре 3D-карты, экранные стики на телефоне, поддержка пульта по USB и конструктор трасс. Без скачивания и регистрации, на 15 языках.
Задача
FPV-дрон разбивается на первых вылетах, а известные симуляторы стоят денег, требуют мощный компьютер и установку. Новичку нужен тренажер, который открывается по ссылке, работает на обычном ноутбуке и на телефоне, а если у пилота есть пульт, понимает и его.
После запуска выяснилось, что аудитория международная. Сайту понадобились языковые версии, которые поисковики правильно связывают между собой, и статистика без баннеров согласия на куки.
Решение
Мы сделали симулятор на three.js (библиотека для 3D-графики в браузере через WebGL). Движок один, карты описываются данными: геометрия сцены и массив гейтов, колец для пролета. Новая карта собирается из готового движка скриптом, а не копированием кода.
Проект живет на двух доменах: fpv0.ru для России и fpv0.com для остального мира. Русская версия стоит на обычном хостинге, международная на собственных серверах во Франкфурте и Нью-Йорке. Страницы, переводы и приложение собирают Python-скрипты.
Статистику считает своя система: сервер с сайтом принимает события и пишет их в файл, центральный сервер раз в пять минут забирает файлы в базу. IP не хранится, куки нет.
Что внутри
Четыре карты
Гоночная трасса с тремя треками и таймером круга, подземный паркинг, заводской цех с кран-балкой и конвейером, воркаут-площадка для фристайла.
Физика и пульт
Режимы ACRO и ANGLE с автовыравниванием, камера от первого и третьего лица, калибровка. Пульт BETAFPV LiteRadio 3 подключается по USB через Gamepad API.
Управление с телефона
На сенсорном экране выводятся два стика и компактный HUD. В вертикальной ориентации симулятор просит повернуть телефон, иначе приборы не помещаются.
Приложение без магазина
Сайт ставится на домашний экран как PWA со своим значком. После установки все карты работают без интернета, версия кэша обновляется сама.
Конструктор трасс
Пилот ставит кольцо там, где сейчас висит дрон. Готовая трасса упаковывается в ссылку, друг открывает ее и летит тот же маршрут, без сервера и аккаунтов.
15 языков и своя аналитика
Японский, корейский, фарси с раскладкой справа налево и еще двенадцать. Панель статистики показывает открытия карт, взлеты и налет по языкам и доменам.
За неделю с 21 по 27 сентября 2026 года панель статистики показала 2 532 посетителя, 5 175 открытий карт и 3 157 полетов, суммарный налет 96 часов. Две трети посетителей пришли на международный fpv0.com.
Экраны
Как это выглядит
На компьютере
Дизайн и как выбирали концепт
Интерфейс сделан в духе экранного меню FPV-очков: темный фон, моноширинные подписи, зеленый акцент. Он не спорит с 3D-сценой и читается поверх нее.
Главную правку дизайна дал замер, а не вкус. 4 сентября 2026 года мы посчитали кнопки на живом сайте: на стартовом экране трассы при ширине 1280 пикселей было 16 кнопок, а строка настроек шириной 937 пикселей вылезала за край планшета. Ряд из одиннадцати названий языков на 768 пикселях уводил страницу вбок на 350-530 пикселей, а на телефоне переключателя языков не было вовсе.
После разбора на стартовом экране осталась одна кнопка взлета и значок меню. Языки спрятались в одну кнопку с панелью, названия написаны на самом языке (немец ищет глазами Deutsch), на телефоне стоят коды. Снимки до правок лежат в папке итераций.
Отдельно выровняли свет. На трассе заливающий свет был в 7-14 раз слабее, чем на других картах, а на заводе часть ламп гасла и мигала. Сцены выглядели заброшенными, мы сделали ровное рабочее освещение.
Итерации дизайна по порядку
Стек
Технологии
Стек выбираем под задачу, бюджет поддержки и команду, которая будет развивать продукт
- three.js и WebGL3D-сцены, физика полета, HUD поверх картинки
- JavaScript без фреймворковДвижок, стики, конструктор трасс, Gamepad API
- Service Worker и Web App ManifestУстановка на телефон и офлайн-режим
- PythonСборка карт и страниц, 15 языковых версий, сбор статистики
- SQLiteБаза событий аналитики
- Caddy на VPSРаздача международной версии из Франкфурта и Нью-Йорка
Процесс
Как идет работа
Прозрачный процесс: каждый этап заканчивается результатом, который можно посмотреть руками
- 01
Прототип
Однофайловый симулятор с физикой квадрокоптера и поддержкой пульта, затем карта подземного паркинга.
- 02
Сайт
Лендинг fpv0.ru, SEO-заголовки под поиск бесплатного симулятора, мобильный слой со стиками.
- 03
Новые карты
Завод и площадка собраны из движка паркинга скриптом, у каждой три трека или фристайл.
- 04
Международная версия
Домен fpv0.com, свои серверы, своя аналитика и конструктор трасс.
- 05
Языки и UX
15 языков, замер кнопок на живом сайте, новый стартовый экран и переключатель языков.
- 06
Доводка
three.js со своего домена, ровный свет на картах, графики динамики в панели статистики.
Вместе к большему
Нужна игра или 3D в браузере?
Расскажите идею, и мы предложим, как запустить ее на телефоне и компьютере без установки.
Бесплатно
Прототип вашего приложения или сайта за 5 дней
5-7 ключевых экранов и смета по этапам. Останутся у вас, даже если дальше вы решите работать не с нами.
Оставить заявку
Расскажите о вашем проекте
Мы свяжемся с вами в течение рабочего дня и предложим варианты решения.
- 1Созвон на 30 минут: разбираем задачу
- 2Вилка по бюджету и срокам
- 3Прототип и точная оценка
Или напрямую: +7 (982) 010-01-18