Tiny Online Tools
Vier Wege, ein Modell auf eine Seite zu bringen — alle vollständig
Ein 3D-Modell einzubetten gehört zu den Aufgaben, bei denen der Beispielcode immer fast richtig ist. Das Snippet in der Dokumentation lässt den Resize-Handler weg. Der Blogbeitrag vergisst controls.update(), und schon bewirkt die Dämpfung stillschweigend nichts. Das React-Beispiel überspringt die Suspense-Grenze und wirft beim ersten Rendern einen Fehler. Dieser Generator liefert das Ganze — mit genau den Einstellungen, die Sie tatsächlich gewählt haben.
<model-viewer>
Googles Web Component ist der kürzeste Weg von nichts zu einem funktionierenden Viewer: ein <script type="module">-Tag und ein Custom Element. Kamerasteuerung, automatische Drehung, AR unter Android und iOS, bildbasierte Beleuchtung und ein Posterbild erledigt es von allein. Wenn Sie heute Nachmittag ein Modell auf eine Marketingseite bringen wollen, nehmen Sie dieses hier.
Das erzeugte Tag enthält touch-action="pan-y" — leicht zu übersehen und genau der Unterschied zwischen einem Viewer, der sich auf dem Handy nativ anfühlt, und einem, der mit dem Seiten-Scrolling kämpft.
Three.js
Für eine Szene, die Sie selbst steuern. Das Snippet importiert aus three/addons/* — ein echter Subpath-Export des three-Pakets, funktioniert also unter jedem Bundler —, richtet den Renderer mit ACES Tone Mapping und Ihrer Belichtung ein, baut über PMREMGenerator und RoomEnvironment eine neutrale Studioumgebung auf, ergänzt OrbitControls mit Dämpfung, lädt das Modell über GLTFLoader, behandelt das Resizing und läuft über renderer.setAnimationLoop() statt über ein nacktes requestAnimationFrame, damit dieselbe Schleife weiterläuft, falls die Seite später in WebXR wechselt.
React Three Fiber
Die React-Fassung: @react-three/fiber für das Canvas, @react-three/drei für useGLTF, OrbitControls, Environment und ContactShadows. useGLTF.preload() wird außerhalb der Komponente aufgerufen, damit der Download startet, bevor React rendert, und das Modell sitzt innerhalb einer Suspense-Grenze mit einem echten Fortschritts-Fallback auf Basis von useProgress.
Eigenständige HTML-Seite
Eine vollständige index.html — Doctype, Viewport-Meta, Styles, CDN-Skript, Viewer. Speichern, auf einen beliebigen statischen Host hochladen, fertig. Das ist nicht dasselbe wie das erste Snippet: Jenes ist ein Fragment für eine bestehende Seite, dieses eine ganze Datei.
Kameraabstand
Den Kameraabstand zu raten ist der lästigste Teil des Einbettens, denn er hängt vom realen Maßstab des Modells ab. Laden Sie Ihre Datei lokal, und das Werkzeug misst ihre Hüllkugel und berechnet den Abstand, bei dem das Modell ein 45°-Frustum mit einem kleinen Rand ausfüllt. Die Datei wird nie hochgeladen und taucht nie im erzeugten Code auf — nur die Zahl tut das.