Arange.es

• 

  Your home is the showroom: Instantly visualize, place, and size AR furniture and art with geometric accuracy before you buy.

Inspiration

Our journey began by analyzing Meta's "Chairs-etc" example, a foundational AR demo that allows users to slide furniture around a virtual floor. While technically impressive as a physics playground, we identified critical gaps that prevented it from being a viable commerce tool. The "Chairs-etc" example relies on a simplified simulation: it detects a single floor height and generates an infinite, invisible plane. Objects "slide" using physics impulses, drifting loosely and ignoring real-world obstacles like tables or walls. We realized that for AR commerce to build trust, it needed to move from simulation to reality. We set out to build arange.es not as a toy, but as a precision-grade instrument that respects the user's actual physical environment—walls, clutter, and all.

What it does

arange.es is a web-based, immersive augmented reality commerce platform for the Meta Quest. It allows users to visualize furniture and art in their own homes with millimeter precision before buying. Multi-Surface Placement: Unlike standard demos, users can place objects on floors, tables, shelves, and walls. A lamp snaps to a coffee table, not the floor beneath it. Wall Art Precision: Users can hang virtual paintings that sit perfectly flush against their real walls, automatically aligned to the surface normal. Immersive Shopping: Users can browse a catalog, add items to a cart, and even complete a purchase via Stripe. Global Accessibility: The entire interface and product catalog are fully localized in English, Spanish, German, and Italian.

How we built it

We built arange.es using React, Three.js, and the WebXR Device API. The core of our innovation lies in replacing standard physics libraries with custom geometric systems. Geometric Math over Physics: We discarded the rapier3d physics engine used in the Meta example. Instead, we built a custom PlacementSystem.ts that uses direct matrix transformations. Room Scan Integration: We utilized the RATK (Reality Accelerator Toolkit) to access the Room Scan Mesh. Instead of raycasting against a fake floor plane, our system raycasts against the live 3D mesh of the user's room. This allows for proper occlusion (virtual objects hiding behind real ones) and detection of complex surfaces. Smart Auto-Scaling: We implemented a loadGLTFModel function that reads real-world dimensions (e.g., "height: 1.5m") from our Firestore database. It measures the raw bounding box of the 3D model and applies a precise scale factor, guaranteeing that a virtual sofa appears at 1:1 scale in the user's room. Spatial Anchors: To ensure persistence, we implemented ratk.createAnchor().

Challenges we ran into

Challenges we ran into The "Floating Art" Problem: Initially, placing flat objects like paintings on walls was difficult because 3D models often have their origin point in the center. This caused paintings to clip halfway into the wall. Solving it: We wrote a custom adjustWallDepth algorithm. It calculates the bounding box of the object in its local space, finds the minimum Z value (the back of the frame), and offsets the position along the wall's normal vector. This ensures every piece of art sits perfectly flush, with a 1.5mm safety buffer to prevent Z-fighting (flickering textures).

Accomplishments that we're proud of

Accomplishments that we're proud of Millimeter-Precision: Successfully moving from "floating physics objects" to rigid, architectural alignment that feels professional and trustworthy. Seamless Commerce: Implementing a functional "Buy" button directly inside the AR experience. Integrating Stripe via Firebase Cloud Functions allowed us to initiate a secure checkout session without breaking the user's immersion. Multi-Language Immersion: Successfully implementing dynamic localization (i18next) that updates product descriptions and UI labels instantly within the 3D scene, making the tool accessible to a European audience.

What we learned

The Importance of "Real" Geometry: We learned that users trust AR only when it interacts with their mess. A chair that slides through a coffee table breaks the illusion; a chair that stops against it builds confidence. WebXR Capabilities: We discovered the immense power of the WebXR Device API combined with RATK. The ability to access the raw Room Scan mesh in a browser environment enables native-app quality experiences without an app store download.

What's next for Arange.es

Our next steps are focused on finalizing the commercial platform and extending our mission to empower smaller creators:

Finalizing Legal Structure: Secure the necessary legal entity to move our integrated Stripe payment system out of testing and process live transactions.

Empowering Artists: We plan to purchase a high-quality 3D scanner to offer subsidized digitization services to local artists, small-scale manufacturers, and independent designers. This will give them the necessary 3D assets to adapt to the AR market and compete effectively.

Go-to-Market: Launching the platform with a curated selection of scale-accurate products and promoting our precision-first approach to AR shopping.

Built With

• ratk
• react
• react-three/fiber
• tailwind
• three.js
• typescript
• webxr