Kasvi: AR-перегляд рослин

Three.jsWebXRAR Quick LookUSDZglTFTypeScript

Керування

Drag the plant to turn it (with a mouse, drag up or down to tilt); a vertical swipe still scrolls the page
Turn left, Turn right and Show size buttons under the plant
Tap a numbered spot to read about that part of the plant
Pick Metsä, Lehti or Piikki to switch plants
View in your room: on Android Chrome it starts WebXR AR (move the phone until a ring sits on the floor, tap to place, tap again to move, arrows to turn); on iPhone and iPad it opens AR Quick Look; on a computer it shows a QR code to open the page on a phone
Add ?quality=low to the address to force the light tier

Needs WebGL. Without it, or if the graphics context is lost, the poster is shown. AR needs a phone: Chrome on Android with ARCore (WebXR immersive-ar with hit test) or Safari on iPhone and iPad (AR Quick Look). Respects the reduced-motion setting: no idle turn, no grow-in when switching plants, no pulsing spots. A fictional shop: names and prices are invented; the plant models are CC0 scans from Poly Haven.

Як це зроблено

A product page for Kasvi, a fictional faux-plant shop, built to show the "see it in your room" pattern that furniture, decor and e-commerce stores use. One page gives three AR paths and picks the right one for the device.

How it works

Desktop and any browser: plain Three.js viewer. Drag to turn, a slow idle turn that pauses under the pointer, numbered spots placed on the real leaf and pot surfaces by raycasting from outside the model, and a Show size mode with height and width lines.
Android (Chrome with ARCore): WebXR immersive-ar with hit-test. A ring follows the floor or a table; a tap places the plant at its real size, facing you. anchors keep it pinned to the room when the browser supports them, and light-estimation (through XREstimatedLight) lights the plant from the camera image. A DOM overlay keeps the HTML interface (hint, true-size chip, turn buttons, close) on top of the camera.
iPhone and iPad: Safari has no WebXR AR, so the page builds a USDZ of the current plant in the browser with Three's USDZExporter (anchored to a horizontal plane) and opens it through an <a rel="ar"> link in Apple's AR Quick Look. The file is built ahead of the tap, because Quick Look needs the link ready inside the user gesture.
Desktop AR button: shows a QR code (made with uqr) to open the same page on a phone.

The device choice is a small pure function (pickArMode, unit-tested), including the iPad case where Safari reports a Mac user agent.

Models

Three CC0 photo-scanned plants from Poly Haven (Potted Plant 01 and 02 by Rico Cilliers, Potted Plant 04 by James Ray Cock). They are already in metres, which is what makes true-size AR work without guessing a scale. They were compressed with glTF Transform (Meshopt geometry, WebP textures, light simplification) from 6.3, 2.6 and 2.1 MB down to 1.4 MB, 865 KB and 396 KB. Each model loads only when it is picked, and stays cached.

Performance

One renderer for the viewer and AR (renderer.xr), driven by setAnimationLoop; outside AR it renders only when something moves, and pauses off-screen and in hidden tabs.
High tier: soft shadow map from a window light plus a room environment map. Light tier (?quality=low): pixel ratio 1, no shadow maps, a canvas-drawn contact shadow instead.
Spot and measure labels are HTML buttons moved by direct style writes each frame, so they stay accessible and do not re-render React.

Honest limits

AR needs a phone: Chrome on Android with ARCore, or Safari on iOS. Firefox and desktop browsers get the 3D viewer and the QR code. The shop, names and prices are invented.

Kasvi: AR-перегляд рослин

Висока листяна рослина у вивітреному теракотовому горщику на ніжці на теплому вівсяному тлі, поруч панель товару з трьома розмірами рослини й кнопкою View in your room

kasviPotting the soil000