360° – How to rotate a car under your finger

How to rotate a car under your finger

How to make a 3D car model that you can rotate on your screen? Although some technology has been built around that, it’s not as smooth and precise, and it would be quite hard, especially if you want to give the power of 3D modeling to every user that wants to sell a car. We want to make it easy, quick, and effective, so we went a step back and went for an old-school picture-by-picture framing.

If you have enough pictures of your car, all around the car, then you can appropriately change to the next (or previous) picture when the user starts to move their finger on the screen. It’s not like the gallery where you swipe the pictures to the left or to the right, it’s about changing the pictures as the user moves their finger, without lifting it, so you get the illusion of rotating the car.

The first idea of “modeling” the car was instructing the user to just hit the “start” button, walk around the car and when they get to the starting point, just hit the “stop” button. In the background, we would be taking a picture every second or so. This was quite unfortunate implementation for several reasons. Some people walk faster, some walk slower, terrain is different and sometimes your hands shake – this made the pictures blurry and every walk you had a different number of pictures. More pictures are better for smoothness of rotation, but make the upload and download slow, take up more server storage, and it’s hard to determine which pictures are blurry.

The implementation we went with was that we defined exact points around the car and instructed the user to take those pictures. This is done in the following way: the user gets an icon of the car angle and an oval on the screen where the car should be. When they take the picture, they are instructed to move left to the next position as the icon of the car changes to the new expected angle. This is done for 12 angles.

The benefits of the described implementation are: pictures are clear, it doesn’t matter how fast or slow you are walking, and we always know which picture is of which angle. That helps when setting the primary picture of the ad – for instance, we always want to show the front left angle of the car for every ad on our platform.

This is an exclusive mobile app feature for obvious reasons – you cannot take pictures by these instructions for the desktop. We want to make our mobile apps even better and invite more users to use the apps, so we didn’t add the feature of rotating the car to the desktop users either.
There is great potential in this feature and we have so many ideas on how to make it even better.  The next step is live user feedback and research, we need to see how users are responding and decide what’s worth doing and give them all the visual information for the car they want to buy – from every angle.

Always on a lookout for new talent @ Njuškalo

Apply Today