Embed 3D Models in WordPress — No Plugin Needed

WordPress powers over 40 percent of the web, and yet adding an interactive 3D model to a WordPress page has traditionally been a painful experience. You either install a dedicated plugin that adds bloat, potential security vulnerabilities, and yet another thing to keep updated, or you wrestle with iframes that do not resize properly on mobile and look clunky on desktop. Neither option is great.

There is a better approach. Using GeometryViewer's web component, you can embed a fully interactive 3D viewer in any WordPress post or page with exactly two lines of HTML code. No plugin to install or configure, no iframe sizing headaches, no account to create on a third-party platform. The viewer loads your model file directly and renders it with WebGL, giving your visitors the ability to rotate, zoom, pan, and inspect the model from any angle they choose.

The Two Lines You Need

Here is the complete embed code in its entirety:

<script type="module" src="https://geometryviewer.com/embed.js"></script>
<geometry-viewer src="https://yoursite.com/model.glb" style="width:100%;height:480px"></geometry-viewer>

The first line loads the GeometryViewer web component script. It is a standard ES module that registers a custom HTML element. The second line places the 3D viewer on your page and points it at your model file via the src attribute. That is the entire integration. No initialization function to call, no configuration object to construct, no API key to register.

The src attribute accepts any publicly accessible URL pointing to a supported 3D file format: STL, OBJ, GLTF, GLB, 3MF, PLY, or FBX. The file can be hosted in your WordPress media library, on a CDN, in a GitHub repository, or on any other web server that serves the file with correct CORS headers.

Step by Step: Gutenberg Block Editor

WordPress's default block editor (Gutenberg) uses a modular block-based approach for composing content. To add the 3D viewer, you need to use a Custom HTML block. Here is the complete step-by-step process:

1. Open the page or post where you want the 3D model viewer to appear in the Gutenberg editor.
2. Click the + (plus) button to add a new block. Type "Custom HTML" in the search field and select the Custom HTML block. Do not use a Paragraph block, a Code block, or a Preformatted block. It must specifically be the Custom HTML block, which renders raw HTML in the page output.
3. Paste the two lines of embed code into the Custom HTML block. Update the src URL to point to your actual model file location.
4. Click the "Preview" tab within the Custom HTML block to see a live preview of the 3D viewer right inside the editor. If the model loads successfully and you can rotate it with your mouse, everything is configured correctly.
5. Publish or update the page. The 3D viewer will render for all visitors exactly as it appeared in preview.

The viewer is fully responsive by default. Setting width:100% in the inline style makes it stretch to fill the width of your content column, whatever that width happens to be in your theme. The height can be any pixel value you prefer. 480px works well for most blog layouts and gives enough vertical space for the model to be examined comfortably. Use 300px for a compact inline preview or 600px for a more immersive full-width experience.

Step by Step: Classic Editor

If you are still using the Classic Editor (the pre-Gutenberg editing experience, often enabled via the Classic Editor plugin), the process is slightly different but equally straightforward:

1. Open the page or post in the Classic Editor interface.
2. Switch to the Text tab at the top right corner of the editor area. This is critical. The Visual tab will strip out custom HTML elements that it does not recognize, so you must work in the raw HTML view.
3. Paste the two lines of embed code at the location in your content where you want the viewer to appear. You can place it between paragraphs of text, after a heading, or at the bottom of the post.
4. Do not switch back to the Visual tab before saving. The Classic Editor's Visual mode uses TinyMCE's HTML sanitizer, which may strip or mangle custom element tags that it does not recognize. Save the post while you are still in the Text tab to preserve the code intact.
5. Use the Preview button at the top of the editor to open a front-end preview. The 3D viewer should load and respond to mouse interaction.

An important caveat: if you accidentally switch to the Visual tab after pasting the embed code, WordPress may remove the custom element tags entirely. This is a known limitation of the Classic Editor's HTML processing. As long as you paste in the Text tab and save from the Text tab without switching views in between, the code will be preserved correctly.

Hosting the Model File

The 3D model file needs to be accessible at a public URL. You have several options for hosting it alongside your WordPress site.

WordPress Media Library

WordPress's built-in media library handles file uploads, but by default it only allows common web file types like images, PDFs, audio, and video. 3D file formats such as .stl, .obj, .glb, and .gltf are not in the default allowlist. There are two ways to work around this restriction.

The first approach is to add 3D file types to WordPress's allowed MIME types. Add the following snippet to your theme's functions.php file or to a site-specific plugin:

