Embed Interactive 3D Models in Medium Articles

Why 3D Models in Medium Articles?

Medium is where engineers, designers, and product people share their thinking. If you're writing about hardware design, 3D printing, product development, architecture, or any field that deals with physical objects, a flat image only tells part of the story. An interactive 3D model lets your readers examine the object from every angle, zoom into details, and form their own understanding — not just the perspective you chose for a screenshot.

Consider the difference between a product review that shows three photos of a gadget versus one that lets the reader rotate the CAD model freely. Or a tutorial about 3D printing supports that lets the reader spin the model to see exactly where the overhang problems are. Or an architecture article where the reader can orbit around a building design to understand spatial relationships. The 3D embed transforms passive reading into active exploration.

Medium's publishing platform is intentionally minimal — no plugins, no custom HTML blocks, no JavaScript injection. This keeps articles fast and consistent. But Medium does support rich embeds through the oEmbed protocol, which is the same technology that makes YouTube videos, Twitter posts, and CodePen demos embed automatically when you paste their URLs. GeometryViewer supports oEmbed, so the same magic works for 3D models.

How to Embed: The Paste Method

Embedding a 3D model in Medium is as simple as pasting a URL. Here's the step-by-step process.

Step 1: Upload your model to GeometryViewer

Go to geometryviewer.com and upload your 3D file. We support GLB, GLTF, STL, OBJ, 3MF, and STEP formats. Once the upload is complete, copy the viewer URL from your browser's address bar or the share dialog. It will look like https://geometryviewer.com/v/abc123.

Step 2: Paste the URL in your Medium draft

Open your Medium article in the editor. Place your cursor on a new empty line where you want the 3D model to appear. Paste the GeometryViewer URL. You can paste it directly with Ctrl+V (or Cmd+V on Mac). Medium will detect the URL and attempt to resolve it as a rich embed.

Step 3: Press Enter to confirm

After pasting, press Enter. Medium processes the URL through its oEmbed resolution pipeline. If the URL is recognized (and GeometryViewer URLs are), Medium replaces the raw URL with an embedded iframe. You'll see the interactive 3D viewer appear directly in your article draft.

If Medium doesn't auto-resolve the embed, try an alternative approach: on a new line, click the "+" button that appears on the left margin, select the embed icon (it looks like angle brackets: </>), paste the URL in the embed field, and click the embed button.

Step 4: Publish

The embed looks the same in your draft and in the published article. What you see in the editor is what your readers will see. Publish your article normally, and the 3D viewer will be live for all readers.

What Your Readers Experience

When a reader encounters your embedded 3D model, they see an interactive viewer embedded within the article's text flow. They can rotate the model by clicking and dragging (or swiping on touch devices), zoom with the scroll wheel (or pinch gesture), and pan by right-clicking and dragging (or two-finger drag on touch).

The viewer loads lazily — it doesn't start downloading the 3D model until the reader scrolls near it. This means your article's initial load time isn't affected. The model data downloads in the background while the reader is reading the text above the embed, so by the time they scroll to it, it's often already loaded.

On mobile devices, the viewer is touch-friendly. The viewer detects whether the user is trying to scroll the page or interact with the 3D model based on the touch gesture. A vertical swipe scrolls the page; a horizontal drag rotates the model. This prevents the common problem of 3D viewers "trapping" the user's scroll on mobile.

Sizing and Layout Limitations

Medium controls the size of embedded content, and you don't get to override it. This is the main trade-off of embedding in Medium versus on your own site. Here's what to expect.

The embed width is determined by Medium's content column, which is approximately 680px on desktop and full-width on mobile. You cannot make the embed wider or narrower than the column. The height is determined by the oEmbed response — GeometryViewer returns a default aspect ratio that gives the viewer enough vertical space for comfortable interaction, typically around 400-450px on desktop.

You cannot control the border radius, background color, or padding of the embed from within Medium. These are set by the oEmbed iframe styling. The viewer itself has a clean, minimal appearance that fits well with Medium's design language, so this isn't usually a problem.

