How to Embed 3D Models on my Website?
Sketchfab is the leading platform to publish, share and integrate 3D content anywhere on the web: your website, eCommerce platforms, blogs, articles, and across social channels.
Our 3D viewer works on any device and any modern browser*.
All Major 3D File Formats
Create 3D content
First things first: before you share any 3D model on the web you need to create the 3D file. There are many different 3D creation software options out there; you’ll find a selection of a few popular examples here.
If you manufacture products, you probably already have 3D assets in your pipeline. Sketchfab supports all major 3D file formats, so the majority of your 3D models are likely already compatible with Sketchfab. You may be able to use your file as is, but it’s very likely that it will benefit from a number of optimizations, for aesthetic or performance reasons.
Optimize your model
When our partners optimize models for performance on the Sketchfab player, one of the main criteria they focus on is loading time. If a model takes a long time to load, the user experience will suffer and users may close their browser windows rather than wait. This is even more important to consider for mobile users.
The main factors that impact load time are (1) the size of the 3D meshes (number of polygons) and (2) the size and number of textures (if your model uses textures). As a general rule, aim to have as few separate materials, geometries (meshes), textures, and polygons (triangles, quadrangles, etc.) as possible in your model. The lower you keep these numbers, the faster the viewer will load and the better it will perform.
The way you create/prepare your 3D asset depends greatly on the intended use case of the Sketchfab viewer (configurator, eCommerce, landing pages, advertising, social media). Creating custom content designed for your specific use case is always the best option.
Upload your 3D model to Sketchfab
Create or log in to your existing Sketchfab account
Upload model files
Click on the UPLOAD button on the top-right corner of any Sketchfab page.
You can either upload to your company account or to your individual account.
You will then be asked to choose the file(s) you would like to upload–just make sure you’re using our supported formats. As an alternative to clicking on the Browse button, you can also just drag and drop your file(s).
Then simply click the UPLOAD FILES button.
Once you start the uploading process, a window will appear as below. Fill in the information about your model – model name, description, categories, tags, etc. Then click the PUBLISH button.
After your model has finished uploading and processing, you should be able to see it in the Models section of your profile.
You can also upload to Sketchfab directly from your 3D application using one of our exporters. All major 3D softwares are integrated with Sketchfab to allow you to export your files in just a few clicks directly to Sketchfab.
Embed models and viewer customization
You can embed a Sketchfab 3D model on any HTML website. Before you embed a model, you have to switch the visibility of your model to ‘private or public’. In EDIT PROPERTIES, select Public or Private then save.
Click the Embed button on the model’s page, under the viewer.
Click within the code to copy it, and then paste it into your site’s HTML.
This will work almost anywhere on the web: if the HTML iframe tag is supported, you can embed a Sketchfab model.
You can easily add parameters to the embed code to customize the user experience and increase engagement: make the model autoplay, embed white-label, change the color of the loading bar, etc.
Remove the headline below the model
To remove the headline below the model, simply unmark the “show byline” option.
<iframe id="view360Iframe" width="100%" scrolling="0" src="https://sketchfab.com/models/8d913bda48f84217902e6829982c494f/embed?ui_infos=0&ui_watermark=0&ui_help=0&ui_settings=0&ui_inspector=0&ui_annotations=0&ui_stop=0&ui_vr=0&preload=1&autostart=1&ui_hint=2&autospin=0.2"> </iframe>
Once you have upgraded to a Premium or an Enterprise account, simply select “Remove watermark” in the options.
All the available embed options are explained in more detail here.
For detailed instructions on how to optimize the integration of your 3D models to increase product engagement, read our dedicated blog post.