3

Besides developping websites, i'm also and above all a Graphic Designer. When I work on visual identity, I often use Mockups to show my customers the design in situation.

In manufacturing and design, a mockup, or mock-up, is a scale or full-size model of a design or device, used for teaching, demonstration, design evaluation, promotion, and other purposes.

Here are some examples of what a mockup looks like :

enter image description here enter image description here

I'm curently working on an e-commerce website just to train myself, as the developpement is way heavier than a simple showcase website. To improve the User Experience, I would like to include a way of doing interactive mockups as show above.

What I have in mind would be a way to visualise a picture on a frame whitin a room.

Something that would look like that :

enter image description here

And that could be customed for each wall and frame, like that (just an ugly example) :

enter image description here

The problem is that, basicaly, I don't really know what to use to develop this kind of simulation in real time (The user would simply upload the picture and the picture would fit the container)

Here is what I already thought about :

  • Making the containers with simple divs, in which I would change the background image with Javascript. Kind of easy to do, tho it would not answer my needs as the picture would not follow the perspective, as show on this image :

enter image description here

  • The second idea I have is to make the room in 3D, which would be a bit harder but not too much. But in this case, I have no clue how to change a 3D model texture on the web. I assume there must be some packages and frimware for that. Something with jquery, maybe ?

  • I finaly thought about using PHP GD to generate an Image but the last time I used it, it was such a pain. And I don't think it could generate any "persective like" texture.

So my question is what firmware/tool can you guys advise me to do that. And what is the best options, in your opinion between using a 3D model and a static Image ?

Sorry for the very long post. I wanted to be as clear as possible.

EDIT :

Maybe something with WebGL ?

B.T
  • 521
  • 1
  • 7
  • 26
  • what approach did you chose and did it work out? – BennoDev Jul 05 '22 at 19:12
  • @BennoDev As far as I remember, I used the `transform: translateZ()` but this was a short project, I don't even have anything remaining. – B.T Jul 11 '22 at 12:21

2 Answers2

2

You are probably looking for three.js. It's a WebGL library to render 3d objects. For what you've showed you can start with primitives like planes and boxes and change their textures using images or colors. Once you'll need to import objects in your project, you can export them easily.

Valeria Viana Gusmao
  • 427
  • 4
  • 8
1

Simple CSS transform: translateZ(); should be enough, have a look at MDN - CSS perspective.

Note that it is not 100% supported by the browsers, but if 83% is acceptable to you, than this is the simplest way.

hKaspy
  • 127
  • 6