Помимо разработки веб-сайтов, я также, и прежде всего, графический дизайнер. Когда я работаю над visual identity
, я часто использую Mockups
чтобы показать своим клиентам дизайн в ситуации.
В производстве и дизайне макет или макет - это масштабная или полноразмерная модель дизайна или устройства, используемая для обучения, демонстрации, оценки дизайна, продвижения по службе и других целей.
Вот несколько примеров того, как выглядит макет:
Я сейчас активно работаю над e-commerce website
чтобы тренироваться, так как развитие стало более тяжелым, чем простой веб-сайт витрины. Чтобы улучшить User Experience
, я хотел бы включить способ interactive mockups
как показано выше.
То, что я имел в виду, было бы способом visualise a picture on a frame whitin a room
.
Что-то, что будет выглядеть так:
И это может быть настроено для каждой стены и рамки, как это (просто уродливый пример):
Проблема в том, что, в основном, я не знаю, what to use
для разработки такого вида моделирования в реальном времени (пользователь просто загрузит изображение, и картинка будет соответствовать контейнеру)
Вот о чем я уже думал:
Javascript
. Это легко сделать, потому что это не ответит моим потребностям, поскольку картина не будет следовать perspective
, как показывают на этом изображении:
Вторая идея заключается в том, чтобы сделать комнату в 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
?
Вы, вероятно, ищете three.js. Это библиотека WebGL для рендеринга трехмерных объектов. Для того, что вы показали, вы можете начать с примитивов, таких как плоскости и коробки, и изменить их текстуры с помощью изображений или цветов. Когда вам нужно будет импортировать объекты в проект, вы можете легко их экспортировать.
Простое transform: translateZ();
CSS transform: translateZ();
должно быть достаточно, взгляните на перспективу MDN - CSS.
Обратите внимание, что браузер не поддерживается на 100%, но если для вас приемлемо 83%, это самый простой способ.