function allow_3d_uploads($mimes) {
    $mimes['stl']  = 'application/sla';
    $mimes['obj']  = 'text/plain';
    $mimes['glb']  = 'model/gltf-binary';
    $mimes['gltf'] = 'model/gltf+json';
    return $mimes;
}
add_filter('upload_mimes', 'allow_3d_uploads');

After adding this filter, you can upload 3D files through the standard media library interface and WordPress will give you a URL for each uploaded file. Use that URL in the embed code's src attribute.

The second approach, if you prefer not to modify theme files, is to upload the model file via FTP, SFTP, or your hosting provider's file manager. Place it in a logical directory like /wp-content/uploads/models/ and reference it by its full URL in the embed code.

External Hosting Options

You are not limited to hosting the model on your WordPress server. Any publicly accessible URL will work. GitHub is a popular choice for open-source projects: upload the file to a repository and use the raw file URL, such as https://raw.githubusercontent.com/username/repo/main/model.glb.

Cloud storage services like Cloudflare R2, AWS S3, Google Cloud Storage, or DigitalOcean Spaces all work well. The only requirement is that the server must return appropriate CORS headers (specifically Access-Control-Allow-Origin) so the viewer running on your WordPress domain can fetch the file from the storage domain. Most cloud storage services have a straightforward CORS configuration panel.

WordPress.com Plan Limitations

There is an important distinction between WordPress.org (self-hosted WordPress installed on your own server) and WordPress.com (the hosted service run by Automattic). If you are on WordPress.com, your ability to add custom HTML depends on which plan you are paying for.

The free WordPress.com plan does not allow Custom HTML blocks at all. Custom code is entirely restricted. The Personal and Premium plans allow Custom HTML blocks but may sanitize or strip certain tags, including script tags. The Business and eCommerce plans provide full custom HTML and JavaScript capabilities, so the GeometryViewer embed code will work without any issues on those tiers.

If you are on a lower-tier WordPress.com plan that blocks script tags, you have two alternatives. First, you can use an iframe-based embed instead of the web component approach. Second, you can upgrade to the Business plan, which costs more but removes all custom code restrictions. For most users who need to embed 3D content regularly, self-hosted WordPress.org provides the most flexibility and the lowest long-term cost.

Customizing the Viewer Appearance

The web component accepts several optional attributes to control the viewer's behavior and appearance beyond the required src attribute:

• auto-rotate — enables slow continuous rotation of the model, which is effective for product showcases and landing pages where you want to draw the visitor's eye
• camera-controls — enables orbit, pan, and zoom mouse controls (this is on by default)
• background-color — sets a custom background color for the 3D viewport, useful for matching your site's color scheme
• environment — selects the lighting environment used to illuminate the scene

You can combine multiple attributes in the same element tag. A product showcase page might use auto-rotate and a specific background color to match the brand. A technical documentation page might disable auto-rotate so the model stays in exactly the orientation you intended.

Performance and Page Speed

The web component script loads asynchronously via type="module", which means it will not block the rest of your page from rendering. WordPress's Largest Contentful Paint and Time to Interactive metrics will not be affected by the 3D viewer loading in the background. The 3D model file itself is the primary performance variable. A 500KB GLB file loads almost instantly on any connection. A 50MB high-detail STL file will take a few seconds even on broadband.

For the best visitor experience, keep model files under 10MB whenever possible. If your source model is larger, consider reducing polygon count with the Decimate modifier in Blender, or converting from ASCII STL to binary GLB format which is typically more compact. The viewer also supports lazy loading: it will not begin downloading the model file until the viewer element scrolls into the browser viewport. This means adding multiple 3D viewers to a long scrolling page will not slow down the initial page load at all.

Common Troubleshooting Issues

If the 3D viewer does not appear after pasting the embed code, check these common issues in order:

• Mixed content blocking: If your WordPress site runs on HTTPS (which it should), the model file URL must also use HTTPS. A model served over plain HTTP will be blocked by the browser's mixed content security policy.
• CORS errors: If the model is hosted on a different domain from your WordPress site, that domain's server must return Access-Control-Allow-Origin headers. Check your browser's developer console (F12, Console tab) for CORS-related error messages.
• Caching plugins: WordPress caching plugins like WP Super Cache, W3 Total Cache, or LiteSpeed Cache may serve a stale version of the page that does not include your newly added embed code. Clear the cache after adding the 3D viewer.
• Security plugins stripping scripts: Some WordPress security plugins sanitize post content and strip script tags as a precaution against XSS attacks. If you have a plugin like Wordfence or Sucuri, check its settings for HTML sanitization rules and add an exception for the GeometryViewer embed script domain.