So erstellen Sie eine 3D- und AR-Produktseite mit dem BASE 3D-AR Studio

Für eine 3D- und AR-Produktseite legen Sie Ihr Produkt als 3D-Modell im BASE 3D-AR Studio an, indem Sie eine .GLB-Datei hochladen oder ein Modell mit KI erzeugen. Das Modell erhält im Studio automatisch eine eigene Live-3D-AR-Seite. Anschließend verfeinern Sie Materialien, Szene und Seitendesign, klicken auf Save und teilen die Seite als Link, QR-Code oder Einbettungscode. Auf iPhone, iPad und Android-Smartphones öffnet sich die Seite ohne App in AR.

Was ist eine 3D- und AR-Produktseite?

Eine 3D- und AR-Produktseite ist eine Webseite, auf der Käufer ein Produkt als interaktives 3D-Modell drehen, zoomen und genau betrachten. Auf dem Smartphone platzieren sie es per Augmented Reality in Originalgröße auf einer realen Fläche im eigenen Raum.

Im Studio von BASE BROS gehört zu jedem Modell genau eine Seite, und jede Änderung am Modell aktualisiert diese Seite. Die Seiten laufen im Browser auf dem BASE 3D Viewer, einem WebGPU-Viewer mit automatischem WebGL2-Fallback, und bringen einen integrierten Button für Augmented Reality mit.

Was brauchen Sie, bevor Sie loslegen?

• Ein Studio-Konto. Der Free-Tarif auf studio.basebros.com kommt ohne Kreditkarte aus.
• Ausgangsmaterial für das Modell. Eine .GLB-Datei mit bis zu 50 MB, Produktfotos (PNG, JPG, WebP, AVIF oder HEIC mit jeweils bis zu 20 MB) oder eine Textbeschreibung mit 10 bis 500 Zeichen. FBX, OBJ und STL werden nicht unterstützt; konvertieren Sie solche Dateien vorher in GLB.
• Optional: ein Logo als PNG, JPG oder WebP mit bis zu 5 MB.

Wenn Sie eine GLB-Datei vor dem Upload prüfen möchten, öffnen Sie sie in Quick View. Dort sehen Sie das Modell im Viewer des Studios, ohne die Datei hochzuladen.

Wie erstellen Sie Schritt für Schritt eine 3D- und AR-Produktseite?

Der Ablauf umfasst vier Schritte, alle direkt im Browser:

1. Modell: eine .GLB-Datei hochladen oder ein Modell mit KI erzeugen.
2. Bearbeiten: Materialien, Beleuchtung, Kamera und Maßstab im Model Editor anpassen.
3. Veröffentlichen: die Seite im Page Designer gestalten und auf Save klicken.
4. Teilen und AR: Link, QR-Code oder Einbettungscode weitergeben. Besucher öffnen AR direkt auf der Seite.

Schritt 1: Ihr Produkt als 3D-Modell anlegen

Wenn bereits eine 3D-Datei vorliegt, laden Sie sie hoch. Klicken Sie dazu in der oberen Leiste des Viewers auf Upload Model oder ziehen Sie eine .glb-Datei in den Model Editor. Eine einzelne Datei öffnet sich zunächst im Preview-Modus, sodass Sie sie prüfen können, bevor Sie Confirm & Upload wählen. Das neue Modell geht danach sofort mit seiner Seite live. Wie Sie die Datei vor dem Upload verschlanken, erklärt dieser Leitfaden zur Vorbereitung von 3D-Modellen für Web und AR.

Wenn Sie nur Fotos oder eine Idee haben, nutzen Sie den 3D Generator, mit dem das Studio standardmäßig startet. Wählen Sie Image to 3D (Standard) oder Text to 3D und anschließend eine von sechs KI-Engines: Meshy (Standard), Tripo, Rodin, Hunyuan, TRELLIS oder Pixal3D. TRELLIS und Pixal3D arbeiten ausschließlich mit Bildern. Für Aufnahmen aus mehreren Blickwinkeln (Multi-View) akzeptieren Meshy, Tripo und Hunyuan Pro bis zu 4 Bilder und Rodin bis zu 5, in der Reihenfolge vorne, hinten, links, rechts.