If you need more control over the viewer's appearance — custom backgrounds, specific camera angles, lighting adjustments — you can configure these on the GeometryViewer side before embedding. The viewer URL includes any customization you've applied, so those settings persist in the Medium embed.

Alternative: The Link Card Approach

If the oEmbed approach doesn't work for your model (perhaps the URL isn't resolving, or you want a different presentation), you can use Medium's link card feature instead. This creates a clickable card that links to the full GeometryViewer page, where readers can interact with the model in a dedicated viewer.

To create a link card, paste your GeometryViewer URL on a new line and wait for Medium to generate the card preview. This will show a thumbnail image of the model, the title, and a brief description. Readers click the card to open the viewer in a new tab.

The link card approach is less immersive than a direct embed — readers leave your article to view the model — but it gives them the full-screen viewer experience with all controls and features. It's also a good fallback if you're embedding multiple models in one article, since several inline 3D viewers can be heavy on older devices.

Best Practices for 3D Models in Articles

Based on testing dozens of 3D-enriched Medium articles, here are the practices that work best.

Add context before the embed

Always write a sentence or two above the 3D viewer that tells readers what they're looking at and what to notice. "Here's the final bracket design — rotate it to see the mounting holes on the back" is much more effective than just dropping a viewer in the middle of your text. Give readers a reason to interact with the model.

Add a caption after the embed

Medium doesn't support captions on embeds the way it does on images, but you can add a line of italic text below the viewer as a pseudo-caption. Use this to credit the model source, note the file format, or add measurement details that help the reader understand scale.

Limit to 2-3 models per article

Each embedded 3D viewer creates a WebGL context and loads geometry data. On modern devices, this is fine for a few viewers, but an article with ten inline 3D models will strain older phones and laptops. If you need to reference many models, embed the 2-3 most important ones and link to the rest.

Optimize your models before uploading

Medium readers expect fast page loads. Keep your 3D files under 5 MB for the best experience. For STL files, reduce polygon count if visual quality permits. For GLB files, compress textures to JPEG instead of PNG, and enable Draco mesh compression. GeometryViewer handles progressive loading, but smaller files still mean faster first renders.

Test on mobile before publishing

Over half of Medium's traffic comes from mobile devices. Open your draft on your phone and test the 3D viewer's responsiveness, load time, and touch interaction. Make sure the viewer is large enough to interact with comfortably and that the model's default camera angle shows the most interesting view — many mobile readers will see the model at its default angle and never interact further.

Use Cases That Work Well

Certain types of Medium articles benefit enormously from embedded 3D models. Here are the categories where we've seen the most engagement.

• Product reviews and teardowns. Let readers inspect the product from every angle. Particularly effective for hardware, tools, and consumer electronics.
• 3D printing tutorials. Show the model orientation, support placement, or print failure points interactively. Readers can rotate to see exactly what you're describing.
• Architecture and interior design. Building models, floor plans, and furniture layouts become dramatically more understandable when readers can orbit around them.
• Engineering case studies. Mechanical parts, assemblies, and structural designs benefit from interactive viewing. Readers can zoom into details that a screenshot might miss.
• Portfolio showcases. Artists and designers can present their 3D work in its native format instead of flattening it to screenshots.

Troubleshooting

Medium doesn't recognize the URL

Make sure you're pasting the full URL including https://. Try pressing Enter after pasting. If it still shows as plain text, use the embed button from the "+" menu instead of direct paste.

The embed shows but the model doesn't load

Open the GeometryViewer URL in a new tab to verify the model is accessible. If the model was deleted or the link expired, the embed will show an error state. Re-upload the model and update the URL in your Medium draft.

The viewer is too small on desktop

Medium controls the embed dimensions. The viewer fills Medium's content column width and uses a standard height. You can't change this from Medium's side. If you need a larger viewing experience, consider linking to the full viewer page with a "View in full screen" call-to-action below the embed.