Tiny Online Tools
Four ways to put a model on a page, all of them complete
Embedding a 3D model is one of those tasks where the sample code is always almost right. The snippet in the docs leaves out the resize handler. The blog post forgets controls.update(), so damping silently does nothing. The React example skips the Suspense boundary and throws on first render. This generator emits the whole thing, with the settings you actually chose baked in.
<model-viewer>
Google's web component is the shortest path from nothing to a working viewer: one <script type="module"> tag and one custom element. It handles camera controls, auto-rotate, AR on both Android and iOS, image-based lighting and a poster image on its own. If you want a model on a marketing page this afternoon, use this one.
The generated tag includes touch-action="pan-y", which is easy to miss and is the difference between a viewer that feels native on a phone and one that fights the page scroll.
Three.js
For a scene you control. The snippet imports from three/addons/* — a real subpath export in three's package, so it works under any bundler — sets up the renderer with ACES tone mapping and your exposure, builds a neutral studio environment through PMREMGenerator and RoomEnvironment, adds OrbitControls with damping, loads the model through GLTFLoader, handles resize, and runs on renderer.setAnimationLoop() rather than a bare requestAnimationFrame so the same loop keeps working if the page later enters WebXR.
React Three Fiber
The React version: @react-three/fiber for the canvas, @react-three/drei for useGLTF, OrbitControls, Environment and ContactShadows. useGLTF.preload() is called outside the component so the fetch starts before React renders, and the model sits inside a Suspense boundary with a real progress fallback driven by useProgress.
Standalone HTML page
A complete index.html — doctype, viewport meta, styles, CDN script, viewer. Save it, upload it to any static host, done. This is not the same as the first snippet: that one is a fragment for an existing page, this one is a whole file.
Camera distance
Guessing the camera distance is the most annoying part of embedding a model, because it depends on the model's real-world scale. Load your file locally and the tool measures its bounding sphere and computes the distance at which it fills a 45° frustum with a small margin. The file is never uploaded and never appears in the generated code — only the number does.