THE ROOMFIT EXPERIMENT 01 / THE VIEWER

A first look.
A new perspective.

Before we put a fridge in your room, let’s put a little possibility in your browser. Pick up our first 3D object and look around.

3D playgroundGLB / SAMPLE 01

Preparing your first 3D objectLoading the sample model. An internet connection is needed.

An AR button appears when a launch option is available. Android may open a 3D preview if room tracking isn’t supported.

UNDER THE SURFACE

Three pieces. One experience.

The page

Next.js and React arrange what you see: the model, its details, and the controls. This is the part we build.

src/app/page.tsx

The object

A GLB file packages the shape, surface materials, and textures into one 3D asset. It’s more than a flat photo.

src/lib/demo-model.ts

The viewer

Google’s model-viewer draws the object. On supported phones, it connects to AR so you can place it in your surroundings.

src/components/product-viewer.tsx

TAKE IT OFF THE DESKTOP

Your first phone test.

Open this site in Chrome on your phone. Drag the astronaut, zoom in, and reset the view.

3D works without room tracking.

If there’s no AR button, you can still explore the model. For room placement, use an ARCore-supported Android phone with current Google Play Services for AR and the Google app.

With a supported phone, tap View in your space, allow camera access if asked, and slowly scan a well-lit floor. WebXR needs an HTTPS page.

Opening your local project on a phone

Connect both devices to the same Wi-Fi. On Windows, run ipconfig and find the Wi-Fi IPv4 address. On your phone, open http://YOUR-IP:3000 while the dev server runs. This tests 3D; use trusted HTTPS for WebXR testing. Only allow the dev server on a trusted private network.