KI-Modelle bereitet das Studio automatisch für das Web auf: mit Dreiecksreduktion auf der Stufe Balanced, 2K-Texturen im WebP-Format und Draco-Komprimierung. Ob hochgeladen oder generiert: Jedes neue Modell wird einmal auf Ihren Tarif angerechnet.

Schritt 2: Materialien und Szene in Echtzeit bearbeiten

Der rechte Bereich des Model Editors bietet drei Tabs:

• Scene: sieben integrierte Presets (Default, Factory, Studio, Spotlight, Showroom, Cinematic, Outdoor), 20 HDRI-Umgebungen, Hintergründe, Belichtung, Lichtquellen und weiche Schatten.
• Controls: Schalter für automatische Rotation, Zoom und Verschieben mit Grenzwerten für das Hinein- und Herauszoomen, eine gespeicherte Start View für den ersten Blickwinkel, den Besucher sehen, sowie Model Scale, also die reale Größe in Zentimetern, die in AR verwendet wird.
• Material: Sie wählen mit der Pipette ein Bauteil aus und bearbeiten Base Color, Roughness, Metalness, Normal, Emissive und Occlusion (jeweils mit optionaler Textur-Map) sowie Alpha (Deckkraft, Blend-Modus und doppelseitige Darstellung); jeder Wert lässt sich einzeln zurücksetzen.

Materialänderungen liegen als nichtdestruktive Ebene über dem Modell; die ursprüngliche GLB-Datei bleibt unverändert. Fünf Ansichtsmodi (UV Checker, Solid, Render, Wireframe, Normals) machen Probleme bei Texturen und Mesh sichtbar. Bei großen Dateien reduziert der Tab Optimize im Popup More Details eines Modells die Anzahl der Dreiecke um etwa 25, 50 oder 75 Prozent, mit Optionen für Texturen und Draco. Öffentlich sichtbar werden Ihre Änderungen erst, wenn Sie in der Karte Unsaved changes auf Save klicken.

Schritt 3: Die Live-3D-AR-Seite gestalten und veröffentlichen

Der Page Designer zeigt die Seite als Vorschau in einem Laptop- und einem Smartphone-Rahmen nebeneinander. Im Tab AR Button legen Sie Beschriftung (bis zu 40 Zeichen), Position, Schrift, Farben, Eckenradius und Deckkraft des Buttons fest, außerdem das QR-Popup, das Besucher am Desktop sehen. Im Tab Toolbars verwalten Sie Ihr Logo sowie die Buttons Photo, Light/Dark, Fullscreen und optional Performance.

Desktop- und Mobilansicht gestalten Sie getrennt oder übernehmen mit einer einzigen Checkbox dieselben Einstellungen für beide. Alternativ wenden Sie eines von acht integrierten Page Themes an (Minimal, Neon, Elegant, Retro, Glass, Brutal, Azure, Cherry). Für das iPhone können Sie eine eigene .usdz-Datei hochladen; andernfalls erzeugt das Studio die USDZ-Datei aus Ihrer GLB-Datei.

Mit Save veröffentlichen Sie die Seite: Einen separaten Veröffentlichungsschritt gibt es nicht. Möchten Sie eine Seite vorübergehend offline nehmen, ohne sie zu löschen, nutzen Sie Set Offline im Popup More Details des Modells. Bis Sie Set Live wählen, sehen Besucher eine Wartungsseite; gelöscht wird dabei nichts.

Schritt 4: Die Seite teilen und in AR öffnen

Share Page öffnet das Popup Share & Embed mit dem QR-Code (Download PNG), dem öffentlichen Link, dem Einbettungscode zum direkten Einfügen und dem Button Open live page. Die Einbettung ist ein Standard-iframe, den Sie in Ihre eigene Website einfügen; für AR innerhalb des iframes ist HTTPS erforderlich.

