Have you ever seen a cool piece of furniture in a furniture store catalog? Maybe you wondered how the couch looks from behind, or how to view the table in 3D to better estimate its dimensions.

Idea

I tried to use the well-known store IKEA and its Catalog to implement my idea. This project aims to bridge the gap between physical catalogs and digital visualization. The core concept involves using QR codes placed on the product pages to link to an external web application. Once the user scans the code, this application can display a 3D model of the product above its corresponding picture in the physical catalog.

Implementation

For technologies, I used HTML, CSS and JavaScript. For the purpose of pattern recognition and tracking, I used the framework mindAR.js. For displaying the 3D Objects, I used the framework A-Frame. Sadly, the 3D objects that I used are very high fidelity and that impacts the performance of the application. So when you want to scan the furniture elements on the page, you have to be very careful, not to move too much or too quickly. It’s hosted on my own server as a docker instance using a Nginx web server.

Link to the Webapplication: https://.ikea-scanner.laschober.eu

Disclaimer: This project is not affiliated with, endorsed by, or in any way officially connected with IKEA. The use of IKEA’s name and catalog images is solely for illustrative purposes as a practical example for the proof of concept.