v10.5 · Ein Script · 89 KB · Keine Abhaengigkeiten

3D-Modelle auf jeder Website

Interaktiver 3D-Viewer zum Einbetten. Unterstuetzt STL, GLB, OBJ, PLY, FBX, 3MF. Ein Script einbinden - fertig.

Live Demo ansehen Preise & Lizenz
89 KB
Eine Datei
7
3D-Formate
11
Hintergruende
8
Materialien
4
Sprachen
0
Dependencies

Live Demo

Jeder Viewer ist interaktiv - drehen, zoomen, Hintergrund wechseln. Eigene Datei per Drag & Drop testen.

Kugel · Studio
Ring · Warm
Zahnrad · Dark
Vase · Sunset
Schachfigur · Studio
DNA Helix · Dark
Herz · Sunset
Pokal · Warm
Twisted Vase · Neon
Kleeblattknoten · Neon
Rakete · Dark
Kristall · Night

Eigene Datei testen

Ziehe eine STL, GLB oder OBJ-Datei in den Viewer unten. Alle Features sind aktiviert.

Was der Viewer kann

Ein Script. Keine Abhaengigkeiten. Funktioniert auf jeder Website.

📄

7 Formate

STL, GLB, GLTF, OBJ, PLY, FBX, 3MF. Automatische Erkennung.

🎨

11 Hintergruende

Dark, Light, Studio, Warm, Ocean, Sunset, Forest, Night, Neon, Transparent, Camera.

💎

8 Materialien

Standard, Matt, Glaenzend, Metallisch, Plastik, Gold, Chrom, Ton.

🌐

4 Sprachen

Deutsch, English, Espanol, Francais. Automatische Browser-Erkennung.

📱

Touch-Optimiert

1 Finger drehen, 2 Finger zoomen, 3 Finger verschieben. Desktop + Mobile.

📦

Drag & Drop

3D-Dateien direkt in den Viewer ziehen. Optional: Upload nur fuer Admins.

📷

Screenshot & Vollbild

Aktuelle Ansicht als PNG speichern. Immersiver Vollbild-Modus.

🔧

WordPress Plugin

Shortcode [stl_viewer], WooCommerce-Integration, Gutenberg Block, Elementor Widget.

89 KB · Zero Dependencies

Three.js wird bei Bedarf vom CDN geladen. Kein npm, kein Build.

💻

JavaScript API

new STLViewer('#el', {stl, color, bg}). Volle programmatische Kontrolle.

🎬

Animationen

GLB- und FBX-Animationen werden automatisch erkannt und abgespielt.

Tastenkuerzel

R=Drehen, G=Gitter, F=Vollbild, W=Wireframe, Ctrl+S=Screenshot.

So einfach einbinden

Zwei Zeilen HTML. Kein Build, kein npm, kein Server.

1

Script einbinden

Die Datei stl-viewer.js auf deinen Server hochladen und einbinden.

<script src="stl-viewer.js"></script>
2

Viewer einfuegen

Ein div mit data-stl-viewer und dem Pfad zur 3D-Datei.

<div data-stl-viewer
     data-stl="modell.stl"
     data-background="studio"
     style="height:500px">
</div>
3

Fertig

Der Viewer initialisiert sich automatisch. Beliebig viele Viewer pro Seite moeglich.

<!-- WordPress Shortcode -->
[stl_viewer
  stl="modell.stl"
  background="studio"
  height="500px"]

Einsatzbereiche

🖨

3D-Druck Shops

Kunden sehen das Modell vor dem Kauf von allen Seiten

💍

Schmuck & Accessoires

Ringe, Ketten, Anhaenger interaktiv praesentieren

🏢

Architektur & Design

3D-Modelle von Gebaeuden und Moebeln im Browser

🎓

Bildung & Wissenschaft

Anatomie, Molekuele, Geographie interaktiv erkunden

🛒

E-Commerce

Produkte in 3D statt nur Fotos. WooCommerce-kompatibel

💼

Portfolio & Agentur

3D-Arbeiten professionell im Web praesentieren

Beispiel-Seiten & Vorlagen

Fertige Vorlagen die zeigen, was mit dem Viewer moeglich ist.

🎨

Feature Showcase

Alle Hintergruende, Materialien und Modelle

🖼

25 Modelle Galerie

Filterbares Grid mit allen Demo-Modellen

Live Konfigurator

Viewer einstellen und Embed-Code kopieren

💍

Schmuck-Shop

Premium Jewelry Store Template

🖨

3D-Druck Shop

MakerSpace Store Template

📖

Schnellstart-Anleitung

Fuer Anfaenger bis Entwickler

🛒

Produkt-Galerie

Multi-Produkt Shop Beispiel

Preise & Lizenz

Einmalige Zahlung. Keine Abos. Inklusive Updates fuer den angegebenen Zeitraum.

Starter
49 EUR einmalig
Fuer eine Website
  • 1 Domain / Website
  • Alle 7 Formate
  • Alle Hintergruende & Materialien
  • 6 Monate Updates
  • E-Mail Support
Anfragen
Agentur
199 EUR einmalig
Unbegrenzte Websites
  • Unbegrenzte Domains
  • Alle 7 Formate
  • WordPress Plugin inklusive
  • Lifetime Updates
  • Prioritaets-Support
  • White Label (eigenes Branding)
  • Installationsservice optional
Anfragen

Haeufige Fragen

Welche 3D-Formate werden unterstuetzt?

STL (ASCII + Binary), GLB, GLTF, OBJ, PLY, FBX und 3MF. STL ist das gaengigste Format fuer 3D-Druck, GLB eignet sich fuer farbige Modelle und Animationen.

Brauche ich einen Server oder npm?

Nein. Die Datei stl-viewer.js ist alles. Auf deinen Webserver hochladen, Script-Tag einbinden, fertig. Three.js wird bei Bedarf automatisch vom CDN geladen.

Funktioniert es auf Smartphones?

Ja. Volle Touch-Unterstuetzung: 1 Finger drehen, 2 Finger zoomen, 3 Finger verschieben. Responsive fuer alle Bildschirmgroessen.

Wie funktioniert die WordPress-Integration?

Das WordPress Plugin bietet einen Shortcode [stl_viewer], einen Gutenberg Block und ein Elementor Widget. Bei WooCommerce kann der Viewer automatisch auf Produktseiten eingebunden werden.

Koennen Besucher Dateien hochladen?

Nur wenn du data-admin="true" setzt. Standardmaessig sehen Besucher nur die Vorschau. Upload-Berechtigung ist komplett steuerbar.

Wie erhalte ich Updates?

Nach dem Kauf erhaeltst du die aktuelle Version per E-Mail. Updates werden fuer den im Lizenz-Zeitraum angegebenen Zeitraum per E-Mail zugeschickt.

Kann ich es vor dem Kauf testen?

Ja. Alle Demos auf dieser Seite zeigen den Viewer in Aktion. Ziehe eine eigene 3D-Datei in den "Eigene Datei testen"-Viewer oben. Bei Fragen schreib an info@lern-digital.de.

Interesse? Schreib uns.

Fragen zur Lizenz, Integration oder individuelle Anforderungen - wir helfen gerne.

info@lern-digital.de lern-digital.de