Задать вопрос
Virall
@Virall
javascript

Как сделать подобный интерактивный 3D план?

Всем привет.
Есть какие-нибудь плагины или уроки, как реализовать подобную механику russkiydom.kvartira-lux.ru/visual ?
Фон - это картинка, дома - это svg, подлеты - это видео.
  • Вопрос задан
  • 1273 просмотра
2 комментария
Подписаться 16 Оценить 2 комментария
Решения вопроса 1
Ni55aN
@Ni55aN
Выделить в отдельный класс, назовем его SVGMap, который будет отображать SVG, в котором будут кликабельные path'и и фото как фон. Добавить обработчики кликов к path, по которым будет:
1. загружаться видео и следующий SVGMap
2. по окончанию его загрузки удалять текущий SVGMap и воспроизводить видео
3. после окончания воспроизведения видео отображать текущий SVGMap
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 4
dummyman
@dummyman
диссидент-схизматик
Извиняюсь, поздно ответил на вопрос. Все это и многое другое, не показанное на сайте "Русский Дом" реализуется с помощью openlayers.
Если непонятно как, спросите у этих ребят, у них тоже много опенсурсных проектов. Возможности openlayers можно заценить на демке на главной странице https://www.mapbox.com/ http://projectatlas.io. Да если обладать фантазией можно сделать и круче

Нашел еще одну прикольную демку c 3d-домами на openlayers
osmbuildings.org
Ответ написан
Комментировать
Комментировать
bootd
@bootd
Гугли и ты откроешь врата знаний!
Вы же уже всё описали как делать. В чем проблема?

Берётся картинка, поверх неё кладётся svg маска. При наведении на каждый тег path в svg подсвечиваем его ну и далее по функционалу. Дело копеечное
Ответ написан
2 комментария
2 комментария
@astonam
На самом деле, все гениальное просто.
Берется уже готовый фон, поверх него создаются классы, к этим классам привязываются paft (Для обозначения границ) К уже существующим классам привязываются так же свои индикаторы, информация и события.

Советую отрисовывать в canvans, так проблем будет меньше с:
-позиционированием paft.
-масштабированием
-гибкость к разным разрешением окон.

Кстати, оооочень знакомы проект)
Ответ написан
Комментировать
Комментировать
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
Думаю изначально сделана 3d модель полностью, далее сделаны видео переходов в том же ПО в чем и сама модель сделана, подобных программ множество. Далее несколько картинок, переведенных в svg.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Junior JavaScript Developer
КРАФТТЕК • Санкт-Петербург
от 60 000 до 80 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Аспро Максимум не отображаются картинки из Фотогалереи
18 апр. 2024, в 10:53
500 руб./за проект
Gulp, handlebarsjs - изменение темы сайта на ghost cms
18 апр. 2024, в 10:31
8000 руб./за проект
Symfony, Vue - Сервис автоматизации бизнеса натяжных потолков
18 апр. 2024, в 10:29
700 руб./в час
Ещё заказы