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

Question

[Анна]

Всем привет.
Есть какие-нибудь плагины или уроки, как реализовать подобную механику russkiydom.kvartira-lux.ru/visual ?
Фон - это картинка, дома - это svg, подлеты - это видео.

Comments

[Vitaliy]

вопрос в подготовке контента или есть уже готовый?

[Анна]

Картинка есть и есть видео подлетов

Answer 1

[Vitaliy]

Выделить в отдельный класс, назовем его SVGMap, который будет отображать SVG, в котором будут кликабельные path'и и фото как фон. Добавить обработчики кликов к path, по которым будет:
1. загружаться видео и следующий SVGMap
2. по окончанию его загрузки удалять текущий SVGMap и воспроизводить видео
3. после окончания воспроизведения видео отображать текущий SVGMap

Answer 2

[dummyman]

Извиняюсь, поздно ответил на вопрос. Все это и многое другое, не показанное на сайте "Русский Дом" реализуется с помощью openlayers.
Если непонятно как, спросите у этих ребят, у них тоже много опенсурсных проектов. Возможности openlayers можно заценить на демке на главной странице https://www.mapbox.com/ http://projectatlas.io. Да если обладать фантазией можно сделать и круче

Нашел еще одну прикольную демку c 3d-домами на openlayers
osmbuildings.org

Answer 3

[Дима Паутов]

Вы же уже всё описали как делать. В чем проблема?

Берётся картинка, поверх неё кладётся svg маска. При наведении на каждый тег path в svg подсвечиваем его ну и далее по функционалу. Дело копеечное

Comments

[Анна]

Я может и описала, но так как никогда не делала, я не знаю с чего начинать.

[Дима Паутов]

Анна: Тут наврятли вам кто-то поможет. Готовых решений под такое я не видел, но делал сам не 1 раз.
Я уже описал как делать. Чем еще вам помочь то? У вас же есть сайт с примером и есть панель разработчика, что бы детально посмотреть что и как там. Если вы верстальщик у вас нет знаний svg а следовательно и илюстратора - это печально. Тогда воспользуйтесь дизайнером, который это рисовал и пускай для вас сделает эту svg маску. Ну а дальше как я описал

Answer 4

[astonam]

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

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

Кстати, оооочень знакомы проект)

Answer 5

[Максим Тимофеев]

Думаю изначально сделана 3d модель полностью, далее сделаны видео переходов в том же ПО в чем и сама модель сделана, подобных программ множество. Далее несколько картинок, переведенных в svg.