Bouw je eerste bankconfigurator

Een interactieve 3D-bankconfigurator maken klinkt misschien ingewikkeld, maar met Amaspace is het een overzichtelijk proces waarin je stap voor stap wordt begeleid. In deze tutorial bouw je een werkende configurator voor een bank met meerdere materialen en kleuren, klaar voor je webshop.

Deze handleiding is bedoeld voor productmanagers, e-commerceteams en developers die voor het eerst een aanpasbare bank opzetten.

Wat je leert

• Hoe je je basismodel en bijbehorende assets uploadt
• Hoe je configuratielogica ordent met categorieën en attributen
• Hoe je materialen en texturen aan je 3D-model koppelt
• Hoe je regels en logica instelt voor een overzichtelijkere gebruikerservaring
• Hoe je je configurator publiceert en bekijkt

Stap 1: Maak een nieuw product aan

Klik in je dashboard op "Create Product". Vul de basisgegevens van het product in, zoals naam, beschrijving, prijs en een previewafbeelding. Je uploadt ook het basis-3D-model van de bank: de asset waarop je configurator is gebouwd.

Daarna verschijnt het product in je lijst. Klik erop om de interne pagina te openen.

Stap 2: Upload extra assets

Hier upload je de configuratie-elementen die je 3D-artiest heeft voorbereid. In dit voorbeeld gebruiken we twee verschillende materialen, elk met eigen ingebakken texturen. Deze assets vallen onder drie ondersteunde typen:

• Model
• Materiaal (Material)
• Textuur (Texture)

In dit voorbeeld werken we alleen met materialen. Die worden omgezet in kiesbare opties in je configurator.

Stap 3: Open de 3D Editor

Zijn je assets geüpload, klik dan op de knop 3D Editor. Hier leg je de configuratielogica en de presentatie vast. Je ziet twee belangrijke zijbalken:

• In de linkerzijbalk maak en orden je categorieën en attributen
• In de rechterzijbalk bewerk je elk geselecteerd item (bijv. standaardwaarden instellen, modelonderdelen koppelen)

Stap 4: Zet attributen in een categorie

In Amaspace hoort elke set aanpasbare opties in een Category (categorie). Zo blijft je editor overzichtelijk. Maak voor dit voorbeeld een categorie met een naam als "Materiaal en kleur bank".

Binnen deze categorie definieer je attributen voor elke materiaaloptie.

Stap 5: Maak materiaalattributen aan

Maak nu twee aparte attributen, één per bekledingsmateriaal (bijv. "Stofopties" en "Leeropties"). Elk bevat een paar kleur- of textuurvarianten waaruit de klant kan kiezen.

Stap 6: Voeg PCO's toe via de Asset Library

Open onderaan de linkerzijbalk de Assets Library. Ga naar het tabblad "Assets" en filter op:

• "Current product" (huidig product)
• Assettype: "Material"

Sleep de gewenste materialen naar het juiste attribuut. Ze worden omgezet in PCO's (Product Customization Options). Daarna kun je het volgende aanpassen:

• Prijseffect
• Weergavenaam
• Previewminiatuur
• Standaard geselecteerd

Stap 7: Koppel materialen aan het model

Om je opties te laten werken, koppel je ze aan specifieke onderdelen van je 3D-model.

• Selecteer een attribuut
• Klik met de Part Picker op de juiste mesh- of materiaalzone in het model

Zo werkt het model in realtime bij zodra de klant iets kiest.

Stap 8: Stel logicaregels in voor een betere UX

Je wilt voorkomen dat gebruikers tegelijk opties uit beide attributen kiezen. Maak daarvoor regels aan:

• Elke regel bestaat uit een Condition (voorwaarde) (bijv. "Als stof is gekozen")
• En een Action (actie) (bijv. "Zet het leerattribuut op geen")

Je maakt een regel voor elke combinatie die botst. Zo is er altijd maar één groep actief en voorkom je inconsistente configuraties.

Bestaande regels dupliceren en aanpassen gaat veel sneller.

Stap 9: Pas de camerapositie aan in de Scene Editor

Open de 3D Scene Editor om je product zo goed mogelijk in beeld te brengen.

• Open de sectie "Camera" in de rechterzijbalk
• Kies de weergave Configurator
• Stel de camerapositie in met je muis of trackpad
• Klik op "Save" zodra je de ideale kadrering hebt

Zo zien je gebruikers het product meteen vanuit de juiste hoek als de pagina laadt.

Stap 10: Zet een standaardomgeving aan

Zet in dezelfde editor de standaard 3D-omgeving aan met de schakelaar. Dit voegt een omgeving met een reflecterende vloer toe, zodat het product realistischer oogt.

Stap 11: Publiceer je product

Ga terug naar de producteditor en klik op Manage → Publish. Daarmee komt je configurator beschikbaar voor live preview en testen.

Stap 12: Bekijk en test

Klik door je materiaalgroepen en beschikbare texturen. Je ziet de prijs veranderen, het model reageren op elke keuze en de logicaregels ongeldige combinaties blokkeren.

Samenvatting

In een paar begeleide stappen heb je een werkende 3D-bankconfigurator gemaakt met:

• Twee materiaalfamilies
• Realtime modelupdates
• Eigen prijslogica
• Een overzichtelijke, gebruiksvriendelijke interface

Deze opzet kun je herhalen voor andere producttypen in je catalogus. Wil je deze configurator uitbreiden met AR-weergave of een showroomintegratie? Bekijk dan onze handleidingen in het volgende deel.