Instructions

You can freely explore the scene above (click it first to give it focus).

Try turning rotation off, enabling textures, and interacting with the furniture. You can drag objects around and control the camera as well (scroll wheel = zoom, drag = rotate, right-click drag = pan, left click to select).

About this component

I didn’t have a concrete plan beyond showing something that reflects the kind of work I do professionally. I had a rough idea to show some 3D, but how to do it was the tricky part.

Here’s how I made it and how you can do the same:

Start by using IKEA’s bedroom planner to design a room directly in the tool.

When you click Share, you’ll get a design code. This code is a reference to the stored room configuration.

If you open a design code in the planner and inspect what happens, you’ll see that it resolves into a JSON structure. This contains local and world transformations for each object, details about how the room’s walls are constructed, and the materials applied to them.

With a bit more digging, you can also find references to the GLB files for the furniture, the compressed 3D asset data. (You can even grab these directly from the browser cache.)

What I’ve done here is recreate the same idea using a custom Three.js / React-Three-Fiber app adding some interactivity to it. I simplified things by only persisting the final transformations (this isn’t a full room parser) and then rendering the objects from that data.

All interactivity is handled through React-Three-Fiber’s built-in tools. Manipulating 3D objects and treating them as React components is surprisingly easy.

I had some issues with R3F and Framer. I was able to import Three.js into Framer, but not R3F. I was able to deploy the files into a static website and use Framer's code components to display a "website" as a component which I can format any way I want. This provided a great solution.