How to Add a 3D Model to Your Website: Even From a Drawing

What do you need to put a 3D model on a website?

You need three things: a 3D file of the object, a place on your website to keep that file, and a 3D viewer on the page that shows it. The viewer is what lets visitors turn the model and zoom in.

• The 3D file. A STEP, STL, GLB or OBJ file. See the next section for which one.
• A place for the file. Your site’s media library or file storage, the same place your product photos and PDF datasheets go.
• A viewer. A small piece of code that draws the model in the page. You don’t write it; you embed one.

Which 3D file format should you use?

For a manufactured part, use STEP: it holds the exact shape, and engineers who visit can download it for their own designs. Use GLB for products where color and finish matter more than exact sizes, and STL for 3D-printed parts.

Many web viewers only read GLB, so a STEP file has to be converted first. A CAD viewer that reads STEP directly saves that step. More on the formats in what is a STEP file and STL vs STEP.

How do you embed a 3D viewer on a web page?

Upload the 3D file to your site and copy its link. Then paste the viewer’s embed code where the model should appear, with your file’s link in it. The free PartWork.ai viewer takes one line of HTML.

1. Upload the file to your website and copy its address, for example https://your-site.com/files/part.step.
2. Paste the embed code into the page, with that address after model=.
3. Publish and check the page: the model appears, and visitors can drag it to turn it and scroll to zoom.

<iframe
  src="https://cdn.partwork.ai/viewer/index.html?theme=light&upload=off&model=https://your-site.com/files/part.step"
  style="width:100%;height:460px;border:0"
  title="3D model of the part"
  loading="lazy"
  allow="fullscreen"></iframe>

The file has to be on the same website as the page that shows it. Colors, a dark theme and your own logo are all options; see the embed guide for the full list.

How do you add a 3D model in WordPress?

Install a 3D viewer plugin, add its block to the page and pick your 3D file from the Media Library. With the free PartWork.ai 3D Viewer plugin there is no code to paste.

1. In your dashboard, go to Plugins › Add New, search for PartWork, then Install and Activate (or get it from the plugin directory).
2. Upload your STEP or STL file under Media › Add New.
3. Edit the product page, add the 3D Viewer block and choose the file in the block’s Model settings.

On the classic editor, the shortcode [partwork_viewer] does the same.

What if you only have a drawing, not a 3D file?

Have the drawing turned into a STEP file, then embed that. Many parts sold today were drawn before 3D CAD, or their model was lost, so the PDF drawing is all there is. A clear drawing with every view and dimension is enough to build the 3D model from.

Drawing to STEP from PartWork.ai builds the model from a PDF, scan or photo of the drawing in minutes, checked against every view. The 3D product viewer guide shows one part all the way through: the drawing, the 3D model, and the finished product page.

Export-controlled drawings (ITAR/EAR) aren’t accepted.

How do you keep a 3D model from slowing the page down?

Load the viewer only when it scrolls into view, keep the 3D engine inside its own frame, and keep the file small. A viewer embedded as a frame with lazy loading adds almost nothing to the page until a visitor reaches it.

• Lazy loading. The loading="lazy" in the embed code above waits until the viewer is near the screen.
• One model per page. On a product page, one viewer next to the photos is plenty.
• Simple files. A part model with fine detail in hidden places makes a bigger file for no benefit; export only the part buyers see.

Frequently asked questions

Ready to show your parts in 3D?

If you already have STEP or STL files, set up the free viewer. If you only have drawings, convert one first and the viewer shows the result.