Skip to content

Инструменты для создания виртуального музея: часть третья — фото в 3D

Помимо панорам и виртуальных туров, задалась я вопросом, можно ли нам как-то для музейного комплекса в университете найти решение и сделать самим представление крутящейся 3d-фотки при описании какого бы то ни было экспоната. Как делают это в интернет-магазинах — просмотр фото с возможностью вращения на 360 градусов.
Спасибо всем авторам, кто не боится приоткрывать завесу в свою мастерскую — очень интересно было узнать о синхронизации камер с поворотными столами и автоматической «заливкой» фоток не на карту памяти фотоаппарата, а в комп:

Съёмку можно вести на поворотных столах как с автовращением (настраивается и синхронизируется с камерой), так и на столике с вращением вручную по заданному промежутку (в градусах) — через каждые 10-15-30 и далее градусов. Великое множество поворотных столов на AddSpace.ru и недорогие — стоимостью 7500 рублей на конец декабря 2015 года. Если возникнет необходимость нам фотографировать такие вещи — купим обязательно. Кстати, на автоматическом поворотном столе можно снимать видео — это для особо ленивых, кто не хочет заморачиваться с фотографированием и описанием 🙂

А далее речь пойдёт о самом интересном. Отснять нужное число кадров — половина дела. Надо ещё эти фотки как-то заставить крутиться. Для этого есть великое множество скриптов для 3d-вращения, замечательное описание которых и к которым я нашла на странице 360-pro.ru. Здесь перечислялись скрипты: SpriteSpin, reel, 360 javascript viewer, jQuery.Threesixty, Ajax-Zoom 360°/3D, Dopeless Rotate. Я остановлюсь на двух самых простых, которые мне понравились.

Ajax-Zoom 360°/3D 

 

Хотелось мне испытать работу этого скрипта в Битриксе, но… требуется ему ionCube Loader — шифровальщик php-файлов, полностью бесплатный (дополнительно про установку модуля можно прочитать на хабре):

Некоторые хостеры предоставляют уже установленный шифровальщик, как например www.hostland.ru — я на тестовом получила предустановленное решение:

Дальше загружаю на сервер папки со скриптами Ajax-Zoom‘a (скачать можно с оф.сервера):

Примеры лежат в папке examples (предварительный просмотр доступен по ссылке с примерами):


Получаем полностью рабочее и бесплатное (для некоммерческих проектов) решение, которое «светит» своё сообщение в углу окна просмотра:


Решение полностью адаптивно, подгоняет размеры под ширину экрана на любом устройстве:


Вы заметили, что в двух последних скриншотах у меня светится ошибка — это из-за ограничений на размер фотографии — бесплатно можно загрузить фотку не более 3 Мегапикселей:

Лезу читать лицензию — найденная и используемая в данном примере лицензия Light — это 500 фотографий по 3.2Мп и со вставкой лого:

Однако, возник вопрос (а вместе с ним и надежда) — что, если 500 — это не число фотографий, а 500 объектов в 3D-модели? Бггг, наивная! Пишу в техническую поддержку, а вдруг повезёт. И ответ:


А это означает, что если на поворотом столике с фотографированием кадра через каждые 10 градусов мне понадобится 36 кадров.
500 : 36 = 13 объектов в 3D.
Было очень жаль. Но есть вариант — уменьшать угол поворота при фотографировании. Так, если при повороте на угол в 15 градусов мне надо будет сделать 24 кадра — получится 20 объектов в 3D, а при повороте на 20 градусов — уже 18 кадров, но с заметным «дёрганьем» объекта при повороте и 27 объектов в 3D… В общем, для представления запасов камней-экспонатов минералогического музея явно недостаточно мощностей данного ресурса для бесплатного использвоания 🙂 А сам скрипт великолепен и хорош. Взяла на заметку, а далее вопрос важности, необходимости и нужности будет решаться на уровне руководства — что и для каких нужд надо и в какие сроки.

360 javascript viewer

 

Это полностью бесплатный и не накладывающий ограничений ни на размер файлов, ни на количество штук кадров, ни на пиксели. Единственное условие — при вращении фотки появляется лого (фото каменного кеда взято с сайта про скрипт Jquery.Threesixty):


Конечно, за 19$ можно купить платную версию, а базовые бесплатные настройки доступны на сайте скрипта. Кроме того, много примеров с описанием (всё на аглицком). Главная строка в скрипте — total_frames -указывает ваше число промежуточных кадров для создания 3D-объекта. Можно размещать на странице несколько таких объектов, но для этого не забывайте менять айдишники у image_holder_x и product_image_x, прописывая последний в объявлении target_id:’image_holder_x’. Вот, собственно, и всё!

 

Да, почему именно о двух вот этих скриптах я написала? Потому что именно их проще всего внедрить в компоненты битрикс, это может сделать даже верстальщик, без участия мега-супер-программиста. ВременнЫе затраты составят максимум 1 рабочий день. Удачных работ, внедрений и съёмок!

Published in1С-Битрикс3D-турыСторонние решения