Как создаются 360 viewer?

Question

[QaED]

Добрый день! Подскажите пожалуйста, как делаются на сайтах и вообще 360 viewer? К примеру, когда ты конфигурируешь автомобиль, то там меняеются отдельные части в зависимости от выбора и сам автомобиль можно рассмотреть со всех сторон. Причем как я понял это не видео и не гифка, тогда вопрос что? И как правильно это реализовывается?
Для примера (хотя тут он глючный): https://is.gd/l3gXUb
P.S. Не знал какие теги сюда поставить, если что поправьте :)

Answer 1

[Eduard07]

Есть библиотека Three.js, это уже нужно работать с объектами.
Но если нужно показать тебе только 360 авто, то покадровая смена фото: jquery.vostrel.cz/reel

Comments

[QaED]

С фотографиями конечно хорошо, но мне нужно чтобы фона не было, по типу .png что-ли

[Eduard07]

QaED, можно png, webp

Answer 2

[rPman]

Можно пререндерить заранее модель (или даже нарисовать), что делают чуть ли не руками в 3d редакторе, имеет смысл если меняется только один угол зрения (например поворачивать по вертикали но не менять угол по горизонтали), отдельно каждую отсоединяемую деталь и отдельно уровни над и под этими деталями (360 или даже 180 кадров не много), на экране это будут просто плоские спрайты - самая шустрая реализация, особенно для слабого железа но кушает сетевой трафик

Сделать модель, адаптировать под веб и библиотеки и делай что хочешь и как хочешь, сложнее, выше требования к железу пользователя, правда простые модели сейчас на любом утюге будут крутиться.

Comments

[QaED]

То есть можно модель в 3DS Max отрисовать предположим, а потом как-то залить на сайт?

[Eduard07]

QaED, да

[rPman]

конвертировать в формат который поддерживается выбранной библиотекой, их на сколько я помню много.
первые же примеры из гугла
https://github.com/google/model-viewer
https://cgwire.github.io/js-3d-model-viewer/

[QaED]

rPman, понял, спасибо

[QaED]

rPman, хотел еще спросить, например я решил делать с фотографиями, это конфигуратор мебели (ну предположим), естественно нет возможности изготавливать каждый вариант. Тогда как лучше поступить, сделать один вариант остальные до фотошопить или есть другие варианты?

[rPman]

3d модель с текстурами же, меняешь текстуры - фоткаешь

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