Kategorien durchsuchen
Entdecken
Fiverr Pro
Deutsch
$
USD
Ich erstelle einen 3D-Produktkonfigurator und interaktiven Produktviewer mit threejs
julius F
Über diesen Service
Automatische Übersetzung
Lass deine Kunden genau sehen, was sie kaufen, in voller 3D-Ansicht, bevor sie auf "In den Warenkorb" klicken.
Ich entwickle maßgeschneiderte 3D-Produktkonfiguratoren und interaktive Produktviewer mit Three.js und React Three Fiber, die Echtzeit-WebGL-Anwendungen sind. Damit können Kunden dein Produkt live im Browser rotieren, zoomen und anpassen. Keine App-Installation, keine Plugin-Beschränkungen, keine Vorlageeinschränkungen. Reiner Eigenbau-Code, der um dein Produkt, deine Optionen und deine Marke herum entwickelt wurde.
Technologie-Stack:
- Three.js
- React Three Fiber (R3F)
- Drei
- WebGL / GLSL
- GLTF / GLB / USDZ
- WebGI
- GSAP
- Next.js
- PlayCanvas
Konfigurator-Funktionen, die ich baue:
Echtzeit-Farb- und Materialwechsel durch Klick auf eine Farbkarte, sofortige Aktualisierung des 3D-Modells
Komponenten sichtbar machen/verbergen (Add-ons, Zubehör, Varianten)
Texturierung: Anwenden von benutzerdefinierten Texturen, Mustern oder Decals auf die 3D-Oberfläche in Echtzeit
360° Orbit-Steuerung: sanftes Mouse- / Touch-Drag zum Rotieren, Pinch zum Zoomen
Umgebungsbeleuchtung: HDRI-basierte realistische Beleuchtung, die sich bei Materialänderungen aktualisiert
Explosionsansicht: Produktteile trennen, um interne Komponenten zu zeigen
Animierte Übergänge: sanfte Kamerabewegungen zwischen Konfigurationszuständen
Screenshot- / Share-Button
Rechte Dritter respektieren
Bitte beachte, dass es gegen die Richtlinien von Fiverr verstößt, wenn Freelancer Themes, Vorlagen oder andere Elemente, die die Rechte Dritter oder geltende Gesetze verletzen, in die gelieferte Arbeit aufnehmen. Lies mehr darüber in unseren Leitfaden für verantwortungsvolle digitale Kreation.
Lerne julius F kennen
julius F
I create stunning, high performance Framer websites with modern UIUX
- AusVereinigte Staaten
- Mitglied seitDez. 2025
- ⌀ Antwortzeit1 Stunde
Sprachen
Englisch, Spanisch
Hi, I’m a Framer website designer focused on building visually stunning, high-performance websites for startups, SaaS products, and personal brands. I turn ideas into modern, interactive, and conversion-ready websites using Framer.
I combine UI/UX design expertise with Framer’s advanced animations and components to create websites that are fast, responsive, and easy to edit—no coding required.
Automatische Übersetzung
FAQ
Automatische Übersetzung
Produktarten, die ich konfiguriert habe:
Möbel · Schuhe / Footwear · Uhren · Schmuck · Kleidung · Elektronik · Fahrzeuge / Bikes · Verpackung · Industrielle Ausrüstung · Personalisierbare Geschenke
Verkäuferfähigkeiten
Three.js React Three Fiber WebGL / GLSL 3D-Produktkonfigurator GLTF / GLB-Optimierung Next.js / React GSAP-Animation PlayCanvas WebGI USDZ / AR Quick Look Shopify-Integration Performance-Optimierung
Suchbegriffe
Produktkonfigurator · 3D-Konfigurator · threejs · webgl · react three fiber · 3D-Produktviewer · interaktives 3D · 3D-Website · 3D-Modell · Konfigurator · three js · glb · usdz · 3D-interaktiv · webgl-konfigurator · webgi · 3D-Produkt · playcanvas · 3D-Produktdesign · gsap animation · 3D-Konfigura
In welchem Dateiformat muss mein 3D-Modell vorliegen?
Bevorzugt wird GLTF oder GLB — das native Format für Three.js und R3F, das die beste Performance im Web bietet. Ich akzeptiere auch FBX, OBJ, STL und Blender .blend Dateien, die ich im Rahmen des Build-Prozesses konvertiere und optimiere.
Kannst du ein Produkt mit Dutzenden von Konfigurationsoptionen und -kombinationen verwalten?
Ja — komplexe Konfigurationsmatrizen werden vollständig unterstützt. Ich verwende einen Zustandsautomaten-Ansatz: Jeder konfigurierbare Teil hat eine definierte Reihe von Zuständen, und das Wechseln einer Option löst einen Materialwechsel, Mesh-Wechsel oder Sichtbarkeitsumschaltung am entsprechenden 3D-Objekt aus. Für Produkte mit hunderten von Kombinationen
Wie funktioniert die Warenkorb-Integration mit Shopify?
Wenn ein Kunde seine Konfiguration abschließt, ordne ich seine Auswahl den Shopify-Produktvarianten-IDs über die Storefront API zu. Die gewählte Konfiguration (Farbe, Material, Teile) wird als Variant-Metafelder oder Line-Item-Properties codiert und mit dem add-to-cart API-Aufruf an den Warenkorb übergeben.
Was ist USDZ und brauche ich AR-Funktionalität?
USDZ ist Apples 3D-Dateiformat für AR Quick Look — wenn ein iOS-Nutzer den AR-Button antippt, öffnet sich das Produkt in seiner Kameraansicht im realen Maßstab, basierend auf LiDAR oder ARKit seines Telefons. Es ist ein mächtiges Konvertierungstool für Möbel, Schuhe und Haushaltswaren, bei denen Größenwahrnehmung für Käufer wichtig ist. Andr
Wird der Konfigurator auf durchschnittlichen Kunden-Geräten schnell genug sein?
Ja — Leistungsoptimierung ist in die Architektur integriert, nicht nachträglich eingebaut. Ich verwende DRACO-Geometriekompression (typischerweise 70–90% Dateigrößenreduktion), KTX2-Texturkompression, instanzierte Materialien, damit mehrere Oberflächenwechsel keine mehrfachen Draw Calls verursachen, und progressives Laden, damit die UI schnell lädt.
Kannst du eine "Screenshot und Teilen"-Funktion hinzufügen, damit Kunden ihre Konfiguration speichern können?
Ja — dies ist eine Premium-Funktion und als Standard-Add-on erhältlich. Die Screenshot-Funktion rendert die aktuelle 3D-Leinwand als PNG mit renderer.domElement.toDataURL() — sie erfasst genau das, was auf dem Bildschirm in voller Auflösung zu sehen ist. Für teilbare URLs wird der aktuelle Konfigurationsstatus codiert.
