Technical Implementation & WebXR

How to implement a virtual ray hit test to place 3D furniture using WebXR JavaScript?

webxr, hit-test, ar, furniture-placement

Use the WebXR Hit Test API: request an XRHitTestSource from the XR session, perform hit tests each frame against detected surfaces, visualize the potential placement point with a reticle mesh, and on user tap create a Three.js anchor at the hit test result's pose. The furniture model is then parented to this anchor, maintaining its position as the user moves. This is the core mechanic behind all browser-based AR furniture placement apps.

webxrhit-testarfurniture-placement

Was this article helpful?

Back to Knowledge Base

Related Articles

Technical Implementation & WebXR

How to completely fix tripod shadows and the nadir in a 360 real estate virtual tour?

The nadir (bottom blind spot showing the tripod) is fixed through several methods: automated AI nadir patching tools in platforms like Matterport handle it automatically. For manual workflows, use Photoshop's clone stamp on the equirectangular projection, or capture an extra handheld shot looking down from each position and composite it in. Some photographers also use nadir caps — pre-made branded images that cover the tripod position.

Technical Implementation & WebXR

Why are the vertical lines converging in my real estate 360 panoramic interior photos?

Converging verticals in 360 panoramas are caused by lens distortion and imprecise leveling of the camera during capture. The 360 camera must be perfectly level (use a leveling base or tripod with bubble level). In post-processing, apply tilt-shift corrections in PTGui or your stitching software. Some cameras offer in-camera horizon leveling that corrects minor misalignment automatically during capture.

Technical Implementation & WebXR

How to optimize a large 3D real estate Gaussian Splat model to load faster on mobile browsers?

Gaussian Splatting models can be massive. Optimize by: reducing splat count through decimation while preserving visual quality, implementing level-of-detail (LOD) streaming that loads nearby detail first, compressing the point cloud data with quantization, and using progressive loading so users see a coarse preview within seconds while full detail streams in the background. Three.js and custom WebGL shaders are the primary tools for browser-based splat rendering.

Technical Implementation & WebXR

What causes severe stitching errors when capturing a 3D virtual tour in a narrow hallway?

Narrow hallways create parallax errors because nearby surfaces shift dramatically between the camera's multiple lenses. The stitching algorithm struggles when objects are very close to the camera (under 1–2 meters). Solutions: position the camera in the center of the hallway, use a lens with less parallax offset, capture more positions closer together, and in post-production use parallax-aware stitching software that handles close-range geometry.