Auf dem Smartphone tippen Besucher auf den AR-Button, der standardmäßig View in AR heißt. iPhone und iPad öffnen Apple AR Quick Look mit der USDZ-Datei, Android öffnet WebXR in Chrome mit Ihren aktuellen Materialien. Beide nutzen Surface Tracking (Flächenerkennung), um das Produkt in Originalgröße auf einer realen Fläche zu platzieren; die Größe legen Sie über Model Scale fest. Am Desktop öffnet der Button ein QR-Popup, über das Besucher die Seite auf ihrem Smartphone öffnen. Mehr dazu lesen Sie im Artikel über WebAR im E-Commerce (auf Englisch).

Wie teilen Sie die Seite am besten?

Alle vier Optionen führen zur selben Live-Seite, Sie können sie also beliebig kombinieren.

Wie messen Sie den Erfolg der Seite?

Analytics wertet alle Seiten gemeinsam oder eine einzelne Seite aus, wahlweise für All Time, die letzten 30 Tage, 7 Tage, 24 Stunden oder einen frei wählbaren Zeitraum. Quick Stats zeigt 12 Kennzahlen, darunter Total Views, Unique Sessions, QR Scans, AR Activations, 3D Interactions, Avg View Duration und Bounce Rate. Ein Funnel verfolgt Besucher vom Aufruf über die 3D-Interaktion und das QR-Popup bis zu AR, und über Export PDF speichern Sie einen Bericht. Details finden Sie in der Analytics-Dokumentation.

Welche kostenlosen Tools helfen schon vor der Anmeldung?

BASE BROS bietet zwei kostenlose Tools, die ohne Konto funktionieren und Ihre Datei nie hochladen:

• Quick View öffnet eine .GLB-Datei mit bis zu 50 MB sofort im Viewer des Studios, mit dem Material-Panel zur Prüfung.
• Der Model Optimizer zeigt eine .GLB-Datei mit bis zu 150 MB (auf Bildschirmen bis 1024 px Breite bis zu 50 MB) in vier Detailstufen mit den tatsächlichen Dreieckszahlen an, konvertiert Texturen in WebP oder PNG in 1K oder 2K, wendet Draco-Komprimierung an und stellt die schlankere Datei zum Download bereit.

Was kostet das BASE 3D-AR Studio?

Abgerechnet wird pro Modell, und ein KI-Modell kostet genauso viel wie eine hochgeladene .GLB-Datei:

• Free: 0 $ ohne Kreditkarte, bis zu 3 Live-Modelle und 3 neue Modelle pro Monat, mit einem Wasserzeichen „Powered by BASE“ auf Seiten und Einbettungen. Bearbeitung, AR, Veröffentlichung und Downloads sind inklusive.
• Pro: 0,50 $ pro Modell und Monat (Einführungspreis), mindestens 20 $ pro Monat für 40 Modelle. Sie wählen eine Kapazität zwischen 40 und 2.000 Modellen, monatlich im Voraus abgerechnet und ohne Wasserzeichen.
• Enterprise: individuelle Preise und Kapazitäten, maßgeschneiderte 3D-Projekte, die das Team von BASE BROS umsetzt, und dedizierter Support.

Auf der Preisseite sehen Sie den Monatspreis für die Anzahl an Modellen, die Sie benötigen.

Fazit

Mit dem Studio entsteht eine 3D- und AR-Produktseite in vier Schritten: Modell hinzufügen, verfeinern, auf Save klicken und Link, QR-Code oder Einbettungscode teilen. Starten Sie kostenlos, entdecken Sie Anwendungsfälle nach Branche und Markenprojekte im Showcase oder kontaktieren Sie das Team von BASE BROS für individuelle 3D-Projekte oder Enterprise-Kapazität. Wie sich die einzelnen Lösungen unterscheiden, lesen Sie im Artikel Lösungen von BASE BROS im Überblick.

Kostenlos starten