Веб-сайт - динамическое размещение изображений (макет)

1

Помимо разработки веб-сайтов, я также, и прежде всего, графический дизайнер. Когда я работаю над visual identity, я часто использую Mockups чтобы показать своим клиентам дизайн в ситуации.

В производстве и дизайне макет или макет - это масштабная или полноразмерная модель дизайна или устройства, используемая для обучения, демонстрации, оценки дизайна, продвижения по службе и других целей.

Вот несколько примеров того, как выглядит макет:

Изображение 174551 Изображение 174551

Я сейчас активно работаю над e-commerce website чтобы тренироваться, так как развитие стало более тяжелым, чем простой веб-сайт витрины. Чтобы улучшить User Experience, я хотел бы включить способ interactive mockups как показано выше.

То, что я имел в виду, было бы способом visualise a picture on a frame whitin a room.

Что-то, что будет выглядеть так:

Изображение 174551

И это может быть настроено для каждой стены и рамки, как это (просто уродливый пример):

Изображение 174551

Проблема в том, что, в основном, я не знаю, what to use для разработки такого вида моделирования в реальном времени (пользователь просто загрузит изображение, и картинка будет соответствовать контейнеру)

Вот о чем я уже думал:

  • Создание контейнеров с простыми div, в которых я бы изменил фоновое изображение с помощью Javascript. Это легко сделать, потому что это не ответит моим потребностям, поскольку картина не будет следовать perspective, как показывают на этом изображении:

Изображение 174551

  • Вторая идея заключается в том, чтобы сделать комнату в 3D, что было бы немного сложнее, но не слишком. Но в этом случае я не знаю, как change a 3D model texture в Интернете. Я предполагаю, что для этого должны быть некоторые пакеты и исправления. Что-то с jquery, может быть?

  • Я наконец подумал об использовании PHP GD для создания изображения, но в последний раз, когда я его использовал, это была такая боль. И я не думаю, что это могло бы создать любую текстуру "persective like".

Поэтому мой вопрос в том, what firmware/tool вы, ребята, посоветуете мне сделать это. И каковы best options, на ваш взгляд, between using a 3D model and a static Image?

Извините за очень длинный пост. Я хотел быть предельно ясным.

РЕДАКТИРОВАТЬ :

Может быть, что-то с WebGL?

Теги:
image
simulation
mockups

2 ответа

2

Вы, вероятно, ищете three.js. Это библиотека WebGL для рендеринга трехмерных объектов. Для того, что вы показали, вы можете начать с примитивов, таких как плоскости и коробки, и изменить их текстуры с помощью изображений или цветов. Когда вам нужно будет импортировать объекты в проект, вы можете легко их экспортировать.

  • 0
    Я посмотрю на это тогда! Спасибо за помощь, Валерия!
1

Простое transform: translateZ(); CSS transform: translateZ(); должно быть достаточно, взгляните на перспективу MDN - CSS.

Обратите внимание, что браузер не поддерживается на 100%, но если для вас приемлемо 83%, это самый простой способ.

  • 0
    Спасибо :) Я тоже тогда посмотрю

Ещё вопросы

Сообщество Overcoder
Наверх
Меню