Je bekijkt online een paar schoenen. De winkel geeft je een vooraanzicht en een zijaanzicht. Je zoomt in in de hoop de textuur van het leer te zien, maar de afbeelding verandert in een mozaïek van pixels. Je gaat naar de volgende foto. Het is dezelfde schoen aan een andere voet. Tien foto's later kun je nog steeds niet zien of de zool stijf of flexibel is, of de kleur echt marineblauw is of een vervaagd zwart. Bij het afrekenen aarzel je. Dan sluit je het tabblad.
Dit gebeurt miljoenen keren per dag. Platte afbeeldingen vragen de klant om het mentale werk te doen om het echte object voor te stellen. Dat werk zorgt voor frictie, en frictie doodt verkopen.
Stel je nu een ander tabblad voor. Dezelfde schoen wordt geladen als een 3D-model direct in de pagina. Je klikt en sleept om het te draaien. Je zoomt in, en de geometrie blijft scherp omdat je naar een mesh kijkt, niet naar een uitgerekte bitmap. Je wisselt de kleurvariant in realtime. Je inspecteert de stiksels langs de hielkap van onderaf, een hoek die geen productfotograaf de moeite heeft genomen om te fotograferen. Het object bestaat op je scherm zoals het in de ruimte bestaat. Je voegt het toe aan je winkelmandje omdat het voelt alsof je het al in handen hebt gehad.
Niets aan het product is veranderd. Alleen de ervaring wel.
Waarom de browser?
Tot voor kort vereiste dit soort interactie een speciale app of een plugin die de meeste gebruikers weigerden te installeren. Three.js veranderde dat. Het is een JavaScript-bibliotheek die bovenop de ingebouwde WebGL-renderer van de browser draait en ontwikkelaars in staat stelt om 3D-scènes te bouwen met dezelfde code die de rest van de webpagina aanstuurt. De gebruiker hoeft geen speciale software te downloaden. Er is geen apart venster, geen uitvoerbaar bestand, geen toestemmingsdialoog. Het canvas wordt gerenderd zoals elk ander HTML-element.
Dat is belangrijk omdat toegankelijkheid de adoptie bepaalt. Als een klant een 3D-product op zijn telefoon kan bekijken tijdens het pendelen, op een oude laptop, of op een zakelijke desktop die door de IT-afdeling is vergrendeld, bereikt de technologie daadwerkelijk mensen. Three.js verandert de browser in een universele viewport.
Waar 3D zijn plek verdient
Het toevoegen van driedimensionale graphics is niet gratis. Het kost ontwikkeltijd, performance-budget en vaak een productiebudget voor de assets zelf. Je moet die kosten alleen maken wanneer het rendement reëel is. De vier veelvoorkomende argumenten voor web 3D verdienen elk meer gewicht dan een simpel opsommingsteken.
Hogere betrokkenheid klinkt als een marketingmetriek, maar het heeft een mechanische oorzaak. Wanneer een bezoeker met een scène kan interageren — draaien, zoomen, animaties triggeren — genereren ze hun eigen content. Ze ontvangen niet langer passief een pitch. Ze zijn aan het verkennen. Die actieve staat houdt hen langer op de pagina omdat ze nog niet klaar zijn met het model. Ze willen de achterkant zien. Ze willen de binnenkant zien. De interactie creëert nieuwsgierigheidslussen die statische rasters niet kunnen nabootsen.
Beter begrip is het meest duidelijk in e-commerce. Een bank die in twee dimensies wordt getoond, dwingt de shopper om afmetingen van een specificatieblad te lezen en diepte te verbeelden op basis van een schaduw. Een 3D-model laat hen om het meubelstuk heen draaien en zien hoe de armleuning taps toeloopt. Ze kunnen het in hun kamer plaatsen met behulp van augmented reality die is gebouwd op dezelfde Three.js-scène, waarbij ze de vrije ruimte onder een raam controleren zonder een meetlint te pakken. Wanneer klanten producten vanuit elke hoek zien, nemen ze beslissingen met vertrouwen.
Storytelling gaat verder dan producten. Een fabrikant kan laten zien hoe een motor door de verbrandingscyclus gaat zonder een fysiek demo-model te verzenden. Een architect kan een klant door een plattegrond leiden voordat de fundering is gestort. Beweging legt relaties uit waar woorden en stilstaande beelden moeite mee hebben om